SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making a show/hide div script cross-browser

    I would prefer not the fork the script (test for browser then run applicable code) but i need to get this working in netscape too...
    as of right now, i have a absolutly positioned div holding an image based menu and by defualt it is "display: none;"

    this is the javascript i am using...

    function togglemenu() {
    if (!document.getElementById) return false;

    var menuObj = document.getElementById("mainmenu");

    if (menuObj.style.display == "block") {
    menuObj.style.display = "none";
    } else {
    menuObj.style.display = "block";
    }
    }
    function hidemenu() {
    var menuObj = document.getElementById("mainmenu");
    menuObj.style.display = "none";}

    any ideas?

    i want to achieve the same functionality that i hav in IE, onclick to show and hide onmouseout...

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which Netscape are you talking about? If you are talking about Netscape 4.x forget about it not only wont it happen, but it isn't worth the effort. Netscape 6+, Opera 7, Mozilla, MSIE 5.5+, Firebird and any other standards compliant browser should not have problems with the following:

    document.getElementById(strElement).style.display='block';
    document.getElementById(strElement).style.display='none';
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KLB
    document.getElementById(strElement).style.display='block';
    document.getElementById(strElement).style.display='none';
    hrm, isn't that how I am addressing them in the script though, and it doesn't work in Netscape
    [[Netscape 7.1 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)]]

    here is the page i am talking about... the "AYUSA MainMenu" to the left-side should drop down when clicked and then hide itself on mouseout under IE, but its not doing it under Netscape or Mozilla
    http://ayusa.org/news/news_main_menu_test.cfm

  4. #4
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I misread your script. Your problem revolves around the way you are trying to detect the style status. This thread will answer your problems: http://www.sitepoint.com/forums/showthread.php?t=143938
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  5. #5
    SitePoint Enthusiast rutters's Avatar
    Join Date
    Nov 2002
    Location
    ct
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would like to use this script but have it display multiple divs that all have the same ID at the same time? Does anyone know how to achieve this?

    I have come up with a script that achieves this but it is slow...I would prefer to use getbyelementId...

    Code:
    <script>
    function promoBox(checked){
    
    	var count = document.all['required'].length
    
    	for (var i = 0; i < count; i++)
    	{
    		var elem = document.all[i];
    		if (elem.id == 'required') {
    			elem.style.display = checked ? "block" : "none";
    		}
    	}
    }
    
    
    </script>
    <input type="checkbox" onclick="promoBox(this.checked)">This is the Offer
    <div style="display: none;" id="required">test1
    	<font color='#ff0000'>*</font>
    </div>
    
    <div style="display: none;" id="required">test2
    	<font color='#ff0000'>*</font>
    </div>

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    rutters -

    Got an email notification on this elderly thread, no idea why.
    Anyway...an id must be unique, one to a webpage.

    Sometimes multiple ids with a common root word are used ('required_1', 'required_2', etc.). Try this:
    Code:
    <html>
    <head>
    <style type="text/css">
    div.req {
     display: none;
     width: 100px;
     font: normal 12px tahoma;
     text-align: right;
     margin: 3px 40px;
     padding: 2px;
     border: 1px #000 dashed;
    }
    </style>
    <script type="text/javascript">
    
    function promoBox(bChecked)
    {
     var elem = null, n = 1;
     while (elem = document.getElementById('required_' + n++))
      elem.style.display = bChecked ? 'block' : 'none';
    }
    
    window.onload = function()
    {
     var box = null;
     if ((box = document.getElementById('pBox'))
     && box.checked)
      promoBox(true);
    }
    
    </script>
    </head>
    <body>
    <input id="pBox" type="checkbox" onclick="promoBox(this.checked)">This is the Offer
    
    <div id="required_1" class="req" style="background:tan;">test1
    	<span style="color:#ff0000;">*</span></div>
    
    <div id="required_2" class="req" style="background:skyblue;">test2
    	<span style="color:#ff0000;">*</span></div>
    
    <div id="required_3" class="req" style="background:pink;">test3
    	<span style="color:#ff0000;">*</span></div>
    </body>
    </html>
    Simply tries ids ('required_1', 'required_2', etc.) until it finds one that doesn't exist, and stops. The onload handler ensures that if you back into the page with the checkbox set, the divs will be shown. Keep in mind, this is the same as <body onload="..." so you'll need to make adjustments if you're calling other routines onload. hth
    ::: certified wild guess :::

  7. #7
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, a two-year hiatus. Welcome back. Some of us missed your dessicated wit and occasional insight.

    So how was the weather on Elba?


Bookmarks

Posting Permissions

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