SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Javascript...

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2001
    Location
    London
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello.

    I hope this is a simple problem and I'm just not seeing it...

    I am doing a layer hide/show but I want to toggle the layer off/on as a method, ie in the event handler I call "thisObject.toggle()". It works great in IE5 and Netscape6 but not the level 4 browsers. The error message is that thisObject.toggle is not a function.

    I initialise all the objects 'onLoad' and at this point all the objects properties are fine BUT once I try to access any object properties from an event handler they are undefined. The same code works in IE5 and Netscape6.

    Any ideas???

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2001
    Location
    D¨n ╔ideann, Alba
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First question: r u using the correct DOM to address the layers?

    Since it is working in IE5 and NS6, but not the others, I have to assume u r using the W3C-DOM and nothing else. If u create a complete cross browser script, that is taking into account old proprietory object models, then it should work.

    What's your code, then we can help a little?

  3. #3
    SitePoint Member
    Join Date
    Mar 2001
    Location
    London
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. The problem's not in addressing the layers, I can hide/show if I my toggle function isn't an object method.

    I'll include the code I think is relevant. The problem seems to be in the way I've constructed the objects, like, I can't call the methods or grab properties. The error in the javascript panel reads "menu1.toggle is not a function"

    function getStyle(name){ //returns the style object for each major DOM
    if (document.getElementById) return document.getElementById(name).style;
    else if (document.all) return document.all[name].style;
    else if (document.layers) return document.layers[name];
    }

    function menuObject(name,level){
    this.css=getStyle(name);
    this.level=level;
    this.hide=hide;
    this.show=show;
    this.open=false;
    this.toggle=toggle;
    return this;
    }

    function toggle(){ //closes all at lower levels and toggles this on/off
    if (this.open) { this.hide();
    for (i=tracker.length-1;i>=this.level-1;i--){
    if (tracker[i]) tracker[i].hide();}
    }
    else{for (i=tracker.length-1;i>=this.level-1;i--){
    if (tracker[i]) tracker[i].hide();}
    this.show();
    }
    tracker[this.level-1]=this;
    }

    function show(){
    var hidden=(document.layers)?'hide':'hidden';
    var visible=(document.layers)?'show':'visible';
    this.css.visibility=visible;
    this.open=true;
    }

    function hide(){
    var hidden=(document.layers)?'hide':'hidden';
    var visible=(document.layers)?'show':'visible';
    this.css.visibility=hidden;
    this.open=false;
    }

    function init(){
    menu1=new menuObject('menu1',1);
    menu2=new menuObject('menu2',1);
    //etc...
    }

    var menu1, menu2, menu3, menu1_1, menu1_2, menu1_3; //these are my global menu handles

    </script>
    </head>
    <body onload="init();">

    <!--------MY EVENT HANDLER IS HERE------->
    <div id="menubar">
    <a href="#" onclick="menu1.toggle()">menu one</a>
    </div>

    <!------THIS IS THE LAYER I'M TRYING TO TOGGLE----------->
    <div id="menu1" class="menuClass">
    <center><b>MENU ONE</b><hr></center>
    <a href="#" onclick="menu1_1.toggle()">One Menu 1</a>
    </div>

    Thanks


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
  •