...

View Full Version : Change to document.forms[0].display Instead of document.layers



Kylena
01-25-2005, 04:34 AM
I have the following script that does this:
When I click on a link it displays information that are in that div section. When I click on another link, it displays info in that other div section.

However, not all the sections are of equal length, the visibility only hides the info and if any one of the info in a section is short, the scrollbar is still there. I don't want that.

How do I change the code such that I'm using document.forms[0].getElementByID('name').style.display = 'none'; instead?


function showtab(tabnum)
{
var tabname = "tab" + tabnum;
if (tabname != currtab)
{
if (window.document.layers)
{
handle = "window.document.layers";
stylevar = "";
}
else
{
handle = "document.all";
stylevar = ".style";
}
}
eval(handle + '"[' + currtab + '"]' + stylevar + '.visibility = hidden');
eval(handle + '"[' + tabname + '"]' + stylevar + '.visibility = visible');
}

glenngv
01-25-2005, 05:01 AM
Do you really want to support IE4 and NS4? If you're only concerned with IE5+, Mozilla and other modern browsers, using document.getElementById is enough. But if not, try this code:


function showtab(tabnum)
{
var tabname = "tab" + tabnum;
var handle1, handle2;
if (tabname != currtab)
{
if (document.getElementById)
{
handle1 = document.getElementById(currtab);
handle2 = document.getElementById(tabname);
}
else if (document.all)
{
handle1 = document.all[currtab];
handle2 = document.all[tabname];
}
else if (document.layers)
{
handle1 = document.layers[currtab];
handle2 = document.layers[tabname];
}
if (handle1.style)
{
handle1.style.display = 'none';
handle2.style.display = '';
}
else
{
handle1.visibility = 'hidden';
handle2.visibility = 'visible';
}
}
}

Kylena
01-26-2005, 04:41 AM
Thanks Glenn, although the user didn't state what are the versions and browser type, we have to simplify the development, the usual constraint, complete fast and on time including all the other modifications that are forever going on.

So, only IE is considered.
;)

Kylena
01-26-2005, 08:12 AM
Hi Glenn,

The code doesn't seem to work accordingly.

When I click on the 'tabs', everything 'disappears'.

Below is my usage:

<a href="#" onclick="javascript:showtab(1)">Tab 1</a>
<a href="#" onclick="javascript:showtab(2)">Tab 2</a>


I've placed the code in the Header and I've been trying to decipher it to no avail.

glenngv
01-26-2005, 10:54 AM
Put return false at the end of the function to cancel the href action.


function showtab(tabnum)
{
var tabname = "tab" + tabnum;
if (tabname != currtab)
{
if (document.getElementById)
{
document.getElementById(currtab).style.display = 'none';
document.getElementById(tabname).stye.display = '';
}
}
return false;
}

And then call it like these:

<a href="#" onclick="return showtab(1)">Tab 1</a>
<a href="#" onclick="return showtab(2)">Tab 2</a>

Kylena
01-27-2005, 02:42 AM
Oh, ok, I'll try it out.

Thanks again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum