Skip to main content
gamedev.net
🔒 Locked

[web] javascript question

Started by GameMasterXL 5 replies 1k views
Original Post
GameMasterXL
GameMasterXL
I am making a script that creates a tab menu and i have created a addTab() function and addBody() function so i am wondering when the user creates a body for the tab using the addBody() with the specified parameters can i get the bodys to be created all together so i can call each one with there id? So i z-index them all but will this work if i append each one other the top of each other then my functions can call each with the id given to them is this possible?
ArchG
ArchG
Wow..you're going to have to be a bit more clear for us to help you with that..

At least for me to help anyway.
GameMasterXL
GameMasterXL
Sorry about that i don't explain good enougth lol :). Well is what i am doing is creating a tab menu and i have one function that adds a cell for the tab were the text goes like

_______
|Script |-> tab

Then i have another function that creates the body of the tab like

_______ ______
|Script | |
----------------------------|
____________________________|-> body of tab

So is what i was wondering is when the call to the function that creates the body of my tab is called will it re-write over the old body or append a new one other it? since it creates a body inside of a dive were it will either create a new div or make a cell to support the body and then hide the bodys untill they are needed. So the function AddBody() that creates the body will make a body for a tab, so will a new body be created and all the bodys created will be in the document so i can manipulate each one since my function just created it? or will it over-write the old tab body with the new info when the function is called with different parameters on the next call?
Sander
Sander
Let me see if I get this right: You want to know if adding a new tab-body will erase the old tab-bodies that are there? If that, scorrect then the answer is: doesn't matter. You can do both.

1) Overwrite old tabs
Just clear the contents of the tabbody div and put the new contents in. Like:

...


document.getElementById('tabbody').innerHTML = newcontents;

2) Keep old tabs
Set all open bodytabs to CSS display: none. Then add a new div after the last div and put the contents of the new tabbody in it. Kinda like so:


...

...



for (var i = 0; i < container.childNodes.length; i++)
{
container.childNodes.style.display = 'none';
}
container.appendChild( ... );

Both can be implemented using &#106avascript. Shout out if you need some (pseudo) code to help you with this.</span>
GameMasterXL
GameMasterXL
Cool thanks for that, yes i wanted the append the new one method lol.

Would this code below work for creating the tab button?

<script language="JavaScript" src="%20vc%20">/* id1 is used for identifying the body of the tab since the body of the tab will have the same id   id2 is used for identifying the tab cell that the tab is currently in so the background color can be changed for the current state */var gen_num = 0;  // for generated tabnamesvar tabids = new array(); // stores tab id'svar tabids2 = new array(); // stores tab cell id'sfunction initTabMenu(){  /* prototype: AddTab(tabname, event_t, id1, id2)     tabname = value inside of tab	 event_t = event on tab, events supported are	 			click				over				out				dbclick	 id1 = tab identification, this is used to link the tab to the tab body	 id2 = tab cell identification, this is used to find the tab cell for style changes	 This function creats a new tab.  */  function AddTab(tabname, event_t, id1, id2)  {     var events = 0;	 gen_num++;	      switch(event_t) {	 	case 'click':		   events = "onClick";		break;		case 'over':		   events = "onMouseOver";		break;		case 'out':		   events = "onMouseOut";		break;		case 'dbclick':		   events = "onDobuleClick";		break;		default:		   if(event_t == "") {		      alert("You need to specifie an event type, default event used.") // now why did you not give an event type?			  events = "onClick";		   }		   else		   {		      alert("Event "+event_t+" Is not a recognised event, default event used.") // o'well looks like you give an unkown event			  events = "onClick";		   }		break;	  }	  if(tabname=="") {	  	alert("Please specifie a tabname, generated name used."); // o_O you have been nauty and you didn't type a name		tabname = "tab"+gen_name;	  }	  else if(tabname > 14) {	  	alert("Tabname exceding 14 characters at "+tabname.length+" characters, generated name used."); // make sure we don't excede 14 now o_O		tabname = "tab"+gen_name;	  }	  if(!id1) {	     alert("Pleas specifie a tab ID for tab body linkage.");  // check for id sir		 return;	  }	  if(!id2) {	     alert("Pleas specifie a tab ID for tab cell change."); // check for cell if		 return;	  }	  tabids[gen_num] = id1; // store id1 into array	  tabids2[gen_num] = id2; // store id2 into array	  // now we create the tab	  // some variables we need to create to store our new table cells in	  var tab = document.getElementById('tab_mnu').rows[0]; // gets table for our new cells	  var val = tab.insertCell(0);  // stores new cells	  	  // genetics below, we build our cells o_O	  val.innerHTML+"<td id='"+id2+"' onClick='changeState(id2)' "+events+"='getBody(id1)'>"+tabname+"</td>";	  // well genetic math wasn't all that hard now was it?   }     /* Prototype: getBody(ide)      ide = tab body identification.	  This function gets the tab body using its id and hides the rest of the tab bodys.   */   function getBody(ide)   {     document.getElementById(ide).style.visibility="visible"; // change ide's index to 1 so it is visible	 for(i=0; i<tabids.length; i++) {  // loop through the id's of the tab bodys 	     if(tabids==ide) i++; // if tabids is equal to ide then skip to the next element		 document.getElementById(tabids).style.visibility="hidden"; // hide all the other body elements	 }    }	/* Prototype: changeState(iden)	   iden = identification of tab cell to change color for the current state	   This function changes the color of the tab light grey for active dark for inactive.	 */	function changeState(iden)	{	   document.getElementById(iden).style.background="#CCCCCC";	   for(i=0; i<tabids2.length; i++) {	       if(tabids2==iden) i++; // skip past id if it is equal to iden		   document.getElementById(tabids2).style.background="#999999";	   }	 }
Sander
Sander
It looks okay by me. The one thing I wonder about is the visibility="hidden" though. I think you want display="none" there instead. Elements with no visibility are not displayed, but the page is still layed out as if the element were there (i.e. it still takes up space). Elements with no display are not shown as well but do not take up any space. The page acts as if it weren't there at all.
GameMasterXL
GameMasterXL
Ah thanks for your help. I think i am going to re-do it cause with them functions i can add the tab but with the AddBody() function i can't add user forms just images which makes it a bit restrictive. So i am goin to use the idea you said about before with a main div then add childe divs which makes the bodys of the tabs and then you can add forms images anything. Then my add tab will go through each one and check if the id is the id that is on the current tab if so select that body and make is visible and hide the rest using visibility: none;. Thanks for all your help.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.