Pulling my hair out

B

Barney Rubble

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>
 
G

GArlington

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>
Click to expand...
<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>
Click to expand...
</ul>
</body>
Click to expand...

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...
 
M

marss

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?
Click to expand...

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Buttons lining up 1
Need help with code on website (noob) 2
Survey details won't go through using php, ajax, Mysql 0
Only one table shows up with the information 2
I need help fixing my website 2
Javascript scroll to sections and also scroll to section but open relevant nav-tab 4
Horizontal menu bar header 2

Members online

Total: 35 (members: 2, guests: 33)
Robots: 457

Forum statistics

Threads
473,767
Messages
2,569,573
Members
45,046
Latest member
Gavizuho

Latest Threads

Top