"RobG" <rgqld@iinet.net.auau> wrote in message
news:42749b5b$0$23644$5a62ac22@per-qv1-newsreader-01.iinet.net.au...[color=blue]
> Jay wrote:[color=green]
>>
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?
>>[/color]
>
> 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,[/color]
I've used your suggesting below and it works perfectly!
(still on the Dev box at the moment)
Many thanks
Jay
[color=blue]
> <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>[/color]
