473,556 Members | 2,539 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

problem with layers

Jay
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
Jul 23 '05 #1
4 1244
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?

Jay

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

--
Jul 23 '05 #2
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.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>
Jul 23 '05 #3
cool

--

e michael brandt
michael at valleywebdesign s.com
www.valleywebdesigns.com ::: home of justso picturewindow & photoalbum

--

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?

Jay

cool

--

e michael brandt
michael at valleywebdesign s.com
www.valleywebdesigns.com ::: home of justso picturewindow & photoalbum

--
Jul 23 '05 #4
Jay

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:42******** *************** @per-qv1-newsreader-01.iinet.net.au ...
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.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,


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

Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2802
by: Lizzy | last post by:
I have an internet application which has a progress bar show whenever the customer is requesting data from the server. This progress bar is coded to work in both Netscape 4.75 and above and IE 5.0 and above. The progress bar code is written in javascript in an external js file (progressbar.js). The web screen is in a seperate jsp file...
4
4739
by: Federico Bari | last post by:
Good morning all from italy, i have probably a compatibility problem with a html/javascript page. The aim of the code of the file test.htm you find here following (copy the 3 files in the same directory) is to change the content of a layer, created with the <div...> tag, with an external text (clicking over an hiperlink) or with the...
8
11090
by: Freek te Water | last post by:
Hi, Hope no-one is offended by my probably noob question... Context: I have a web page design, which always centres in the middle of the screen (using a 100%*100% HTML-table). Now I also use layers, that get visible when something is clicked. All works fine. Problem:
6
1508
by: GD | last post by:
I'm using a script that works great on IE, but not on mozilla. the original one worked also on N4, but i'd like it to be funcional with mozilla. this is the orginal script: ***************************** <Head> <script language="JavaScript1.2"> var menu1top=230
4
3207
by: johkar | last post by:
When the output method is set to xml, even though I have CDATA around my JavaScript, the operaters of && and < are converted to XML character entities which causes errors in my JavaScript. I know that I could externalize my JavaScript, but that will not be practical throughout this application. Is there any way to get around this issue? ...
14
1912
by: Bryan | last post by:
I am attempting to make a web page more Netscape friendly... <a href="http:www.gordonceilings.com"></a> I have already corrected the table issues in an offline staging site (where I do the building and then move it to the live site when ready), so don't worry about those. My problem lies in the menu on the left. It shows up and the initial...
1
1214
by: HoDeHoo | last post by:
Hi there, This may be more of an HTML problem than a PHP problem but as I am a beginnger at both I hope you will spare some compassion! I was up till 4 am last night and spent a solid 6 hours doing nothing but trying to understand and learn why the layers on the 2nd page of my script aren't working properly! The co-ordinates all look...
4
1576
by: Frank | last post by:
I am developing with VS.NET 2003 on the ASP.NET 1.1 platform. I have created a small app that interacts with an existing Access 97 db. At this point in time, my higher ups are unwilling to migrate the db to a more current version. The app works on my local machine no problem. I have the db located in the C:\Inetpub\wwwroot\Database...
3
2291
by: Mark Szlazak | last post by:
The following page simulates a pool cue and cue ball: http://members.aol.com/myscript/cue.html Mouse cursor position around the cue ball determines where a roll-over of 179 pool cue images is placed around the ball and which one of those images is displayed. Each pool cue image is in a slightly different orientation and the correct one is...
1
4096
by: Kevin R | last post by:
This is one of the weirdest problems I have ever run into. I have had to trim down a bunch of code to give a sample that is more easily readable by those who will view this. Here is the problem: I dynamically add an htmlcheckbox to a webform in the pages render and set the checked value to true. When the page loads, if I remove the check...
0
7624
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7547
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8060
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
7907
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5452
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5171
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3576
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1161
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
865
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.