Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > style.display cross browser problem

Reply
Thread Tools

style.display cross browser problem

 
 
Brian D
Guest
Posts: n/a
 
      09-27-2006
Take a look at this page. http://tempsite.texwipe.com/test/ The code
is too long to post here so just look at the source.

It works flawlessly in IE, but in Firefox not so much. Here is the
situation. I am using the javascript property style.display to show
and hide some div layers. These layer ids are Layer1, Layer2, Layer3,
etc. Each link on the left controls what is shown or hidden. When they
are clicked, the corresponding layer is displayerd. "All products"
displays all available layers.

As I said this is not a problem in IE but in Firefox almost
consistently I have 2 problems. Do the following to reproduce them.
Overlapping text:
1. Click any of the menu items on the right (except All products). The
layer will be displayed.
2. Without refreshing the page, click the All Products. All of the
layers are displayed but they overlap the footer.

All of layer not hidden:
1. Refresh the page.
2. Click All Products. This will not overlap the footer as above.
3. Click any other menu item. The layer is not shrunk back to its
original size.
4. Click a few more menu items (except All products) and the layer will
eventually shrink back to the correct size.

Now as I said this works in IE. Please help me figure out the Firefox
issue.

Thank you!
Brian

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      09-28-2006

Brian D wrote:
> Take a look at this page. http://tempsite.texwipe.com/test/ The code
> is too long to post here so just look at the source.
>
> It works flawlessly in IE, but in Firefox not so much. Here is the
> situation. I am using the javascript property style.display to show
> and hide some div layers. These layer ids are Layer1, Layer2, Layer3,
> etc. Each link on the left controls what is shown or hidden. When they
> are clicked, the corresponding layer is displayerd. "All products"
> displays all available layers.

[...]
> Now as I said this works in IE. Please help me figure out the Firefox
> issue.


There just seems to be way too much code. Try the example below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Play</title>

<style type="text/css">
body {
font-family: monaco, arial, sans-serif;
font-size: 80%;
}

#menu {
width: 10em;
float: left;
padding-bottom: 10px;
}

#content {
border-left: 1px solid #bbb;
margin-left: 10em;
}

#content div {
border-bottom: 1px solid #bbb;
margin-left: 10px;
}
..banner {
border-bottom: 1px solid #bbb;
text-align: center;
}

</style>

<script type="text/javascript">

function toggleVis(id){
var content = document.getElementById('content');
var x = content.firstChild;
var displayValue = ( '*' == id)? '' : 'none';

while(x){
if (x.style) x.style.display = displayValue;
x = x.nextSibling;
}
if ('none' == displayValue){
if ('object' == typeof id){
id = id.href.replace(/^[^#]*#/,'');
}
document.getElementById(id).style.display = '';
}
return false;
}

</script>
<body>

<div class="banner">header stuff</div>
<div id="menu">
<a href="#product_1" onclick="return toggleVis(this);">product 1</a>
<br>
<a href="#product_2" onclick="return toggleVis(this);">product 2</a>
<br>
<a href="#product_3" onclick="return toggleVis(this);">product 3</a>
<br>
<a href="#product_4" onclick="return toggleVis(this);">product 4</a>
<br>
<a href="#product_5" onclick="return toggleVis(this);">product 5</a>
<br>
<a href="#" onclick="toggleVis('*');">Show all</a>
</div>

<div id="content">
<div id="product_1">
<p><b>Product 1</b></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse vel sem non est suscipit ultricies. Sed pretium accumsan
est. Proin nisi augue, vehicula a, pharetra faucibus, sollicitudin non,
urna. Vivamus ac mauris. Phasellus convallis sollicitudin ipsum. Mauris
ut tortor. Vivamus enim ipsum, sollicitudin nec, tristique quis,
laoreet non, odio. Nulla facilisi. Nulla quis nisi. Nullam pretium
mattis risus. Etiam leo lacus, rhoncus vitae, varius eget, interdum
eget, sapien. Vestibulum vel tellus. Morbi suscipit tortor congue
nulla. Aliquam felis lorem, placerat ac, blandit a, egestas a, odio.
Donec sed magna non massa congue adipiscing.</p>
</div>

<div id="product_2">
<p><b>Product 2</b></p>
<p>Duis at nisl a ligula laoreet luctus. Aliquam scelerisque
iaculis massa. Sed cursus dignissim tortor. Phasellus sapien massa,
nonummy ut, mollis mattis, pretium vel, leo. Morbi purus massa, laoreet
ac, condimentum id, sollicitudin feugiat, sapien. Donec sit amet lacus
non mauris blandit posuere. Nulla facilisi. Vivamus a tellus eget velit
eleifend tincidunt. Vivamus nibh nulla, vehicula eu, tempus at,
vestibulum ut, magna. Mauris suscipit molestie orci. Aliquam erat
volutpat.</p>
</div>

<div id="product_3">
<p><b>Product 3</b></p>
<p>Nullam nec lacus non tortor rutrum malesuada. Sed dignissim. Sed
sit amet diam non lorem feugiat pharetra. Mauris nec turpis. Phasellus
feugiat. Praesent diam. Nunc tempor rhoncus tortor. Nulla egestas arcu.
Mauris eros tellus, porttitor eu, malesuada a, condimentum in, enim.
Quisque non pede sed nibh scelerisque rutrum. Nullam scelerisque arcu
quis tortor. Aliquam auctor, leo a vestibulum commodo, enim nunc
sollicitudin purus, vitae blandit nisi metus id orci. Phasellus ut
nulla. Aenean elementum, ante sed placerat tempor, nulla leo ultricies
lectus, in ultricies eros odio et ipsum. Praesent eu lectus.
Pellentesque augue nibh, luctus id, congue ut, posuere ac, urna. Donec
justo.</p>
</div>

<div id="product_4">
<p><b>Product 4</b></p>
<p>Suspendisse quis justo vel neque convallis commodo. Aliquam
faucibus nulla eget libero. In pede tortor, iaculis id, commodo vitae,
pellentesque et, ligula. Proin et erat ac magna eleifend hendrerit. Ut
id augue sed eros egestas tincidunt. Quisque consectetuer tellus. Proin
semper tincidunt lectus. Pellentesque nisi. Praesent quis mauris et sem
pretium dignissim. Vestibulum vitae lacus ut est aliquam facilisis. Sed
non sapien.</p>
</div>

<div id="product_5">
<p><b>Product 5</b></p>
<p>Aliquam erat volutpat. Vestibulum vehicula eros sed nibh. Ut
elementum nonummy arcu. Curabitur vehicula justo sed nisi. Nam commodo
felis eget mi. Etiam venenatis mollis nisl. Donec dui est, eleifend ut,
luctus sed, imperdiet semper, eros. Nulla id arcu. Nulla facilisi.
Praesent et enim eget neque suscipit dignissim. Nulla quis justo
suscipit tortor lacinia ultricies. In et ligula. Aliquam varius odio
quis lectus. Maecenas in odio. In ac sapien. Ut dapibus.</p>
</div>
</div>
<script type="text/javascript">
toggleVis('product_1');
</script>
<div class="banner">Footer stuff</div>
</body>

--
Rob

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Cross-browser Real-time Message, Remote JavaScript Callback, and Monitoring Browser States msdngroup ASP .Net Web Services 5 01-30-2008 06:26 PM
Cross-browser Real-time Message, Remote JavaScript Callback, and Monitoring Browser States msdngroup ASP .Net 5 01-30-2008 06:26 PM
Re: Cross-browser Real-time Message, Remote JavaScript Callback, and Monitoring Browser States msdngroup ASP .Net 0 12-15-2007 08:38 PM
Calling external program from browser with parameters - cross-browser Jeff ASP .Net 13 10-06-2007 08:03 AM
Cross-browser setOpacity() without browser sniffing? petermichaux@gmail.com Javascript 16 09-07-2006 08:35 AM



Advertisments