Pulling my hair out

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Barney Rubble

    Pulling my hair out

    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 <scriptareas, 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>Exampl e Menu</title>
    <script>
    var myvar;
    function menuinit() {
    document.getEle mentById('m1'). style.display = 'none';
    document.getEle mentById('m2'). style.display = 'none';
    document.getEle mentById('m3'). style.display = 'none';
    document.getEle mentById('pm1') .src = 'plus.png';
    document.getEle mentById('pm2') .src = 'plus.png';
    document.getEle mentById('pm3') .src = 'plus.png';
    }
    function menuexpand (i) {
    menuinit();
    if (myvar == i) {
    document.getEle mentById('p' + i).src = 'plus.png';
    document.getEle mentById(i).sty le.display = 'none';
    myvar = '';
    }
    else {
    document.getEle mentById('p' + i).src = 'minus.png';
    document.getEle mentById(i).sty le.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="menuini t();">
    <ul id="nav">
    <li>
    <a href="#" class="span"
    onclick="menuex pand('m1');retu rn 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="menuex pand('m2');retu rn 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="menuex pand('m3');retu rn 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>



  • GArlington

    #2
    Re: Pulling my hair out

    On Jun 17, 10:38 pm, "Barney Rubble" <abu...@hotmail .comwrote:
    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 <scriptareas, 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>Exampl e Menu</title>
    <script>
    var myvar;
    function menuinit() {
    document.getEle mentById('m1'). style.display = 'none';
    document.getEle mentById('m2'). style.display = 'none';
    document.getEle mentById('m3'). style.display = 'none';
    document.getEle mentById('pm1') .src = 'plus.png';
    document.getEle mentById('pm2') .src = 'plus.png';
    document.getEle mentById('pm3') .src = 'plus.png';}
    >
    function menuexpand (i) {
    menuinit();
    if (myvar == i) {
    document.getEle mentById('p' + i).src = 'plus.png';
    document.getEle mentById(i).sty le.display = 'none';
    myvar = '';
    }
    else {
    document.getEle mentById('p' + i).src = 'minus.png';
    document.getEle mentById(i).sty le.display = 'block';
    myvar = i;
    }}
    >
    </script>
    <snap>
    <body onload="menuini t();">
    <ul id="nav">
    <li>
    <a href="#" class="span"
    onclick="menuex pand('m1');retu rn 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...

    Comment

    • marss

      #3
      Re: Pulling my hair out

      On Jun 18, 12:38 am, "Barney Rubble" <abu...@hotmail .comwrote:
      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 <scriptareas, but nothing works for me. Any ideas please?
      >
      Remove following lines:

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

      Mykola

      Comment

      Working...