1

I'm working on a new portfolio site at http://www.nitrohandsome.com, and am using the experience to cut my teeth on jQuery. I'm using the latest build and jcarouselite along with the easing extension on my main page for a nifty carousel effect. It works fine in most browsers, but when I started testing in IE (7 and 8, haven't started optimizing for 6.5) I find that jQuery does not execute code as soon as the document is loaded. Rather, it seems to wait until one moves the mouse on to the body of html itself. This causes my carousel to display like a list and my main menu buttons to not render properly until the user moves the mouse. I used browsershots.org to check if it was only happening on my machine, but sadly not. Can anyone shed some light on this for me? I'm a novice with jQuery, and have only a bit more experience with javascript in general, although I am quite familiar with other ECMA languages such as Actionscript.

I would post the source, but the live preview of the post shows that it would try to render the HTML.

Thanks in advance.

demongolem
  • 9,474
  • 36
  • 90
  • 105

1 Answers1

11

You have an extra comma somewhere in your code. Check it for something like this:

{
 param: "whatever",
 param2: "whatever", // <- extra comma!
}

IE dies on these while Firefox does not.

EDIT: Here is the extra comma:

$("#carousel").jCarouselLite({
    btnNext: "#next",
    btnPrev: "#prev",
    visible: 3,
    easing: "easeout",
    speed: 150, // <- REMOVE THIS COMMA
});

SECOND EDIT:

For the sake of anyone that finds this page later on, the reason his page was not showing correctly was because of jQuery's 1.3.1 documented problems with document.ready firing after images or not at all. A fix to the latest jQuery version did the trick.

Community
  • 1
  • 1
Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
  • +1 - had to install Web Developer for FF to look for it... too damn slow! – John Rasch Apr 07 '09 at 00:49
  • This one gets me all the time. – cgp Apr 07 '09 at 12:48
  • Hi Paolo, Thanks for the quick reply. I took the comma out but still seem to be getting the same problem. Any other ideas? I wouldn't be surprised if there was something else wrong with my jQuery syntax - still not too comfortable with it. I'll poke around some more. –  Apr 07 '09 at 13:16
  • Ah, your actual problem wasn't happening to me until you fixed the comma. Now I see what you mean about the js not executing until you scroll over the page. I'll check it out. – Paolo Bergantino Apr 07 '09 at 13:36
  • Mmm. It stopped happening to me. Did you fix it? – Paolo Bergantino Apr 07 '09 at 13:46
  • Really? Interesting. What version are you running. I'm on Vista and IE 8 and it's still happening to me, sometimes rendering like this: http://www.nitrohandsome.com/images/ie.jpg –  Apr 07 '09 at 13:52
  • SO weird. I was trying to debug the site using the IE Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en). Whenever I open the site with the toolbar open the carousel shows properly, and when it is closed it is messed up. – Paolo Bergantino Apr 07 '09 at 14:08
  • Can you add alerts to scripts js a) outside the $(function(){, b) inside it, c) inside the window.onload so I can see something? I tried downloading a copy of the site but oddly enough it goes away when I do that – Paolo Bergantino Apr 07 '09 at 14:11
  • Good idea, I just added the alerts. –  Apr 07 '09 at 14:23
  • Interesting. Try updating your jQuery to the latest one off the jQuery site. There was a problem with 1.3.1's document.ready and I think that's what's happening here. – Paolo Bergantino Apr 07 '09 at 14:25
  • Genius! Embarrassing I didn't think of checking for the latest version. :) Thanks so much Paolo! –  Apr 07 '09 at 14:32