SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member MrWhitfield's Avatar
    Join Date
    Jun 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing element.style wont work in IE

    I'm currently putting javascript function onto a page to swap the content between 2 divs onclick- when one is visible one is hidden and vice versa (they are in the same place to create a tabbed browsing effect).

    the script:

    <script type="text/javascript">
    *
    function detailStyle()
    {
    descrip = document.getElementById('description');
    descrip.style.display = "none";
    details = document.getElementById('details');
    details.style.display = "block";
    }

    function descripStyle()
    {
    descrip = document.getElementById('description');
    descrip.style.display = "block";
    details = document.getElementById('details');
    details.style.display = "none";
    }
    </script>

    the css:

    #description, #details {

    Position: absolute;
    left: 20px;
    top: 190px;
    width: 230px;
    height: 110px;
    margin-top: 0px;
    }
    #description {
    display:block;
    }

    #details {
    display:none;
    }

    The html:
    <div id="description" >broad product description goes here</div> <div id="details" >product technical spec goes here</div>
    <div id="detailLink"><a class="detailButton" href="javascript:detailStyle();">details</a></div>
    <div id="descripLink"><a class="descripButton" href="javascript:descripStyle();">description</a></div>

    I have been going mad for days with this, it should be easy. Please tell me where i'm going wrong! It works perfectly on mac (safari and ff), pc firefox. Just not in IE...

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That problem may result from not explicitly declaring the variables 'descrip' and 'details'. Those variable names are used (or rather re-used) in both the detailStyle() and descripStyle() functions. But because they are not declared within each of those functions, they have been forced into global scope. Although the other browsers don't seem to mind it, in this case, IE gets confused.

    So, just use 'var' in all 4 cases there, e.g.

    Code:
    var descrip = document.getElementById('description');


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •