SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Indy
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show/hide layer problem

    I'm designing a site that implements rollovers with show/hide layer functions. I trigger the functions using a mouseover event on an image. The only part of the code that I can't get to work is the show/hide layer command. Here's my code...

    This is the html that calls the function, I have no problem with this.
    HTML Code:
    <a href="home.php"
       onmouseover = "swap('nav_home', 'images/home_on.gif','homeMenu'); 
                              return true;"
       onmouseout = "replace  
                            ('nav_home', 'images/home_off.gif','homeMenu'); 
                            return true;">
        <img name="nav_home" 
               src="images/home_off.gif" 
               border="0" 
               class = "nav">
    </a>
    These are the rollover functions. I don't have a problem with these either.
    HTML Code:
    function swap() { 
      if (document.images && (preloaded == true)) { 
        for (var i=0; i<swap.arguments.length; i+=3) {
    	document[swap.arguments[i]].src = swap.arguments[i+1];
                 show(swap.arguments[i+2]);
        }  //end for
      }  //end if
    }  //end swap()
    
    function replace() { 
      if (document.images && (preloaded == true)) { 
        for (var i=0; i<replace.arguments.length; i+=3) {
    	document[replace.arguments[i]].src = replace.arguments[i+1];
                 delayHide(replace.arguments[i+2]);
        }  //end for
      }  //end if
    }  //end function
    This is the show/hide functions. This is where the problem occurs.
    HTML Code:
          function show() {
     
             clearTimeout(timer);
             [show.arguments].style.visibility = "visible";
             
          } //end function
    
          function delayHide() {
    
             timer = setTimeout('hide()', 1500);
    
          } //end function
    
          function hide() {
    
             [hide.arguments].style.visibility = "hidden";
    
          } //end function
    The error occurs with the [show.arguments].style.visibility. I keep getting an error message stating 'style is null or not an object'. Any ideas?

    Thanks in advance!

  2. #2
    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)
    If the IMG elements had the same ID as NAME, then...
    Code:
    function show(id) {
    
    if (timer) clearTimeout(timer);
    var ele = document.getElementById(id);
    if (ele && ele.style) ele.style.visibility = "visible";
    
    }

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For starters, Function.arguments has been deprecated for years now; you should refer to the Arguments[] array as simply arguments, a function-scope variable.

    You're passing something called 'homeMenu' as arguments[2], and then passing it on to here:
    Code:
    [show.arguments].style.visibility = "visible";
    So...you're passing an array - into square brackets? That's two errors in one. If that's an element id, go:
    Code:
    function show(el_id) {
     
             clearTimeout(timer);
             document.getElementById(el_id).style.visibility = "visible";
             
          } //end function
    ::: certified wild guess :::

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Indy
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just modified my code to include that, but now it states "id is undefined".

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We can't see your code.
    ::: certified wild guess :::

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Indy
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all of the working javascript has not been tampered with. this is the show/hide layer functions that I have modified.

    HTML Code:
          var timer;
    
          function delayHide(id) {
             var ele = document.getElementById(id);
             timer = setTimeout('hide()', 1500);
    
          } //end function
    
    
          function hide(id) {
    
             var ele = document.getElementById(id); alert(ele);
             if (ele && ele.style) {
               ele.style.visibility = "hidden";
             } //end if
    
          } //end function
    
          
          function show(id) {
     
             clearTimeout(timer);
             var ele = document.getElementById(id);
             if (ele && ele.style) {
               ele.style.visibility = "visible";
             } //end if
          } //end function
    I keep getting the "id is undefined". The code works for the show layer function, but the hide layer function doesn't work. I think it's because I lose the id in the delayHide function instead of passing it on to the hide function.

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're not 'losing the id', you're not even passing it:
    Code:
    function delayHide(id) {
             var ele = document.getElementById(id);
             timer = setTimeout('hide(?)', 1500);
    Try:
    Code:
    function delayHide(id) {
             var ele = document.getElementById(id);
             timer = setTimeout('hide("' + id + '")', 1500);
    
          } //end function
    You're passing a string to setTimeout(), so you need to 'insert' the id (string); note the double quotes, needed when the timer actually runs the code, to identify it as a string (and not a variable name).

    http://hotwired.lycos.com/webmonkey/...tw=programming
    ::: certified wild guess :::

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Indy
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! That helped a lot! Thanks guys!

  9. #9
    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)


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
  •