style.display cross browser problem

Discussion in 'Javascript' started by Brian D, Sep 27, 2006.

  1. Brian D

    Brian D Guest

    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
    Brian D, Sep 27, 2006
    #1
    1. Advertising

  2. Brian D

    RobG Guest

    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
    RobG, Sep 28, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jeff
    Replies:
    13
    Views:
    1,122
    vanilla
    Oct 6, 2007
  2. msdngroup
    Replies:
    5
    Views:
    695
    msgroup
    Jan 30, 2008
  3. msdngroup
    Replies:
    0
    Views:
    575
    msdngroup
    Dec 15, 2007
  4. Replies:
    2
    Views:
    180
  5. Csaba  Gabor

    cross browser FF style SELECT element

    Csaba Gabor, Mar 25, 2006, in forum: Javascript
    Replies:
    0
    Views:
    469
    Csaba Gabor
    Mar 25, 2006
Loading...

Share This Page