chumpers Posted September 29, 2011 Share Posted September 29, 2011 --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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.