Pulling my hair out

Discussion in 'Javascript' started by Barney Rubble, Jun 17, 2008.

  1. help please......

    I have the following script. I would like to remove the images (plus.png
    and minus.png).

    I have removed the code: <img id="pm1" src="" alt=""> where it appears, but
    each time I do, the menu no longer expands. I have tried removing various
    elements in the <script> areas, but nothing works for me. Any ideas please?

    Thanks,

    Abe



    Here is the page, with script:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <title>Example Menu</title>
    <script>
    var myvar;
    function menuinit() {
    document.getElementById('m1').style.display = 'none';
    document.getElementById('m2').style.display = 'none';
    document.getElementById('m3').style.display = 'none';
    document.getElementById('pm1').src = 'plus.png';
    document.getElementById('pm2').src = 'plus.png';
    document.getElementById('pm3').src = 'plus.png';
    }
    function menuexpand (i) {
    menuinit();
    if (myvar == i) {
    document.getElementById('p' + i).src = 'plus.png';
    document.getElementById(i).style.display = 'none';
    myvar = '';
    }
    else {
    document.getElementById('p' + i).src = 'minus.png';
    document.getElementById(i).style.display = 'block';
    myvar = i;
    }
    }
    </script>
    <style>
    #nav {
    width: 10em;
    }
    #nav, #nav ul, #nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #nav a {
    display: block;
    height: 1.2em;
    width: 100%;
    padding: 0.25em;
    text-decoration: none;
    }
    #nav a.span {
    color: white;
    background-color: #008;
    position: relative;
    }
    #nav a.span:hover {
    color: black;
    background-color: #CCF;
    }
    #nav a.span img {
    position: absolute;
    top: 2px;
    right: 2px;
    border: 0;
    }
    #nav li {
    border: thin solid white;
    clear: both;
    }
    #nav li ul li {
    font-size: 85%;
    border: none;
    }
    #nav li ul li a {
    color: white;
    background-color: #00C;
    }
    #nav li ul li a:hover {
    color: black;
    background-color: #CCF;
    }
    </style>
    <body onload="menuinit();">
    <ul id="nav">
    <li>
    <a href="#" class="span"
    onclick="menuexpand('m1');return false;">Menu 1<img id="pm1" src=""
    alt=""></a>
    <ul id="m1">

    <li><a href="#">Item 1a</a></li>
    <li><a href="#">Item 1b</a></li>
    <li><a href="#">Item 1c</a></li>
    <li><a href="#">Item 1d</a></li>
    </ul>
    </li>
    <li>

    <a href="#" class="span"
    onclick="menuexpand('m2');return false;">Menu 2<img id="pm2" src=""
    alt=""></a>
    <ul id="m2">
    <li><a href="#">Item 2a</a></li>
    <li><a href="#">Item 2b</a></li>
    <li><a href="#">Item 2c</a></li>
    <li><a href="#">Item 2d</a></li>

    </ul>
    </li>
    <li>
    <a href="#" class="span"
    onclick="menuexpand('m3');return false;">Menu 3<img id="pm3" src=""
    alt=""></a>
    <ul id="m3">
    <li><a href="#">Item 3a</a></li>
    <li><a href="#">Item 3b</a></li>

    <li><a href="#">Item 3c</a></li>
    <li><a href="#">Item 3d</a></li>
    </ul>
    </li>
    </ul>
    </body>
    Barney Rubble, Jun 17, 2008
    #1
    1. Advertising

  2. Barney Rubble

    GArlington Guest

    On Jun 17, 10:38 pm, "Barney Rubble" <> wrote:
    > help please......
    >
    > I have the following script. I would like to remove the images (plus.png
    > and minus.png).
    >
    > I have removed the code: <img id="pm1" src="" alt=""> where it appears, but
    > each time I do, the menu no longer expands. I have tried removing various
    > elements in the <script> areas, but nothing works for me. Any ideas please?
    >
    > Thanks,
    >
    > Abe
    >
    > Here is the page, with script:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <title>Example Menu</title>
    > <script>
    > var myvar;
    > function menuinit() {
    > document.getElementById('m1').style.display = 'none';
    > document.getElementById('m2').style.display = 'none';
    > document.getElementById('m3').style.display = 'none';
    > document.getElementById('pm1').src = 'plus.png';
    > document.getElementById('pm2').src = 'plus.png';
    > document.getElementById('pm3').src = 'plus.png';}
    >
    > function menuexpand (i) {
    > menuinit();
    > if (myvar == i) {
    > document.getElementById('p' + i).src = 'plus.png';
    > document.getElementById(i).style.display = 'none';
    > myvar = '';
    > }
    > else {
    > document.getElementById('p' + i).src = 'minus.png';
    > document.getElementById(i).style.display = 'block';
    > myvar = i;
    > }}
    >
    > </script>

    <snap>
    > <body onload="menuinit();">
    > <ul id="nav">
    > <li>
    > <a href="#" class="span"
    > onclick="menuexpand('m1');return false;">Menu 1<img id="pm1" src=""
    > alt=""></a>
    > <ul id="m1">
    >
    > <li><a href="#">Item 1a</a></li>
    > <li><a href="#">Item 1b</a></li>
    > <li><a href="#">Item 1c</a></li>
    > <li><a href="#">Item 1d</a></li>
    > </ul>
    > </li>

    <snap>
    > </ul>
    > </body>


    You should consider learning javascript...
    And note: when your page runs with javascript errors it stops at the
    first error and DOES NOT run the script any further...
    IF you understand that you will understand why removing the item
    referenced in your javascript will stop this script from running...
    GArlington, Jun 18, 2008
    #2
    1. Advertising

  3. Barney Rubble

    marss Guest

    On Jun 18, 12:38 am, "Barney Rubble" <> wrote:

    > I have removed the code: <img id="pm1" src="" alt=""> where it appears, but
    > each time I do, the menu no longer expands. I have tried removing various
    > elements in the <script> areas, but nothing works for me. Any ideas please?
    >


    Remove following lines:

    document.getElementById('pm1').src = 'plus.png';
    document.getElementById('pm2').src = 'plus.png';
    document.getElementById('pm3').src = 'plus.png';
    ....
    document.getElementById('p' + i).src = 'plus.png';
    ....
    document.getElementById('p' + i).src = 'minus.png';

    Mykola
    http://marss.co.ua
    marss, Jun 18, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    9
    Views:
    441
    Toby A Inkster
    Jul 16, 2003
  2. Richard
    Replies:
    6
    Views:
    324
    Richard
    Nov 15, 2003
  3. Mr. Politics

    Pulling my hair out..

    Mr. Politics, Feb 12, 2007, in forum: C++
    Replies:
    9
    Views:
    446
  4. Sam Roberts
    Replies:
    16
    Views:
    360
    Daniel Berger
    Feb 18, 2005
  5. James Edward Gray II

    Pulling My Hair Out With WEBrick!

    James Edward Gray II, Jun 5, 2005, in forum: Ruby
    Replies:
    0
    Views:
    88
    James Edward Gray II
    Jun 5, 2005
Loading...

Share This Page