SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layers, Divs Javascript, why won't all work?? Please Help!

    Hello All,

    I have a problem with a script I am (trying) to use on a new website -

    The script is supposed to expand a menu when a Link is clicked on...

    - Fourums (XMB)
    - 4webmasters (PHP, MySQL etc)
    - Games (Ours, yours, Hig scores, news etc)
    - Music (downloads, news, links etc)
    - Misc (general stuff)

    should become

    - Fourums (XMB)
    - 4webmasters (PHP, MySQL etc)

    - PHP Coding
    - MySQL Coding
    - Putting PHP and MySQL together
    - The Forum on this topic
    - Misc (etc)

    - Games (Ours, yours, Hig scores, news etc)
    - Music (downloads, news, links etc)
    - Misc (general stuff)

    When the 4webmasters link is clicked for example

    but guess what it doesn't. I don't get any error messages of any kind and the other javascripts work (I.e. I have written one that will change the text in a read-only text box according to an OnMouseOver in a link) just fine. Just this script.

    I must admit I am ok at PHP and MySQL but when it comes to Javascript, I am... errr.... well not very good. The script is out of the free scripts section on webmonkey.

    The script and the code that runs it is below, and if someone could have a look and suggest any reasons why it won't work please let me know.

    <html>
    <title>A Page...</title>

    <script language="javascript" type="text/javascript">
    <!--

    function WM_checkIn(id) {

    /*
    WM_checkIn()
    Takes the ID of a positioned HTML element and returns an object reference.

    Usage: WM_checkIn('id')
    */

    // This function checks for DOM strategy, then
    // returns an object reference.
    if (document.all) {
    return document.all[id].style;
    } else if(document.layers) {
    return document.layers[id];
    }
    }

    /*
    WM_changeVisibility()
    Changes whether a layer is visible or hidden.

    usage: WM_changeVisibility('targetLayer1',[visible|hidden|toggle],'targetLayer2',[visible|hidden|toggle],...,'targetLayerN',[visible|hidden|toggle])
    */

    // set hidden/visible vars for Netscape 4 compatibility
    if (document.layers) {
    var hidden = "hide";
    var visible = "show";
    } else {
    var hidden = "hidden";
    var visible = "visible";
    }
    var toggle = "toggle";

    function WM_changeVisibility() {
    if (document.layers || document.all) {
    var inc, endInc=arguments.length;
    // run through the args (objects) and set the visibility of each
    for (inc=0; inc<endInc; inc+=2) {
    // get a good object reference
    var daObj = WM_checkIn(arguments[inc]);
    if (arguments[inc+1] == hidden) {
    // hide the object
    daObj.visibility = hidden;
    } else if (arguments[inc+1] == visible) {
    // show the object
    daObj.visibility = visible;
    } else if (arguments[inc+1] == toggle) {
    // toggle the object's visibility
    if (daObj.visibility == visible) {
    daObj.visibility = hidden;
    } else if (daObj.visibility == hidden) {
    daObj.visibility = visible;
    }
    }
    }
    }
    }


    // -->
    </script>
    </head>

    <body bgcolor="#ffffff">
    :: The first bit of the body (tables and the like ::

    <!-- Start The expandy menu -->
    <!-- Expandable Menus -->
    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td align="left">
    <!-- Forums -->
    <div class="top">
    <img src="_img/folder_closed.gif" width="20" height="19" align="absmiddle" alt="[Folder Image]" /><a href="_misc.php?exe=forums" class="top" onclick="desc('Please Wait...'); window.status='Please Wait...';return true" onmouseover="desc('Visit the Forums (Online Help, Chat etc) [5*]'); window.status='Visit ++ The Forums ++';return true" onmouseout="desc('<?php echo($linkmsg); ?>')">Forums</a><br />
    </div>
    <!-- /Forums -->

    <!-- Expand One :: members area -->
    <div id="members" style="display: block" class="top">
    <img src="_img/folder_closed.gif" width="20" height="19" align="absmiddle" alt="[Folder Image]" /><a href="javascript:WM_changeVisibility('memberscnt', 'visible');" class="top" onclick="desc('Please Wait...'); window.status='Please Wait...';return true" onmouseover="desc('Members - Join or up just get more info...'); window.status='Visit ++ the Members Area ++';return true" onmouseout="desc('<?php echo($linkmsg); ?>')">Members</a>
    </div>
    <div id="memberscnt" style="display: none" class="links">
    <a href="/webmonkey/authoring/html_basics/" class="sublinks"> HTML Basics</a><br>
    <a href="/webmonkey/authoring/tables/" class="sublinks">Tables</a><br>
    <a href="/webmonkey/authoring/frames/" class="sublinks">Frames</a><br>
    <a href="/webmonkey/authoring/browsers/" class="sublinks">Browsers</a><br>
    <a href="/webmonkey/authoring/tools/" class="sublinks">Tools</a><br>
    <a href="/webmonkey/authoring/stylesheets/" class="sublinks">Stylesheets</a><br>
    <a href="/webmonkey/authoring/dynamic_html/" class="sublinks">DHTML</a><br>
    <a href="/webmonkey/authoring/xml/" class="sublinks">XML</a>
    </div>
    <!-- /Expand One :: members area -->

    <!-- Expand two :: 4webmasters -->
    <div id="members" style="display: block" class="top">
    <img src="_img/folder_closed.gif" width="20" height="19" align="absmiddle" alt="[Folder Image]" /><a href="javascript:WM_changeVisibility('4webmasterscnt', 'visible');" class="top" onclick="desc('Please Wait...'); window.status='Please Wait...';return true" onmouseover="desc('The 4 Webmasters Area - PHP, Server side & client side, html (the lot)!'); window.status='++ 4webmasters ++';return true" onmouseout="desc('<?php echo($linkmsg); ?>')">4Webmasters</a>
    </div>
    <div id="4webmasterscnt" style="display: none" class="links">
    <a href="/webmonkey/authoring/html_basics/" class="sublinks"> HTML Basics</a><br>
    <a href="/webmonkey/authoring/tables/" class="sublinks">Tables</a><br>
    <a href="/webmonkey/authoring/frames/" class="sublinks">Frames</a><br>
    <a href="/webmonkey/authoring/browsers/" class="sublinks">Browsers</a><br>
    <a href="/webmonkey/authoring/tools/" class="sublinks">Tools</a><br>
    <a href="/webmonkey/authoring/stylesheets/" class="sublinks">Stylesheets</a><br>
    <a href="/webmonkey/authoring/dynamic_html/" class="sublinks">DHTML</a><br>
    <a href="/webmonkey/authoring/xml/" class="sublinks">XML</a>
    </div>
    <!-- /Expand two :: 4webmasters -->

    <!-- Expand Three :: games area -->
    <div id="members" style="display: block" class="top">
    <img src="_img/folder_closed.gif" width="20" height="19" align="absmiddle" alt="[Folder Image]" /><a href="javascript:WM_changeVisibility('gamescnt', 'visible');" class="top" onclick="desc('Please Wait...'); window.status='Please Wait...';return true" onmouseover="desc('Games - Our Games, your Games, Reviews ++ PS2, x-box, dreamcast & news etc ++'); window.status='++ Games ++';return true" onmouseout="desc('$linkmsg')">Games</a>
    </div>
    <div id="gamescnt" style="display: none" class="links">
    <a href="/webmonkey/authoring/html_basics/" class="sublinks"> HTML Basics</a><br>
    <a href="/webmonkey/authoring/tables/" class="sublinks">Tables</a><br>
    <a href="/webmonkey/authoring/frames/" class="sublinks">Frames</a><br>
    <a href="/webmonkey/authoring/browsers/" class="sublinks">Browsers</a><br>
    <a href="/webmonkey/authoring/tools/" class="sublinks">Tools</a><br>
    <a href="/webmonkey/authoring/stylesheets/" class="sublinks">Stylesheets</a><br>
    <a href="/webmonkey/authoring/dynamic_html/" class="sublinks">DHTML</a><br>
    <a href="/webmonkey/authoring/xml/" class="sublinks">XML</a>
    </div>
    <!-- /Expand Three :: games area -->

    <!-- Expand Four :: music area -->
    <div id="members" style="display: block" class="top">
    <img src="_img/folder_closed.gif" width="20" height="19" align="absmiddle" alt="[Folder Image]" /><a href="javascript:WM_changeVisibility('musiccnt', 'visible');" class="top" onclick="desc('Please Wait...'); window.status='Please Wait...';return true" onmouseover="desc('Music - Rock Music, Pop Music, Music news - what more is there to say!'); window.status='++ Music ++';return true" onmouseout="desc('<?php echo($linkmsg); ?>')">Music</a>
    </div>
    <div id="musiccnt" style="display: none" class="links">
    <a href="/webmonkey/authoring/html_basics/" class="sublinks"> HTML Basics</a><br>
    <a href="/webmonkey/authoring/tables/" class="sublinks">Tables</a><br>
    <a href="/webmonkey/authoring/frames/" class="sublinks">Frames</a><br>
    <a href="/webmonkey/authoring/browsers/" class="sublinks">Browsers</a><br>
    <a href="/webmonkey/authoring/tools/" class="sublinks">Tools</a><br>
    <a href="/webmonkey/authoring/stylesheets/" class="sublinks">Stylesheets</a><br>
    <a href="/webmonkey/authoring/dynamic_html/" class="sublinks">DHTML</a><br>
    <a href="/webmonkey/authoring/xml/" class="sublinks">XML</a>
    </div>
    <!-- /Expand Four :: music area -->

    <!-- /Expandable Menus -->

    </body>
    </html>

    And thats all there is to it folks!

    I should point out that the links with in the various sections are from Webmonkey. I got the idea afer having a look around thier site, and then read an article on it somewhere.

    If you need to see the whole page's code please let me know, but you'll have to put up with all my php coding etc because I am far to lazy to remove it! Sorry!

    If anyone could please help, PLEASE PLEASE let me know asap!

    I also think that Site Point should look at getting things like a color code chart and a browser compatibility page and sample javascripts.

    The only reason I ever visit WebMonkey these days is to look at the features like the Browser Chart and Color Code chart! You'd sure get a few more clicks from me now and again!

    Anway Thanks everyone in advance
    Rick
    richardpboyce@aol.com
    Last edited by rboycey; Dec 3, 2001 at 12:52.
    RBoycey

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Update!

    Ok, I have now worked out what my problem was;

    The Javascript was set to change the value of the Visibility Value in the Style Tag of the Div tag. However I didn't use this because when the Div is set to hidden it is hidden but there is a large gap, where the links are just hidden.

    Now I know I can aviod this by using display: none in the style tag of div. BUT the script won't change this and so i need help in changing the script so that it will 'toggle' this tag instead of the other (visibility)

    Please Help.

    <!--

    /*
    WM_changeVisibility()
    Changes whether a layer is visible or hidden.

    usage: WM_changeVisibility('targetLayer1',[visible|hidden|toggle],'targetLayer2',[visible|hidden|toggle],...,'targetLayerN',[visible|hidden|toggle])
    */

    // set hidden/visible vars for Netscape 4 compatibility
    if (document.layers) {
    var hidden = "hide";
    var visible = "show";
    } else {
    var hidden = "hidden";
    var visible = "visible";
    }
    var toggle = "toggle";

    function WM_changeVisibility() {
    if (document.layers || document.all) {
    var inc, endInc=arguments.length;
    // run through the args (objects) and set the visibility of each
    for (inc=0; inc<endInc; inc+=2) {
    // get a good object reference
    var daObj = WM_checkIn(arguments[inc]);
    if (arguments[inc+1] == hidden) {
    // hide the object
    daObj.visibility = hidden;
    } else if (arguments[inc+1] == visible) {
    // show the object
    daObj.visibility = visible;
    } else if (arguments[inc+1] == toggle) {
    // toggle the object's visibility
    if (daObj.visibility == visible) {
    daObj.visibility = hidden;
    } else if (daObj.visibility == hidden) {
    daObj.visibility = visible;
    }
    }
    }
    }
    }


    // -->

    Many Thanks
    Rick
    Richardpboyce@aol.com
    RBoycey

  3. #3
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    glad I could be of assistance!

    Sketch
    Aaron Brazell
    Technosailor




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
  •