SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best practice, unobtrusive way to show/hide divs

    Hi,

    I've got the following code in a website of mine:

    Code:
    <a href="section1.htm">Section 1</a>
    <a href="section2.htm">Section 2</a>
    <a href="section3.htm">Section 3</a>
    <a href="section4.htm">Section 4</a>
    
    <div id="general">General overview</div>
    
    <div id="section1">Section 1 overview</div>
    <div id="section2">Section 2 overview</div>
    <div id="section3">Section 3 overview</div>
    <div id="section4">Section 4 overview</div>
    I want to display the div marked 'General overview' by default, and to hide all of the other divs (section1, section2, section3 and section4) but would like to swap out the 'general' div with the other divs as the corresponding links are moused over.

    e.g. mousing over the Section 2 link will replace the 'general' div with the 'section2' div. On mousing out, it will revert back to the 'general' div. Mousing over the Section 4 link will replace the 'general' div with the 'section4' div. On mousing out, it will revert back to the 'general' div. Etc etc.



    My Javascripting is pretty limited, and I can only think of a very long winded way to do this:

    Code:
    CSS:
    #section1, #section2, #section3, #section4 {
    display: none
    }
    
    XHTML:
    <a href="section1.htm" onmouseover="document.getElementById('general').style.display='none; document.getElementById('section1').style.display='block'; document.getElementById('section2').style.display='none'; document.getElementById('section3').style.display='none'; document.getElementById('section4').style.display='none';" onmouseout="blah blah blah">Section 1</a>

    Is there a way to do this using a single, unobtrusive function called on page load?

    If so, any pointers would be greatly appreciated.

    Thanks very much...

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand, something like this http://sinpps.cz/ ? I have not use js on menu, but it sounds me similar.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to do this using a single, unobtrusive function called on page load?
    Here is the general format:
    Code:
    <script type="text/javascript">
    
    window.onload=function()
    {
    	document.getElementById("myDiv").onmouseover = function()
    	{
    		//The things you want to do on mouseover go in here.
    
                    //Inside here, 'this' refers to the element being moused over,
                    //so you can write things like: this.style.display = "none"
    	}
    	...
    	...
    };
    
    </script>
    </head>
    <body>

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by danwednesday View Post
    Code:
    <a href="section1.htm">Section 1</a>
    <a href="section2.htm">Section 2</a>
    <a href="section3.htm">Section 3</a>
    <a href="section4.htm">Section 4</a>
    
    <div id="general">General overview</div>
    
    <div id="section1">Section 1 overview</div>
    <div id="section2">Section 2 overview</div>
    <div id="section3">Section 3 overview</div>
    <div id="section4">Section 4 overview</div>
    Is there a way to do this using a single, unobtrusive function called on page load?
    For sake of argument, let's say that you're anchors are wrapped in a div. We'll call that div "anchors". We'll also assume that your href is *always* the same as the ID of your elements - without the .htm extension.

    Also...rather than swap out the contents of the 'general' div, we just selectively show/hide the divs that are "contained" within the general div
    HTML Code:
    <div id="anchors">
    <a href="section1.htm">Section 1</a>
    <a href="section2.htm">Section 2</a>
    <a href="section3.htm">Section 3</a>
    <a href="section4.htm">Section 4</a>
    </div>
    <div id="general">
    <div id="default">General Overview</div>
    <div id="section1">Section 1 overview</div>
    <div id="section2">Section 2 overview</div>
    <div id="section3">Section 3 overview</div>
    <div id="section4">Section 4 overview</div>
    </div>
    Javascript:
    Code:
    function toggleDivs(elem) {  
      var divs = document.getElementById("general").getElementsByTagName("div");
      for (var i = 0; i < divs.length; i++) {
        divs[i].style.display = "none";
      }
      document.getElementById(elem).style.display = '';
    }
    window.onload = function() {
      toggleDivs("default"); //sets them all invisible except the default one
      var a = document.getElementById("anchors").getElementsByTagName("a");
      for (var i = 0; i < a.length; i++) {
        var id = a[i].href.substring(0,a[i].href.indexOf(".htm")); //gives you the id
        a[i].onmouseover = function() {  toggleDivs(id); };
        a[i].onmouseout = function() {  toggleDivs("default"); };
      }
    };
    Now you can add additional anchors and associated <div>'s without having to mess with your javascript code.

    Hope this helps,

    Jon

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope this helps,
    Your code won't work--you have closure issues with your onmouseover assignments. When id is accessed inside any of the onmouseover functions, its value will be the last value assigned to id in the for loop.

    To make it work, you could add a property to each a[i]:

    a[i].targetDiv = a[i].href.substring(...); //gives you the id

    and then define the onmouseovers like this:

    a[i].onmouseover = function() { toggleDivs(this.targeDiv); };
    Last edited by 7stud; Jan 10, 2007 at 23:37.

  6. #6
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud View Post
    Your code won't work--you have closure issues with your onmouseover assignments.
    Doh!!
    I was writing that on the fly and didn't test. I probably should be more careful.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great stuff, everyone!

    This is very similar to a "tabbed panels" app. Here's one I wrote for a question just the other day: Basic Tabbed Panels.

  8. #8
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. It's not working for me however, since my links are dynamic - e.g.

    Code:
    <a href="section.asp?variable=this">Section 1</a>
    <a href="section.asp?variable=that">Section 2</a>
    <a href="section.asp?variable=theother">Section 3</a>
    Is there a way to deal with this, or should I just go with inline JS?

    Thanks...

  9. #9
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the code I have, with inline JS. Very verbose, and a shame to spoil an otherwise very clean XHTML page:

    Code:
    		<div class="icons">
    			<a href="solution.asp?level1=Acoustic" title="Acoustic solutions" onmouseover="document.getElementById('home_solutions').style.display='none'; document.getElementById('home_fire-solutions').style.display='none'; document.getElementById('home_thermal-solutions').style.display='none'; document.getElementById('home_oem-solutions').style.display='none'; document.getElementById('home_acoustic-solutions').style.display='block';" onmouseout="document.getElementById('home_solutions').style.display='block'; document.getElementById('home_acoustic-solutions').style.display='none';"><img src="img/ico_solution_acoustic.gif" alt="Acoustic solutions : icon" class="domroll img/ico_solution_acoustic_over.gif" /></a>
    			<a href="solution.asp?level1=Fire" title="Fire solutions" onmouseover="document.getElementById('home_solutions').style.display='none'; document.getElementById('home_acoustic-solutions').style.display='none'; document.getElementById('home_thermal-solutions').style.display='none'; document.getElementById('home_oem-solutions').style.display='none'; document.getElementById('home_fire-solutions').style.display='block';" onmouseout="document.getElementById('home_solutions').style.display='block'; document.getElementById('home_fire-solutions').style.display='none';"><img src="img/ico_solution_fire.gif" alt="Fire solutions : icon" class="domroll img/ico_solution_fire_over.gif" /></a>
    			<a href="solution.asp?level1=Thermal" title="Thermal solutions" onmouseover="document.getElementById('home_solutions').style.display='none'; document.getElementById('home_acoustic-solutions').style.display='none'; document.getElementById('home_fire-solutions').style.display='none'; document.getElementById('home_oem-solutions').style.display='none'; document.getElementById('home_thermal-solutions').style.display='block';" onmouseout="document.getElementById('home_solutions').style.display='block'; document.getElementById('home_thermal-solutions').style.display='none';"><img src="img/ico_solution_thermal.gif" alt="Thermal solutions : icon" class="domroll img/ico_solution_thermal_over.gif" /></a>
    			<a href="solution.asp?level1=OEM" title="OEM solutions" onmouseover="document.getElementById('home_solutions').style.display='none'; document.getElementById('home_thermal-solutions').style.display='none'; document.getElementById('home_acoustic-solutions').style.display='none'; document.getElementById('home_fire-solutions').style.display='none'; document.getElementById('home_oem-solutions').style.display='block';" onmouseout="document.getElementById('home_solutions').style.display='block'; document.getElementById('home_oem-solutions').style.display='none';"><img src="img/ico_solution_oem.gif" alt="OEM solutions : icon" class="last domroll img/ico_solution_oem_over.gif" /></a>
    		</div>
    		<div class="solution-text_home" id="home_solutions">
    			<h1>Solutions</h1>
    			<p>Phasellus nisi pede, condimentum quis, adipiscing eu, cursus quis, justo. Integer et quam at ipsum fringilla pretium. Vestibulum hendrerit, arcu a fringilla nonummy, est justo accumsan tellus, dapibus volutpat nunc tortor sit amet libero. Ut vel erat.</p>
    		</div>
    		<div class="solution-text_home" id="home_acoustic-solutions">
    			<h1>Acoustic Solutions</h1>
    			<p>Phasellus nisi pede, condimentum quis, adipiscing eu, cursus quis, justo. Integer et quam at ipsum fringilla pretium. Vestibulum hendrerit, arcu a fringilla nonummy, est justo accumsan tellus, dapibus volutpat nunc tortor sit amet libero. Ut vel erat.</p>
    		</div>
    		<div class="solution-text_home" id="home_fire-solutions">
    			<h1>Fire Solutions</h1>
    			<p>Phasellus nisi pede, condimentum quis, adipiscing eu, cursus quis, justo. Integer et quam at ipsum fringilla pretium. Vestibulum hendrerit, arcu a fringilla nonummy, est justo accumsan tellus, dapibus volutpat nunc tortor sit amet libero. Ut vel erat.</p>
    		</div>
    		<div class="solution-text_home" id="home_thermal-solutions">
    			<h1>Thermal Solutions</h1>
    			<p>Phasellus nisi pede, condimentum quis, adipiscing eu, cursus quis, justo. Integer et quam at ipsum fringilla pretium. Vestibulum hendrerit, arcu a fringilla nonummy, est justo accumsan tellus, dapibus volutpat nunc tortor sit amet libero. Ut vel erat.</p>
    		</div>
    		<div class="solution-text_home" id="home_oem-solutions">
    			<h1>OEM Solutions</h1>
    			<p>Phasellus nisi pede, condimentum quis, adipiscing eu, cursus quis, justo. Integer et quam at ipsum fringilla pretium. Vestibulum hendrerit, arcu a fringilla nonummy, est justo accumsan tellus, dapibus volutpat nunc tortor sit amet libero. Ut vel erat.</p>
    		</div>

  10. #10
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd never encourage switching to inline event handlers versus UJS.

    You can use creative ID assignments as another way to work with your links:
    <a id="section1"></a>

    with a corresponding

    <div id="section1_div"></div>

    Then you write your event handler for the links, append the "_div" to the anchor's id when calling the toggleDiv function.

  11. #11
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, having problems integrating what 7stud said actually to get your function working. It's probably really easy, but as you can tell my JS skills are very limited.

    Here's what I have so far:

    Code:
    function toggleDivs(elem) {  
      var divs = document.getElementById("general").getElementsByTagName("div");
      for (var i = 0; i < divs.length; i++) {
        divs[i].style.display = "none";
      }
      document.getElementById(elem).style.display = '';
    }
    window.onload = function() {
      toggleDivs("default"); //sets them all invisible except the default one
      var a = document.getElementById("anchors").getElementsByTagName("a");
      for (var i = 0; i < a.length; i++) {
        var id = a[i].href.substring(0,a[i].href.indexOf(".htm")); //gives you the id
        a[i].onmouseover = function() { toggleDivs(this.targeDiv); };
        a[i].onmouseout = function() {  toggleDivs("default"); };
      }
    };
    It's the part about the a[i].href.substring that I'm struggling to get in there.

  12. #12
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry - was away on vacation

    The substring for the href may not work in your case. Like you said earlier, your href value is a dynamic value. My next suggestion would be to ditch using the href and switch to creative DIV id assignment:
    HTML Code:
    <a href="something.asp?level=Acoustic" id="acoustic_anchor">Text of Link</a>
    <div id="acoustic_anchor_div">stuff in the div</div>
    In your javascript:
    Code:
    window.onload = function() {
      toggleDivs("default");
      var a = document.getElementById("anchors").getElementsByTagName("a");
    for (var i = 0; i < a.length; i++) {
        a[i].onmouseover = function() { toggleDivs(this.id + "_div"); };
        a[i].onmouseout = function() {  toggleDivs(this.id + "_div"); };
      }
    };
    You'll notice the big difference in the onload event using the anchor's id instead of the href.


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
  •