Скрипт слайдера jQuery работает локально, ломается на сервере

Я в замешательстве: созданная мной целевая страница прекрасно работает локально, но полностью ломается, когда я загружаю ее на наш сервер.

Вот эта страница: http://register.lot18.com/slider/google/

Белая коробка посередине должна быть идеально отцентрирована; по мере прохождения каждого шага формы следующий шаг должен скользить справа. Позиционирование / скольжение осуществляется с /js/slider.js и jQuery UI. Если вы загружаете страницу и просматриваете ее на своем локальном компьютере, она должна выглядеть точно правильно.

С чего мне начать отладку? Страница уже работает локально, так что в основном все, что я пытаюсь сделать, является случайным предположением.

Даже незнакомец: это не ломается 100% времени. Если я буду сидеть и обновлять страницу, возможно, 1 из каждых 10 попыток, она будет отображаться отлично. Потом я освежаюсь, и он снова ломается.

ОБНОВЛЕНИЕ: Вот скриншоты того, что я вижу, оба из Safari 6 на OS X:

Местный: https://dl.dropbox.com/u/547222/lp-local.jpg
Сервер: https://dl.dropbox.com/u/547222/lp-server.jpg

ОБНОВЛЕНИЕ 2: Когда я удаляю PrefixFree (js/prefixfree.min.js), страница отображается так, как будто таблицы стилей нет вообще - но опять же, только на сервере, а не локально. Побочным эффектом PrefixFree является то, что он берет внешние таблицы стилей и вставляет их в строку на странице. Так что внешняя таблица стилей не обслуживается с правильным content-type или что-то?

ОБНОВЛЕНИЕ 3: Когда я пытаюсь проверить CSS с помощью прямого URI, я получаю эту ошибку от валидатора W3C:

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

Что это значит?

Источник

3 ответа

Решение

Я думаю, я понял... CSS обслуживается с неправильным типом MIME: binary/octet-stream вместо text/css, Я никогда не замечал этого, потому что я использую плагин jQuery с именем PrefixFree на странице, и побочным эффектом его использования является то, что ваши внешние таблицы стилей вставляются в виде встроенных стилей на странице после загрузки документа.

Я взял PrefixFree и запустил, страница загружается без какого-либо стиля.

Итак, позиция выключена, потому что slider.js фактически вычисляет его перед загрузкой стилей через PrefixFree.

Мне нужен кто-то еще, чтобы установить правильный тип MIME на сервере для меня, поэтому я не могу подтвердить это на 100%, но я уверен, что это проблема.

ОБНОВЛЕНИЕ: Это проблема конкретно с S3 и Transmit на OS X. В настройках передачи установите настраиваемый заголовок загрузки для CSS (content-type: text/css), и проблема решена!

Источник

Кажется, вызывает событие изменения размера ($(window).resize()) центрирует диалог. Я предлагаю, как упоминал @dave-anderson, немного перестроить центрирующий код:

$(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();
}
Источник

Вы объявили ряд функций внутри $(document).ready позвоните, но вы, вероятно, можете переместить их на улицу.

Одна из причин, по которой вы можете столкнуться с проблемой, - это когда вы присоединяете вызов функции к $(window).resize ты звонишь sealPosition() но это объявлено ниже этого.

У нас были некоторые странные проблемы с объявлением вещей после прикрепления их к анонимным функциям. Попробуйте переместить объявление sealPosition выше resize прикрепить или за пределами ready вызов.

Источник
Другие вопросы по тегам