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
