0

私はいくつかのjqueryスライダーと他の機能を持つサイトに取り組んでいます。ただし、IE（および私が見た限りIEのみ）で数ページジャンプするたびに、jqueryはロードされず、ページが壊れます。IE で時々読み込まれない部分は、jquery.cycle.all.js ファイルからのものです。これが私のコードのjavascriptセクションです。

<script type="text/javascript" src="javascript/modernizr.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="javascript/jquery.cycle.all.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    if (!Modernizr.input.placeholder) {
        $('input[placeholder], textarea[placeholder]').each(function(index, elem) {
            elem = $(elem);
            placeholder = elem.attr('placeholder');
            elem_id = elem.attr('id');
            elem_name = elem.attr('name');

            clone = elem.clone();
            clone.hide();

            if (elem_id) {
                clone.attr({'id': elem_id+'-fake'});
            }
            if (elem_name) {
                clone.attr({'name': elem_name+'-fake'});
            }
            clone.addClass('fake');
            clone.data({'original': $(elem)});
            clone.val(placeholder);

            clone.focus(function(e) {
                e.preventDefault();
                $(this).hide();
                $(this).data('original').show().focus();
            });
            elem.blur(function() {
                if ($(this).val() == '') {
                    $(this).hide();
                    $(this).next().show();
                }
            });

            elem.after(clone);
            elem.blur();
        });
    }

    $('#image-slider').cycle({
        speed: 1000,
        timeout: 1000
    });

    $('#text-slider').cycle({
        speed: 1000,
        timeout: 10000
    });

    $('#ad-1').cycle({
        speed: 1000,
        timeout: 1000
    });

    $('#ad-2').cycle({
        speed: 1000,
        timeout: 1000
    });

    $('#gallery-slider').cycle({
        speed: 2000,
        timeout: 2500
    });
});

function PopupCenter(pageURL, title, w, h) {
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2);
    var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no,   width='+w+', height='+h+', top='+top+', left='+left);
} 

</script>

私が見た限りでは、プレースホルダーと #image-slider パーツは毎回機能します。#text-slider、#ad-1、および #ad-2 は、IE でのみ散発的に失敗します。誰か私に何か足りないと言ってください、私はここで髪をかきむしっています。サイトへのリンクはここにありますhttp://memorysquare.com/testSite/

4

2 に答える 2

1

Chrome でサンプル ページを開くと、

[サイクル] 終了します。セレクターによってゼロ要素が見つかりました

問題は JS にあるのではなく、マークアップにあるのかもしれません。いくつかの div を閉じていないか、空の要素セットが定義されていない可能性があります。また、ページはChromeでも機能しません。

編集:はい、問題はマークアップにあると思います。あなたの FAQ ページでは、IE は単純に壊れますが、フッターに 4 つの写真が表示されますが、Chorme では何も表示されません。Chrome 開発者ツールにアクセスすると、フッターの一部の要素がアニメーション化されていることがわかります。

于 2012-11-23T20:18:49.987 に答える
0

この例を見て、Internet Explorer のせいにしないように最善を尽くしたので、いくつかの提案を思いつくことができます。

まず、あなたが遭遇している問題は jQuery や IE ではなく (ほとんどの問題は IE にありますが)、「サイクル」プラグインにあると思います。カルーセル効果を目指している場合は、Twitter の Bootstrap @ http://twitter.github.com/bootstrapをチェックすることをお勧めします。

そこには、基本的なマークアップを使用してスライダーを設定できるようにする、素晴らしいスタイルとスクリプトのセットがあります。Bootstrap を使用した例を次に示します。

マークアップは次のようになります。

<!-- The carousel container -->
<div id="slider" class="carousel slide">
    <!-- The carousel -->
    <div class="carousel-inner">
        <div class="active item">
            <!-- Here you can put the image itself, as well as a custom element to hold a caption -->
            <img src="/path/to/image.png" alt="Image Not Found" title="Bootstrap Rocks!" />
            <div class="carousel-caption">
                  <h4>The Title</h4>
                  <p>Some text.</p>
                </div>
        </div>
        <div class="active item">
            <img src="/path/to/image.png" alt="Image Not Found" title="Bootstrap Rocks!" />
        </div>
        <div class="active item">
            <img src="/path/to/image.png" alt="Image Not Found" title="Bootstrap Rocks!" />
        </div>
        </div>
    <!-- The anchors to move through the carousel -->
    <a class="carousel-control left" href="#slider" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#slider" data-slide="next">&rsaquo;</a>
</div>

最良の部分は、スクリプトを記述する必要がないことです。これをそのまま使用できます。マークアップだけが自動初期化されます。

いくつかのヒント。

サイトで Internet Explorer をサポートすることを目指しているため、いくつかのヒントを提供する必要があると感じました。

Internet Explorer のくだらない機能でもサイトを実行できるようにする場合は、サイトを最適化するための小さなツールやツールを使用することをお勧めします。サイトを最適化するためにスイッチ/ケースを実行する必要がなくなりました。

HTML5 要素を使用している場合は、「HTML5Shiv @ http://code.google.com/p/html5shiv/」を含めてみてください。そしてCSS3については「CSS3Shiv @ http://github.com/karimsa/css3shiv」と書いていますが、それは1月まで出ません。

とにかく、使用しているプラ​​グインが自己最適化できるかどうかをブラウズして確認することをお勧めします。そうでない場合は、他のプラグインを探すことを強くお勧めします.

于 2012-11-23T20:42:47.490 に答える