Jump to content

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


chumpers
 Share

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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...