Jump to content

Css/javascript Interface Layout - Would Like To Remove Script If Poss

Recommended Posts

--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.

Edited by chumpers
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...