www.webdeveloper.com
Results 1 to 9 of 9

Thread: Modify show/hide multiple div script to unobtrusive javascript

  1. #1
    Join Date
    Apr 2008
    Posts
    9

    Modify show/hide multiple div script to unobtrusive javascript

    Hi,

    I found a script on this site that shows/hides multiple divs from WebJoel (thanks WebJoel ). However, I would like to modify the script to be unobtrusive and need to write a new function to control the onmouseover event taken from the xhtml anchors.
    The script from WebJoel is:

    Code:
    function switch1(div) {
    var option=['top','right','bottom','left'];
    for(var i=0; i<option.length; i++) {
    if (document.getElementById(option[i])) {
    obj=document.getElementById(option[i]);
    obj.style.display=(option[i]==div)? "block" : "none";
    }
    }
    }
    The event handlers in the anchors are:

    Code:
    <div id="graphic">
    <a href="javascript:void[0];" onmouseover="switch1('top'); return false;" id="a-top">Link for Top</a>
    <div id="top" class="placeholder">
    <h5>Text to show when anchor "top" is hovered</h5>
    </div>
    <a href="javascript:void[0];" onmouseover="switch1('right'); return false;" id="a-right">Link for Right</a>
    <div id="right" class="placeholder">
    <h5>Text to show when anchor "right" is hovered</h5>
    </div>
    </div>
    etc. for "bottom" and "left" div's. Note that the css for div class="placeholder" is display: none; by default.

    I had a go at writing a function to control the event handler, based on a book I am studying. I am clearly missing some code which should scan and store the anchors eventhandler. The code I wrote is:

    Code:
    function prepareAnchors() {
    if (!document.getElementsByTagName) return false;
    if (!document.getElementsById) return false;
    if (!document.getElementById("graphic")) return false;
    var anchors = document.getElementById("graphic");
    var links = anchors.getElementsByTagName("a");
    for(var i=0; i<links.length; i++) {
    links[i].onmouseover = function() {
    switch1(div)(this);
    return false;
    }
    }
    }
    addLoadEvent(prepareAnchors);
    Could anyone please help me modify the code so that I can get the switch1(div) function to work by using the eventhandler in the external javascript.

    Many thanks.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This is for lists, but the principle is the same:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Collapsing lists</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    window.onload=function() {
    var aUL=document.getElementById('lists').getElementsByTagName('ul');
    for(var i=0;i<aUL.length; i++) {
      if (aUL[i].addEventListener) { // W3C
    	aUL[i].parentNode.addEventListener('mouseover', function() {toggle(this); }, false);
    	aUL[i].parentNode.addEventListener('mouseout', function() {toggle(this); }, false);
        }
      else {
    	aUL[i].parentNode.onmouseover=function() {toggle(this);};
    	aUL[i].parentNode.onmouseout=function() {toggle(this);};
        }
      aUL[i].parentNode.style.cursor='pointer';
      aUL[i].className='collapse';
      }
    }
    
    function toggle(obj) {
    var list=obj.getElementsByTagName('ul')[0];
    list.className=(list.className=='collapse')? 'expand' : 'collapse';
    }
    </script>
    
    <style type="text/css">
    .collapse {display:none;}
    .expand {display:block;} 
    </style>
    
    </head>
    <body>
    <ul id="lists">
      <li>Title 1
        <ul>
          <li>a</li>
          <li>b</li>
          <li>c</li>
        </ul>
      </li>
      <li>Title 2
        <ul>
          <li>a</li>
          <li>b</li>
          <li>c</li>
        </ul>
      </li>
    </ul>
    </body>
    </html>

  3. #3
    Join Date
    Apr 2008
    Posts
    9
    Thanks Fang,

    I get the gist of how this script would work for me. The only difference is that I need the text in the div (or the ul in your example) to remain visible from the moment the link is hovered, until a different link is hovered.

    I tried removing the "aUL[i].parentNode.addEventListener('mouseout', function() {toggle(this); }, false);" line and corresponding 'onmouseout' function but this didn't result in the behaviour I was hoping for.

    Any guidance on modifying your script would be much appreciated.
    Thanks again.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Collapsing lists</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    var aUL=null;
    window.onload=function() {
    aUL=document.getElementById('lists').getElementsByTagName('ul');
    for(var i=0;i<aUL.length; i++) {
      if (aUL[i].addEventListener) { // W3C
    	aUL[i].parentNode.addEventListener('mouseover', function() {toggle(this); }, false);
        }
      else {
    	aUL[i].parentNode.onmouseover=function() {toggle(this);};
        }
      aUL[i].parentNode.style.cursor='pointer';
      aUL[i].className='collapse';
      }
    }
    
    function toggle(obj) {
    for(var i=0;i<aUL.length; i++) {
      aUL[i].className='collapse';
      }
    var list=obj.getElementsByTagName('ul')[0];
    list.className='expand';
    }
    </script>
    
    <style type="text/css">
    .collapse {display:none;}
    .expand {display:block;} 
    </style>
    
    </head>
    <body>
    <ul id="lists">
      <li>Title 1
        <ul>
          <li>a</li>
          <li>b</li>
          <li>c</li>
        </ul>
      </li>
      <li>Title 2
        <ul>
          <li>a</li>
          <li>b</li>
          <li>c</li>
        </ul>
      </li>
    </ul>
    </body>
    </html>

  5. #5
    Join Date
    Apr 2008
    Posts
    9
    Hi Fang,

    Thanks again for your help.

    I have spent the afternoon tinkering with your script trying to incorporate it into my xhtml code and css. Unfortunately, your script requests the class for the ul to be toggled between the .collapse and .expand class selectors. This causes a number of problems in IE6 and IE7. The ul's are absolutely positioned into the same placeholder space when visible. Therefore, to style them I moved the .placeholder css code to the .expand css code, but IE seems to keep the space that would have been allocated for the ul when it is collapsed. This results in a flickering effect as you hover over the "top" li (which was previously an anchor in my first post).

    My original script changed only the display: css value between block or none and IE worked fine with that modification. Is there any way to use my original script and add the "addEventListener" or equivalent for the onmouseover event handler?

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Do you have a document to look at? Without seeing the html and css I can't really help.

  7. #7
    Join Date
    Apr 2008
    Posts
    9
    Hi Fang,

    I realised what the problem was with the css. I had absolutely positioned some child elements and the parent containers (the li's) were not positioned. As the script action was based on hovering the li's, they still toggled, even though they were now an empty space.

    My css seems pretty bloated now, but at least the javascript works!

    I still haven't understood how to take the event handlers out of my original xhtml file and put them into the javascript file. I would be grateful if you could take two minutes to explain or point me to a link.

    Thanks for all your help

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by Symphonie
    I still haven't understood how to take the event handlers out of my original xhtml file and put them into the javascript file. I would be grateful if you could take two minutes to explain or point me to a link.
    This really basic DOM scripting and self explanatory. This should help: http://developer.mozilla.org/en/docs...dEventListener

  9. #9
    Join Date
    Apr 2008
    Posts
    9
    Thanks for the link Fang,

    I had a very quick look and it seems fairly straight forward so I'll spend some more time studying.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles