Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2003
    Location
    Singapore
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change to document.forms[0].display Instead of document.layers

    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?

    Code:
    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');
    }

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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:
    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';
    		}
    	}
    }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New Coder
    Join Date
    Aug 2003
    Location
    Singapore
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Aug 2003
    Location
    Singapore
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Hi Glenn,

    The code doesn't seem to work accordingly.

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

    Below is my usage:
    Code:
    <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.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Put return false at the end of the function to cancel the href action.
    Code:
    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>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    New Coder
    Join Date
    Aug 2003
    Location
    Singapore
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Oh, ok, I'll try it out.

    Thanks again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •