jQuery滑塊腳本在本地工作，在服務器上打破

我很沮喪：我構建的着陸頁在本地完美工作，但當我將其上傳到我們的服務器時完全中斷。jQuery滑塊腳本在本地工作，在服務器上打破

這裏的頁面：http://register.lot18.com/slider/google/

中間的白框應該是完全居中;當您逐步完成表單的每一步時，下一步應該從右側滑入。定位/滑動使用/js/slider.js和jQuery UI完成。如果您下載頁面並在本地機器上查看它，它應該看起來完全正確。

我從哪裏開始調試呢？該頁面已經在本地工作，所以基本上我所嘗試的一切都只是一個隨機猜測。

即使是陌生人：它不會破壞100％的時間。如果我坐在那裏，並保持刷新頁面，可能每10次嘗試1次，它會完美顯示。然後我刷新，它又被打破了。

更新：這是我所看到的截圖，無論是從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：當我試圖驗證通過直接URI的CSS，我從W3C驗證此錯誤：

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

這是什麼意思？

來源

2012-09-10 daGUY

剛剛在我的機器上測試過，它工作正常。 – Rhys

@Rhys：哪個瀏覽器和版本？我已經在Safari 6和Firefox 15上進行了測試。 – daGUY

奇怪的是，如果我打開並關閉開發者控制檯，它將自行集中，但是當頁面加載到左側時。 – j08691

我想我明白了...在CSS被送達了錯誤的MIME類型：binary/octet-stream代替text/css 。我從來沒有注意到這一點，因爲我在頁面上使用了名爲PrefixFree的jQuery插件，使用它的副作用是在文檔加載後，外部樣式表作爲內聯樣式插入頁面中。

我把PrefixFree和bam，加載頁面，沒有任何樣式。

因此，位置關閉，因爲slider.js實際上正在計算它之前樣式通過PrefixFree加載。

我需要別人在服務器上爲我設置正確的MIME類型，所以我無法確認這100％，但我確定這就是問題所在。

UPDATE：這是專門與S3 and Transmit on OS X的問題。在發送首選項中，爲CSS（content-type：text/css）設置一個自定義上傳標題，問題就解決了！

來源

2012-09-10 02:30:43 daGUY

您已在$(document).ready調用中聲明瞭若干函數，但您可以將這些函數移到外部。

可能是您遇到麻煩的原因之一是，當您將函數調用附加到$(window).resize時，您可以調用sealPosition()，但在此位置聲明它。

在將它們附加到匿名函數中後，我們發現了一些奇怪的問題。嘗試移動位於resize附件之上或在ready呼叫之外的sealPosition聲明。

來源

2012-09-10 01:25:27

看起來觸發了調整大小事件（$(window).resize()）居中對話框。我建議，作爲@大衛 - 安德森提到，重新安排定心代碼一點：

$(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(); 
}

來源

2012-09-10 02:17:59 Owlvark

jQuery滑塊腳本在本地工作，在服務器上打破

回答

相關問題