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?
Jay
-
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?
Jay
-
Re: problem with layers
Jay wrote:[color=blue]
> 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?
>
> Jay
>
>[/color]
Not srue, but perhaps try
instead of ".style.overflo w='hidden'"
try ".display='none '" (vs 'block')
--
e michael brandt
michael at valleywebdesign s.com
www.valleywebdesigns.com ::: home of justso picturewindow & photoalbum
--
-
Re: problem with layers
Jay wrote:[color=blue]
> 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.displa y = 'none'
to hide the links, and ...style.displa y ='' 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.getEle mentById('links ');
var ul = base.getElement sByTagName('ul' );
var i = ul.length;
while (i--){
ul[i].style.display = 'none';
}
// Add onclick to spans
var sp = base.getElement sByTagName('spa n');
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.getE lementById(x);
x.style.display = (x.style.displa y == '')? 'none':'';
}
window.onload = initLinks;
</script>
<div id="links">
<img align="absmiddl e" hspace="5" src="images/expandIssues.gi f">
<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="absmiddl e" hspace="5" src="images/expandIssues.gi f">
<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="absmiddl e" hspace="5" src="images/expandIssues.gi f">
<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>
Comment
-
Re: problem with layers
cool
--
e michael brandt
michael at valleywebdesign s.com
www.valleywebdesigns.com ::: home of justso picturewindow & photoalbum
--
Jay wrote:[color=blue]
> 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?
>
> Jay
>
>[/color]
cool
--
e michael brandt
michael at valleywebdesign s.com
www.valleywebdesigns.com ::: home of justso picturewindow & photoalbum
--
Comment
-
Re: problem with layers
"RobG" <rgqld@iinet.ne t.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.displa y = 'none'
>
> to hide the links, and ...style.displa y ='' 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.getEle mentById('links ');
> var ul = base.getElement sByTagName('ul' );
> var i = ul.length;
> while (i--){
> ul[i].style.display = 'none';
> }
> // Add onclick to spans
> var sp = base.getElement sByTagName('spa n');
> 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.getE lementById(x);
> x.style.display = (x.style.displa y == '')? 'none':'';
> }
> window.onload = initLinks;
> </script>
>
> <div id="links">
> <img align="absmiddl e" hspace="5" src="images/expandIssues.gi f">
> <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="absmiddl e" hspace="5" src="images/expandIssues.gi f">
> <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="absmiddl e" hspace="5" src="images/expandIssues.gi f">
> <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]
Comment
Comment