problem with layers

R

RobG

Jay said:
http://www.wanganui.govt.nz/news/commsLink/index.asp

When viewed with Firefox.
The show/hide function doesn't work as expected (evident when viewed).
Anyone know why? Which bit is FF not liking and how can it be altered to be
cross browser friendly?

It is better to have the hidden <li> elements shown by default and
use JavaScript to hide them when the page loads. That way you don't
need a separate link for non-JavaScript browsers.

At the same time, you could assign the onclick function to each li,
saving some code.

The easy (for you) fix is to use:

...style.display = 'none'

to hide the links, and ...style.display ='' to show them again.

Another tip is to use one function to toggle between show and hide,
rather than have a separate link to do it. I've created a
dependency between the <span> and the ULs that are hidden based on
the id.

A re-write of a snipped below to show how to do some of the above,

<script type="text/javascript">
function initLinks(){
// Hide all the ULs
var base = document.getElementById('links');
var ul = base.getElementsByTagName('ul');
var i = ul.length;
while (i--){
ul.style.display = 'none';
}
// Add onclick to spans
var sp = base.getElementsByTagName('span');
i = sp.length;
while (i--) {
if ( sp.className && 'greyBack' == sp.className ) {
sp.onclick = function() {showLinks(this)};
}
}
}
function showLinks(x){
x = x.id.split('-')[1];
x=document.getElementById(x);
x.style.display = (x.style.display == '')? 'none':'';
}
window.onload = initLinks;
</script>

<div id="links">
<img align="absmiddle" hspace="5" src="images/expandIssues.gif">
<span id="s-191TO200" class="greyBack">Issues 191-200 </span>
<br>
<ul id="191TO200">
<li><a href="issue200.asp" >Issue #200</a> 2nd April 2005</li>
<li><a href="issue199.asp" >Issue #199</a> 26th March 2005</li>
<li><a href="issue191.asp" >Issue #191</a> 29th January 2005</li>
</ul>
<img align="absmiddle" hspace="5" src="images/expandIssues.gif">
<span id="s-181TO190" class="greyBack">Issues 181-190 </span>
<br>
<ul id="181TO190">
<li><a href="issue190.asp" >Issue #190</a> 2nd April 2005</li>
<li><a href="issue189.asp" >Issue #189</a> 26th March 2005</li>
<li><a href="issue181.asp" >Issue #181</a> 29th January 2005</li>
</ul>
<img align="absmiddle" hspace="5" src="images/expandIssues.gif">
<span id="s-171TO180" class="greyBack">Issues 171-180 </span>
<br>
<ul id="171TO180">
<li><a href="issue180.asp" >Issue #180</a> 2nd April 2005</li>
<li><a href="issue179.asp" >Issue #179</a> 26th March 2005</li>
<li><a href="issue171.asp" >Issue #171</a> 29th January 2005</li>
</ul>
</div>
 
J

Jay

RobG said:
It is better to have the hidden <li> elements shown by default and
use JavaScript to hide them when the page loads. That way you don't
need a separate link for non-JavaScript browsers.

At the same time, you could assign the onclick function to each li,
saving some code.

The easy (for you) fix is to use:

...style.display = 'none'

to hide the links, and ...style.display ='' to show them again.

Another tip is to use one function to toggle between show and hide,
rather than have a separate link to do it. I've created a
dependency between the <span> and the ULs that are hidden based on
the id.

A re-write of a snipped below to show how to do some of the above,

I've used your suggesting below and it works perfectly!
(still on the Dev box at the moment)

Many thanks

Jay

<script type="text/javascript">
function initLinks(){
// Hide all the ULs
var base = document.getElementById('links');
var ul = base.getElementsByTagName('ul');
var i = ul.length;
while (i--){
ul.style.display = 'none';
}
// Add onclick to spans
var sp = base.getElementsByTagName('span');
i = sp.length;
while (i--) {
if ( sp.className && 'greyBack' == sp.className ) {
sp.onclick = function() {showLinks(this)};
}
}
}
function showLinks(x){
x = x.id.split('-')[1];
x=document.getElementById(x);
x.style.display = (x.style.display == '')? 'none':'';
}
window.onload = initLinks;
</script>

<div id="links">
<img align="absmiddle" hspace="5" src="images/expandIssues.gif">
<span id="s-191TO200" class="greyBack">Issues 191-200 </span>
<br>
<ul id="191TO200">
<li><a href="issue200.asp" >Issue #200</a> 2nd April 2005</li>
<li><a href="issue199.asp" >Issue #199</a> 26th March 2005</li>
<li><a href="issue191.asp" >Issue #191</a> 29th January 2005</li>
</ul>
<img align="absmiddle" hspace="5" src="images/expandIssues.gif">
<span id="s-181TO190" class="greyBack">Issues 181-190 </span>
<br>
<ul id="181TO190">
<li><a href="issue190.asp" >Issue #190</a> 2nd April 2005</li>
<li><a href="issue189.asp" >Issue #189</a> 26th March 2005</li>
<li><a href="issue181.asp" >Issue #181</a> 29th January 2005</li>
</ul>
<img align="absmiddle" hspace="5" src="images/expandIssues.gif">
<span id="s-171TO180" class="greyBack">Issues 171-180 </span>
<br>
<ul id="171TO180">
<li><a href="issue180.asp" >Issue #180</a> 2nd April 2005</li>
<li><a href="issue179.asp" >Issue #179</a> 26th March 2005</li>
<li><a href="issue171.asp" >Issue #171</a> 29th January 2005</li>
</ul>
</div>
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top