SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery not behaving correctly in IE

    Hi all, not sure if its ok to post jQuery questions here so apologies if its not the right place!

    This page has a small jquery script that I got from here that hides the contents of the <dd> elements in a <dl> these are then revealed by clicking on the images. Works great in Firefox but in IE (6 & 7) and Safari when you first navigate to the page the boxes are not hidden until you refresh. The show/hide still works indicating that the jQuery has loaded its just that the initial hide part is seemingly ignored.

    Now I've no idea about jQuery so am unable to see if there is something that could be done about this issue. I am also wondering if this is a simple markup issue of some kind as I have used this script on other sites and its been fine.

    Hopefully someone can help!

    Thanks

  2. #2
    SitePoint Member vidalstat's Avatar
    Join Date
    Dec 2007
    Location
    Brooklyn NY
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you post your code? i 've written code to implement the same kind of functionalty you've mentioned and it works cross browser. If we can see the code we might be able to see something you missed.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    This appears to be a known issue with jquery.

    You can look into other OnDOMLoad functions that perform the same task.

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vidalstat

    Here is the script and the HTML it controls

    Code:
    <script src="/js/jquery.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
     // hides the slickbox as soon as the DOM is ready
     // (a little sooner than page load)
      $('#voucherbox').hide();
      $('#winterbox').hide();
    
     // toggles the slickbox on clicking the noted link 
      $('a#voucher-toggle').click(function() {
        $('#voucherbox').slideToggle(400);
        return false;
      });
     $('a#winter-toggle').click(function() {
        $('#winterbox').slideToggle(400);
        return false;
      }); 
    
    })
    </script>
    Code:
    <dl id="homeoffers">
        <dt id="voucheroffer"><a href="#" id="voucher-toggle">Give the gift of health this christmas with our gift vouchers</a></dt>
           <dd id="voucherbox">Available from our <a href="http://maps.google.co.uk/maps?hl=en&amp;ie=UTF8&amp;q=uni+sports+and+fitness+centre&amp;near=Hull&amp;fb=1&amp;cid=53769633,-367135,12908853905191583882&amp;li=lmd&amp;z=14&amp;iwloc=A&amp;om=1" title="Click for directions to Hull Uni's sports and fitness centre">main union bar</a>, give your mates a helping hand with their new years detox!</dd>
        <dt id="winteroffer"><a href="#" id="winter-toggle">Winter warmers  fresh soup and fruit porridge from 1</a></dt>
          <dd id="winterbox">Come and taste the love in momma b's <strong>gorgeous homemade soup</strong>, or warm up and fill up on some <strong>creamy porridge</strong>, available with any fruit, honey or cinnamon.</dd>
    
    </dl>
    pmw57

    I'd love to consider an alternative but lack of knowledge is pinning me down a bit! I'm confused because the same script is working fine on another site I used it on.

    Thanks guys

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Here's the ticket for this known jquery.ready issue.

    It appears that a development version may have fixed it, but that was only a few days ago.

  6. #6
    SitePoint Member vidalstat's Avatar
    Join Date
    Dec 2007
    Location
    Brooklyn NY
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery known issue

    @pmw57:

    Without having looked into the known bug very thouroughly, could this have something to do with using the dt and dd elements as opposed to an unordered list.

    I've written a navigation menu for a website using the latest version of jquery and it works very well in ie and firefox. Basically just a simple nested unordered list. An I hide it succesfully from all browsers with the followin:

    Code:
    $("#sidebar ul li ul").hide();
    then I toggle the visibility with the following function:

    Code:
    $("#sidebar ul li").toggle(function(){
              $(this).children("ul").slideDown('fast');
              
     },function(){
              $(this).children("ul").slideUp('fast');
    });

    Any ideas why this works on load and his code above does not.

    Anyway, hope this helps.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd be tempted to stick
    Code:
    <script>
    $('#voucherbox').hide();
    $('#winterbox').hide();
    </script>
    at the bottom of your page (as low in the body as possible) just to see if it's the on dom ready function that's jumping ship.

    PS this aint for production code. just testing
    Mashups, DOM Scripting and all the things we call Web2.0 blogger
    http://www.heavyweightgeek.org/
    http://twitter.com/heavyweightgeek

  8. #8
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think (you guys checking on IE could help) that the fix that pmw57 posted is working. I don't think it has anything to do with the DL being used as it was originally an unordered list but I changed it to be more semantically correct and it had the same problem before.

    @heavyweightgeek - that sounds like a good idea I'll give that a whirl if its still not resolved. Would that basically reiterate the hide function at the end of the page load?

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @mikeebee8
    I suppose you could use onload too if you really wanted.
    Mashups, DOM Scripting and all the things we call Web2.0 blogger
    http://www.heavyweightgeek.org/
    http://twitter.com/heavyweightgeek


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
  •