Jump to content


  • Posts

  • Joined

  • Last visited

chumpers's Achievements


Newbie (1/7)



  1. Yeah I was also thinking of doing this, pruning the branch closer to the stem, sort of thing. If IE won't let you handle that tag directly, just move one step back in the DOM and see if you can create the appropriate content from there down. I'll see if it works. It's a balancing act because the actual function I need to write is wired into a few more things.
  2. I'm not an expert in web design, but I have plenty of experience as an architect making presentations, for which my tool of choice is photoshop. I'd go about it the same way as I'd make a presentation with lots of pages. Parts which remain the same in one folder with multiple layersParts which appear on many pages in one folder with multiple layersDistinct page content, unique to each page in folder groups P1 ... Pn with multiple layers This way when exporting a set of jpegs to show your client you can leave group1 switched on at all times group 2 on when necessary and the others one at a timeIf you use imageready, you can streamline this exporting process by having it output either an animation or set of frames if you shoot me an address I'll set up a file for you and show you what I mean. a typical layer/layer group structure for this kind of design operation might look like this group1 (layer group) header (layer) footer (layer) nav bar (layer) side bar (layer) group2 (layer group) tower ad (layer) center ad (layer) other stuff which appears sporadically group3 (layer group) page1 (layer group) text (layer) images (layer) page2 (layer group) text (layer) images (layer) etc... Then if you animate the layer on/off value in image ready and save your file as a group of images, you will have a file, which you can edit and export quickly
  3. Update - this does not seem to be the correct format forel.styleSheet.addRule(rule); where rule is a string such as "#selector{attributes:values;etc}" Microsoft's IE seems to want things in the format: el.styleSheet.addRule("#someSelector","someValues") also firefox refuses to even acknowledge the existance of "addRule" and breaks the function.Therefore the only way I can think of to make sure IE is behaving like the other browsers is the less than elegant example below <style id='poo' type='text/css' > #box{background-color:red;}</style> <script>function changeStuff(){ var el = document.getElementById('poo'); someSelector = "#box"; someValues ="background-color: blue; height:200px;" if(el.styleSheet!=undefined) { // If this is Internet Explorer var l = el.styleSheet.rules.length; el.styleSheet.removeRule(l - 1); el.styleSheet.addRule(someSelector , someValues); } else { el.innerHTML= someSelector + "{" + someValues + "}"; }}</script> <div id=box>some stuff</div><br><input type=button onClick='changeStuff()'>
  4. Thank you, This was not obvious from the tutorials and I could not have completed the function without your help. Many thanks. Aditionally, I put a question on the CSS forum. since there have been no replies to this for a long time, could it be moved here? After further research, I think it may not be possible to make custom radio buttons without js, so i'd rather just work on the js question. If I need to reformat it let me know and I'll rewrite the post here. Many thanks,Elliott.
  5. The following adapted code taken from this page works in firefox (and I assume some other browsers), but it does not work in internet explorer. The specific part, which stops the script entirely in IE is highlighted in red bold below. Is there a work around to solve this problem so that I can change the content of a style sheet dynamically - using onClick etc Thanks as always for your time. <html><head> <style id="poo" readonly=false>#myAnchor{color:green}</style><script type="text/javascript">function changeLink(){document.getElementById('poo').innerHTML="#myAnchor{color:red}"; document.getElementById('myAnchor').innerHTML="W3Schools";document.getElementById('myAnchor').href="http://www.w3schools.com";document.getElementById('myAnchor').target="_blank";}</script></head><body> <a id="myAnchor" href="http://www.microsoft.com">Microsoft</a><input type="button" onclick="changeLink()" value="Change link"> </body></html>
  6. --edited, code wasn't pasted in properly.... Rats damn it - edited again I have made a small interface for analysing the output of an algorithm which studies various aspects of cellular automata. at the moment the interface is working perfectloy in firefox and i.e. versions >6 there are a couple of my questions I have: 1... Could someone have a look at it to tell me what glaring errors I have made? 2. The interface uses a javaScript function i wrote*... --activeCheckBox(someElement,someAttributeValue,setNumberIdentifier)-- ...to create a custom radio button mechanism. I would either like to a ) remove this function altogether if there is an alternative using CSS, which returns exactly the same effect, in the same cross browser environment as stated above.b ) improve it by incorporating the argument setNumberidentifier into the code by automatically working back up the dom tree to discover the position of the parent of someElement within tagNamesByClass - so that instead of --checkBoxElements=tagNamesByClass[setNumberIdentifier].getElementsByTagName("a");-- rather --checkBoxElements=tagNamesByClass[someElement.parentNode.**the reference number in the array**].getElementsByTagName("a");-- --- then I can lose the argument for setNumberIdentifier making the function more portable and easier to use. --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"><html> <head> <title>an interface for studying 1-dimensional cellular automata</title> <script type="text/javascript"> function getTagWithClass(tagName,className){ //we want to return all the div elements with the 'option class so: elementCollection = document.getElementsByTagName(tagName) tagNamesByClass = new Array(); //should I return this as an object? is an array the right thing? tnbcRef = 0; //all counteres are named using acronym of the the thing they count + ref for(ecRef=0 ; ecRef < elementCollection.length ; ecRef++){ if(elementCollection[ecRef].getAttributeNode('class')!=null){ //dont try and find further children/nodeValues if null as it breaks function in fire fox if(elementCollection[ecRef].getAttributeNode('class').nodeValue==className){ tagNamesByClass[tnbcRef]=elementCollection[ecRef]; tnbcRef++; } } } return tagNamesByClass } function activeCheckBox(someElement,someAttributeValue,setNumberIdentifier){ //last argument complicates use of this function and is badly designed - need help //I want to ensure that the following loop only affects the attribute of checkboxes within a certain div classed 'option' checkBoxElements=tagNamesByClass[setNumberIdentifier].getElementsByTagName("a"); for(cbeRef=0 ; cbeRef<checkBoxElements.length ; cbeRef++){ //backgroundColor could be any attribute and will eventually be included as a function argument checkBoxElements[cbeRef].style.backgroundColor=""; } activeAttribute=someAttributeValue; if(someElement.style.backgroundColor!=activeAttribute){someElement.style.backgroundColor=activeAttribute} } </script> </head> <LINK href='page_layout.css' rel='stylesheet' type='text/css'> <body onload="getTagWithClass('div','option')"> <div class=container> <div class=left> <div class=group> <div class=valName>width</div> <div class=val><input type=text value=20 maxlength=2></div> </div> <div class=group> <div class=valName>height</div> <div class=val><input type=text value=20 maxlength=2></div> </div> <div class=group> <div class=halfWidth>range</div> </div> <div class=option> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',0)">1</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',0)">2</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',0)">3</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',0)">4</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',0)">5</a> </div> </div> <div class=right> <div class=option> <a href="#" class=bigButton onclick="activeCheckBox(this,'blue',1)">random</a> <a href="#" class=bigButton onclick="activeCheckBox(this,'blue',1)">single</a> </div> </div> <div class=group> <div class=group> <div class=fullWidth>states</div> </div> <div class=option> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',2)">1</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',2)">2</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',2)">3</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',2)">4</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',2)">5</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',2)">6</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',2)">7</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',2)">8</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',2)">9</a> <a href="#" class=checkBox onclick="activeCheckBox(this,'blue',2)">10</a> </div> <div id=previewBox> preview </div> </div> <div class=group> <a href="#" class=fullWidth>start</a> </div> <div class=group> <a href="#" class=halfWidth>export rules</a> <a href="#" class=halfWidth>export large grid</a> </div> <div class=group> <div id=info> Variables:<br> <b>Width</b> = number of cells per row<br> <b>Height</b> = number of rows<br> <b>Random/Single</b> starting row contains either 1 center cell or random info<br> <b>Range 1-5</b> specifies the number of cells on either side of a cell to be included in determining the next state<br> <b>States = 1-10</b> specifies the number of different states per cell </div> </div> </div> </body></html> and the css *{ line-height:18px; margin:0px; border:0; padding:0; text-align:center; font-family:arial; font-size:10px; text-decoration:none; } body{ padding-top:100px; } .container{ width:240px; margin:0px auto; text-align:center; } .right{ float:left; } .left{ float:left; } .option{ clear:both } .group{ clear:both } a:hover{ background-color:red; color:pink; } input{ width:20px; height:20px; background-color:#dddddd; } .valName{ float:left; height:20px; width:100px; background-color:#aaaaaa; } .val{ height:20px; width:20px; float:left; background-color:#dddddd } .halfWidth{ display:block; float:left; height:20px; width:120px; background-color:#dddda5; } .checkBox{ display:block; height:20px; width:24px; float:left; background-color:#fafacc; } .bigButton{ display:block; background-color:#ddcaca; line-height:40px; height:40px; width:120px; clear:both; } #previewBox{ height:240px; width:240px; clear:both; background-color:#fddffd; } .fullWidth{ display:block; height:20px; width:240px; clear:both; background-color:#addaad; } #info{ height:200px; width:240px; clear:both; text-align:left; background-color:ddcaca; } input{ background-color:dddddd; height:18px; } sorry for messing up the code boxes last time - I have bunged it back in properly I hope. all code written by me - absolutely no restrictions apply.
  • Create New...