jQuery slider script works locally, breaks on server

Question

I'm stumped: a landing page that I built works perfectly locally, but completely breaks when I upload it to our server.

Here's the page: http://register.lot18.com/slider/google/

The white box in the middle is supposed to be perfectly centered; as you progress through each step of the form, the next step is supposed to slide in from the right. The positioning/sliding is done with /js/slider.js and jQuery UI. If you download the page and view it on your local machine, it should look exactly right.

Where do I even start with debugging this? The page already works locally, so basically everything I'm trying is just a random guess.

Even stranger: it doesn't break 100% of the time. If I sit there and keep refreshing the page, maybe 1 out of every 10 attempts, it'll display perfectly. Then I refresh and it's broken again.

---

UPDATE: Here's screenshots of what I'm seeing, both from Safari 6 on OS X:

Local: https://dl.dropbox.com/u/547222/lp-local.jpg
Server: https://dl.dropbox.com/u/547222/lp-server.jpg

---

UPDATE 2: When I remove PrefixFree (js/prefixfree.min.js), the page renders as if there is no stylesheet at all – but again, only on the server and not locally. A side effect of PrefixFree is that it takes external stylesheets and inserts them inline on the page. So is the external stylesheet not getting served with the correct content-type or something?

---

UPDATE 3: When I try to validate the CSS by direct URI, I get this error from the W3C validator:

I/O Error: Unknown mime type : binary/octet-stream

What does that mean?

Answer 1

I think I got it...the CSS is being served up with the wrong MIME type: binary/octet-stream instead of text/css. I never noticed this because I use a jQuery plugin called PrefixFree on the page, and a side effect of using it is that your external stylesheets get inserted as inline styles on the page after the document loads.

I took PrefixFree out and bam, the page loads with no styling whatsoever.

So, the position is off because slider.js is actually calculating it before the styles are loaded through PrefixFree.

I need someone else to set the correct MIME type on the server for me, so I can't confirm this 100%, but I'm certain that's what the problem is.

---

UPDATE: It's an issue specifically with S3 and Transmit on OS X. In Transmit preferences, set a custom upload header for CSS (content-type: text/css) and the problem is solved!

Answer 2

You have declared a number of functions inside the $(document).ready call but you can probably move these outside.

One thing that may be the cause of you trouble is when you attach the function call to $(window).resize you call sealPosition() but this is declared below it.

We had some odd issues declaring things after attaching them in anonymous functions like that. Try moving the sealPosition declaration above the resize attach or outside the ready call.

Answer 3

It seems triggering a resize event ($(window).resize()) centers the dialog. I suggest, as @dave-anderson mentioned, re-arranging the centering code a little:

$(document).ready(function(){

    // [code as normal here]

    $(window).resize(function(){
        positionOnResize();
    });
    positionOnResize(); // initial positioning

}); // end document ready

function sealPosition() {
    var stepPosition = $(".step:eq(1)").position();
    $("#seal").css({
        left: stepPosition.left + 470,
        top: stepPosition.top - 80
    });
}

function dialogPosition() {
    $(".step:eq(0)").left();
    $(".step:eq(1)").center();
    $(".step:eq(2)").right();
    $(".step:eq(3)").right();
}

function positionOnResize() {
    dialogPosition();
    sealPosition();
}