Jay wrote:
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[i].style.display = 'none';
}
// Add onclick to spans
var sp = base.getElementsByTagName('span');
i = sp.length;
while (i--) {
if ( sp[i].className && 'greyBack' == sp[i].className ) {
sp[i].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>
