Jump to content
  • Advertisement
Sign in to follow this  
GameMasterXL

[web] javascript question

This topic is 4807 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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 <td> with the id given to them is this possible?

Share this post


Link to post
Share on other sites
Advertisement
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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:

<div id="tabbody"> ... </div>

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:

<div id="container">
<div id="tab1"> ... </div>
<div id="tab2"> ... </div>
</div>

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

Both can be implemented using javascript. Shout out if you need some (pseudo) code to help you with this.

Share this post


Link to post
Share on other sites
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 tabnames
var tabids = new array(); // stores tab id's
var tabids2 = new array(); // stores tab cell id's

function 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";
}
}

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!