1

右下隅でこれに取り組んでいるときに私が抱えている奇妙な問題は、右または左に移動したスクロール可能なセクションを持つ履歴セクションです。ロード時に乱数を選択し、それに移動します。

問題は、ロード時に（移動せずに）間違った位置にロードされ、APIで移動すると間違ったオフセットに移動することです（右の画像が正しく配置されていないだけです）。この問題は、Webkitブラウザー ( SafariおよびChromium )でのみ発生します。

このIEの底にたどり着くことができず、FFが奇妙に振る舞うように見えるので、どんな助けも大歓迎です! :(

JavaScript :

$(document).ready(function(){
    $('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"});
    var api_timeline = $(".timeline-container").data("scrollable");
    //console.info(api_timeline.getSize());
    var timeline_random_index = Math.floor( Math.random() * ( api_timeline.getSize()+1) )+1;
    //console.info(timeline_random_index);
    api_timeline.move( timeline_random_index, 1000 );
});

HTML

<div class="timeline-container">
    <div class="timeline-items">
        <div class="timeline-item">
            <img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb01.png" />
            <p><span class="timeline-item-date">1996</span> Russian Flag carrier Aeroflot created</p>
        </div>              
        <div class="timeline-item">
            <img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb02.png" />
            <p><span class="timeline-item-date">1997</span> Universal Studios created</p>
        </div>              
        <div class="timeline-item">
            <img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb03.png" />
            <p><span class="timeline-item-date">1998</span> Vodafone brand refresh</p>
        </div>              
        <div class="timeline-item">
            <img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb04.png" />
            <p><span class="timeline-item-date">1998</span> Wembley Stadium identity created</p>
        </div>              
        <div class="timeline-item">
            <img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb05.png" />
            <p><span class="timeline-item-date">2000</span> Jonnie Walker brand created</p>
        </div>              
    </div>              
</div>

CSS

.timeline-container {overflow:hidden; width: 245px;position:relative; min-height: 170px;height: 170px !important;}
.timeline-container .timeline-items { width:20000em; position:absolute;}
.timeline-container .timeline-item {float:left;text-align:center;position: relative;}
.timeline-container .timeline-items p { font-weight: normal; font-size: 13px; margin-bottom:0;}
.timeline-container .timeline-items span { font-weight: bold;}

アップデート

本当に奇妙なことに、私はこれをjsFiddleに設定しましたが、すべてのブラウザで正しく動作します。まったく同じコードで。それはもっと混乱していません。ページ上の「その他」の何かが影響しているに違いありません。

更新 2

ある意味で「修正」しましたが、それは汚い小さなハックです-理想的ではありませんが、機能します：

$(document).ready(function(){
    $('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"});
    var api_timeline = $(".timeline-container").data("scrollable");
    var timeline_random_index = Math.floor( Math.random() * ( api_timeline.getSize()+1) )+1;
    var timeline_random_index_pixles = timeline_random_index * 245 * -1;
    $(".timeline-items").css("left", timeline_random_index_pixles+"px")
});
4

1 に答える 1

0

ロード時にスクロール可能な関数ではなく、カスタムの配置を使用することで修正されました。

$(document).ready(function(){
    $('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"});
    var api_timeline = $(".timeline-container").data("scrollable");
    var timeline_random_index = Math.floor( Math.random() * ( api_timeline.getSize()+1) )+1;
    var timeline_random_index_pixles = timeline_random_index * 245 * -1;
    $(".timeline-items").css("left", timeline_random_index_pixles+"px")
});
于 2010-10-14T21:45:05.297 に答える