jquery - jQuery Next/Prev スムーズスクロールとWordpress?

Question

http://jsfiddle.net/HRewD/17/で希望どおりに動作する jsFiddle の例

しかし..ワードプレスで実装しようとすると、スムーズなスクロールリンクはありません:(

私はそれが $ に関係しているのではないかと感じているので、$ から jQuery にすべて変更しました。これは通常は機能しますが、今回は機能しません。

また、提案どおり jQuery.noConflict() を使用してみましたが、うまくいきませんでした。

私は現在、このサイトをローカルで作業しているため、現時点ではオンラインにリンクできません。

jQueryを呼び出す完全に機能する他のプラグインがいくつかあるので、jQuery 1.6.4は間違いなくロードされています。

私は多くの作業を行っていないことを認識していますが、これを理解するのに役立つあらゆる種類のリードを本当に感謝しています. この時点で私は困惑しているからです。

誰かが手を貸してくれるなら、私は感謝します。

アップデート：

私はこの問題に断続的に取り組んでおり、さらに絞り込んでいますが、すべてを理解するのにまだ苦労しています. コンソールに 1 つのエラーが表示されましたが、それは見えない文字が原因でした (JSFiddle によって作成されたと思います?!)。コードのさまざまな場所で簡単なアラート機能を実行したところ、正常に表示されました。

今のところ、サファリ、FF、オペラの開発者ツールのコンソールまたは「リソース」セクションでエラーに気付いていませんが、クロムでのみエラーが発生しています

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

このエラーは、クリックするたびに 2 ずつ増加するエラーの左側の数字で次または前をクリックした後にのみ発生します。

私のHTML：

<div id="home-block">
    <div class="current">Content Goes here</div>
    <div>A box of content</div>
    <div>Content</div>
    <div>More content...</div>
</div>

<div id="nav-right">
    <a href="#" id="prev">Previous</a>
    <a href="#" id="next">Next</a>
</div>

私のCSS：

#home-block div{
width: 300px;
height: 400px;
border: 1px solid #000;
box-shadow: 1px 1px 3px #888;
margin: 10px 10px 10px 15px;
}

.post-contain{
position: relative;
margin: 0 auto;
width: 450px;
border: 1px solid #000;
}

#nav-right{
    position: fixed;
    right: 15px;
    top: 35%;
}

.current {
    color: red;
}

私のJS：

<script type="text/javascript">

$jq(document).ready(function($jq) {
    var scrollTo = function(yoza) {
        $jq('html, body').animate({
            scrollTop: $jq(yoza).offset().top
       }, 300);
    };

    $jq('#next').click(function(event) {
        event.preventDefault();
        var $jqcurrent = $jq('#home-block > .current');
        if ($jqcurrent.index() != $jq('#home-block > div').length - 1) {
            $jqcurrent.removeClass('current').next().addClass('current');
            scrollTo($jqcurrent.next());
        }
    });
    $jq('#prev').click(function(event) {
        event.preventDefault();
        var $jqcurrent = $jq('#home-block > .current');
        if (!$jqcurrent.index() == 0) {
           $jqcurrent.removeClass('current').prev().addClass('current');
            scrollTo($jqcurrent.prev());
        }
    });
});

</script>

functions.php (ワードプレス) で呼び出されるスクリプト:

function my_scripts_method() {


wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
wp_enqueue_script( 'jquery' );

wp_register_script('smooth-scroll', get_bloginfo('stylesheet_directory').'/js/jquery.scrollTo-1.4.2-min.js', false);
wp_enqueue_script('smooth-scroll');

wp_register_script('tabbedcontent', get_bloginfo('stylesheet_directory').'/js/tabbedContent.js', array('jquery'), '1.0', false);
wp_enqueue_script('tabbedcontent');

wp_register_script('jquery-tools', ("http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js"), false);
wp_enqueue_script('jquery-tools');

wp_register_script('dock-menu', get_bloginfo('stylesheet_directory').'/js/dock-interface.js', array('jquery'), false);
wp_enqueue_script('dock-menu');

    }
add_action('wp_enqueue_scripts', 'my_scripts_method');

以前に提供した JS Fiddle での実際の例を次に示します。

これはJS Binと静的htmlページでも機能しますが、wordpressでは機能しません。

私が試したこと：

Jquery ライブラリが実際にこの関数で読み込まれていることを確認しました。

<script type="text/javascript">
if (typeof jQuery != 'undefined') {  
    // jQuery is loaded => print the version
    alert(jQuery.fn.jquery);
}
</script>

1.6.4で返されます。このバージョンは、jquery ツールスクリプトから来ているようです。

一部のプラグインが独自の jQuery ライブラリをロードしている可能性がある場合に備えて、他のすべてのプラグインを無効にしました。functions.php ファイルにロードしているスクリプトを分離しました: wordpress に含まれる JQ の登録を解除しようとし、1.6.4 のみをロードし、1.7.1 のみをロードし、両方をロードし、何もロードせず、wordpress に含まれる JQ ライブラリがトリックを実行し、ロードする順序を再配置しますが、これらのどれもこの問題についての洞察を与えてくれませんでした.

変数が存在し、前述の JS スクリプトから使用できるかどうかをテストしたところ、スクリプトは変数の存在を確認して戻りました。

私は $ 記号で遊んでみました:

var $jq = jQuery.noConflict();

すべてのインスタンスを $jq と jQuery に変更しますが、どちらも何もしません。

また、#next、#prev、.post 変数の名前を、同じ名前の他の変数と競合している可能性があると考えて変更しようとしましたが、何もしませんでした。

ファイルパスを確認し、多数のフォーラムスレッドを読みました

言及する価値のある他のこと：

これらの同じライブラリから動作する他の jQuery モジュールがありますか?? コンソールエラーはありませんか?? これは役に立たないかもしれませんが、前または次をクリックすると画面が伸びて、ページの右側のスクロールバーが非表示になり、すぐに再表示されることに気付きました。

そして、これはやり過ぎかもしれませんが、ソースを提供することは良い考えかもしれません（まだローカルで動作しており、サイトにリンクできません）：

<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width">
<title>scroll 2 | </title>



<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/post.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/tabbedContent.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/scrollable-gallery.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/the-system.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/dock.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/wp-content/themes/Twentyten-templates/css/system-hover-grid.css" />





<link rel="pingback" href="http://localhost:8888/xmlrpc.php" />



<link rel="alternate" type="application/rss+xml" title=" &raquo; Feed" href="http://localhost:8888/feed/" />
<link rel="alternate" type="application/rss+xml" title=" &raquo; Comments Feed" href="http://localhost:8888/comments/feed/" />
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/comment-reply.js?ver=20090102'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://localhost:8888/wp-content/themes/Twentyten-templates/js/jquery.scrollTo-1.4.2-min.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://localhost:8888/wp-content/themes/Twentyten-templates/js/tabbedContent.js?ver=1.0'></script>
<script type='text/javascript' src='http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://localhost:8888/wp-content/themes/Twentyten-templates/js/dock-interface.js?ver=3.3.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='scrollTo' href='http://localhost:8888/scrollto/' />
<meta name="generator" content="WordPress 3.3.1" />
<link rel='canonical' href='http://localhost:8888/scroll-2/' />
<style type="text/css">
body.custom-background { background-color: #fff; }
</style>




</head>







<div id="wrapper" class="hfeed">

    <div id="header">

        <div id="masthead">

    <div id="pagemenu" role="navigation">
            </div>

            <div id="branding" role="banner">
                            <div id="site-title">
                    <span>
                        <a href="http://localhost:8888/" title="" rel="home"></a>
                    </span>
                </div>
                <div id="site-description"></div>



                        <img src="http://americandreamenergysystem.com/wp-content/uploads/2010/10/ADES-Header1.png" width="0" height="0" alt="" />

            </div><!-- #branding -->
<nav class="top">
<div class="nav-contain">
<ul class="left">
<li><a href="http://localhost:8888/">Home</a></li> 
<li> <a href="http://localhost:8888/who-we-are/">About Us</a> </li> 
<li><a href="http://localhost:8888:your-system/ ‎">Your System</a></li> 
</ul>
<ul class="right">
<li> <a href="http://localhost:8888/pyp/">Your Plan</a> </li> 
<li><a href="http://localhost:8888/faq//">FAQ</a></li> 
<li><a href="http://localhost:8888/customer-service/">Contact Us</a></li> 
</ul> 
</div>


</nav>
<div id="nav-accent"></div>

            </div><!-- #access -->
        </div><!-- #masthead -->
    </div><!-- #header -->

<img src="http://localhost:8888/wp-content/themes/Twentyten-templates/images/big-circle-v7.png" id="round-overlay">


    <div id="main">
<body class="page page-id-3259 page-template page-template-scroll2-php logged-in custom-background">

</div>






<style>
p.copy {
display:none;
}

#colophon {
    border-top: 0px solid #000000;
    }

 article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }


#home-block div{
width: 300px;
height: 400px;
border: 1px solid #000;
box-shadow: 1px 1px 3px #888;
margin: 10px 10px 10px 15px;
}

.post-contain{
position: relative;
margin: 0 auto;
width: 450px;
border: 1px solid #000;
}

#nav-right{
    position: fixed;
    right: 15px;
    top: 35%;
}

.current {
    color: red;
}

.temp-box {
width: 100%;
height: 100px;
display: block;
}

</style>



<div id="AD-Logo"></div>
<div class="temp-box">spacer</div>
<div id="home-block">
    <div class="current">Content Goes here</div>
    <div>A box of content</div>
    <div>Content</div>
    <div>More content...</div>
</div>

<div id="nav-right">
    <a href="#" id="prev">Previous</a>
    <a href="#" id="next">Next</a>
</div>



        <div id="container" class="one-column">


            <div id="content" role="main">


                <div id="post-3259" class="post-3259 page type-page status-publish hentry">
                    <h1 class="entry-title">scroll 2</h1>
                    <div class="entry-content">
                        <p>a great sailor was not made by smooth waters..</p>
                                                <span class="edit-link"><a class="post-edit-link" href="http://localhost:8888/wp-admin/post.php?post=3259&amp;action=edit" title="Edit Page">Edit</a></span>                    </div><!-- .entry-content -->
                </div><!-- #post-## -->




            </div><!-- #content -->
        </div><!-- #container -->

    </div><!-- #main -->


    <div id="footer" role="contentinfo">




        <div id="colophon">

<div id="copy-foot">
<p class="copy">Copyright &copy; All rights reserved 2012</p>
</div>
<div id="negatron"></div>




            <div id="footer-widget-area" role="complementary">

                <div id="first" class="widget-area">
                    <ul class="xoxo">
                        <li id="text-5">            <div class="textwidget"><a id="footer-text"  href="http://americandreamenergysystem.com/">Home</a><br/>
<a id="footer-text"  href="http://americandreamenergysystem.com/?page_id=276">Who We Are</a></div>
        </li>                   </ul>
                </div><!-- #first .widget-area -->

                <div id="second" class="widget-area">
                    <ul class="xoxo">
                        <li id="text-21">           <div class="textwidget"><a id="footer-text"  href="http://americandreamenergysystem.com/?page_id=895">How We Do It<br/>
<a id="footer-text"  href="http://americandreamenergysystem.com/?page_id=46">Your Energy System</a></div>
        </li>                   </ul>
                </div><!-- #second .widget-area -->

                <div id="third" class="widget-area">
                    <ul class="xoxo">
                        <li id="text-22">           <div class="textwidget"><a id="footer-text" href="http://americandreamenergysystem.com/?page_id=184">Pick Your Plan</a><br/>
<a id="footer-text" href="http://americandreamenergysystem.com/?page_id=442">Home Additions</a></div>
        </li>                   </ul>
                </div><!-- #third .widget-area -->

                <div id="fourth" class="widget-area">
                    <ul class="xoxo">
                        <li id="text-23">           <div class="textwidget">
<a id="footer-text" href="http://americandreamenergysystem.com/?page_id=50">Contact Us</a><br/>
</div>
        </li>                   </ul>
                </div><!-- #fourth .widget-area -->

            </div><!-- #footer-widget-area -->

            <div id="site-info">
                <a href="http://localhost:8888/" title="" rel="home">
                                    </a>
            </div><!-- #site-info -->

            <div id="site-generator">

            </div><!-- #site-generator -->

            </div><!-- #colophon -->

         <!-- #copyright -->


    </div><!-- #footer -->

</div><!-- #wrapper -->


<div id="foot-note">

</div>

<script type="text/javascript">
if (typeof jQuery != 'undefined') {  
    // jQuery is loaded => print the version
    alert(jQuery.fn.jquery);
}
</script>



<script>

jQuery(".scrollable").scrollable();

jQuery(".items img").click(function() {

    // see if same thumb is being clicked
    if (jQuery(this).hasClass("active")) { return; }

    // in the above example replace the url assignment with this line
    var url = jQuery(this).attr("alt");

    // get handle to element that wraps the image and make it semi-transparent
    var wrap = jQuery("#image_wrap").fadeTo("medium", 1);

    // the large image from www.flickr.com
    var img = new Image();


    // call this function after it's loaded
    img.onload = function() {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);

    };

    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    jQuery(".items img").removeClass("active");
    jQuery(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").click();

</script>



<script type="text/javascript">

    jQuery(document).ready(
        function()
        {
            jQuery('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }
            )
        }
    );

</script>

<script type="text/javascript">

     var $jq = jQuery.noConflict();  
    $jq(document).ready(
        function()
        {
            $jq('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 55,
                    proximity: 60,
                    halign : 'center'
                }
            )

            $jq('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 55,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )   
        }
    );

</script>

<script type="text/avascript">

var $jq = jQuery.noConflict();  

</script>

<script type="text/javascript">

$jq(document).ready(function($jq) {
    var scrollTo = function(yoza) {
        $jq('html, body').animate({
            scrollTop: $jq(yoza).offset().top
       }, 300);
    };

    $jq('#next').click(function(event) {
        event.preventDefault();
        var $jqcurrent = $jq('#home-block > .current');
        if ($jqcurrent.index() != $jq('#home-block > div').length - 1) {
            $jqcurrent.removeClass('current').next().addClass('current');
            scrollTo($jqcurrent.next());
        }
    });
    $jq('#prev').click(function(event) {
        event.preventDefault();
        var $jqcurrent = $jq('#home-block > .current');
        if (!$jqcurrent.index() == 0) {
           $jqcurrent.removeClass('current').prev().addClass('current');
            scrollTo($jqcurrent.prev());
        }
    });
});

</script>    


</body>
</html>

この時点で、他に何を試すべきかわかりません。明らかに何かが正常ではありませんが、私には明らかではありません。それは単純なものであり、必要以上に複雑になっていると思います。私は本当にこれについて私の心を包む助けを使うことができました.

誰かが私が間違っていることに気づいたら、私の思考プロセスの間違いを指摘してください。なぜなら、この対立がどこから来ているのかわからないからです

ありがとう、ニック

アップデート：

関数ファイルから jQuery ツールと 1.7.1 の両方を削除しても、問題は解決しません。

このプロセスを簡単にするために、サイトをアップロードしました。

ここ

現在、関数ファイルに 1 つのスクリプトがあり、ライブラリの競合を避けるために wordpress に含まれている 1.7.1 ライブラリを利用しようとしています。

作業中のページが表示されるようになったので、絞り込みやすくなるかもしれません。

ありがとう、ニック

score 0 · Accepted Answer

jquery スクリプトの前にスムーズスクロールスクリプトが読み込まれていると思います。jQuery が最初にエンキューされるようにするには、「jquery」ハンドルを依存関係としてスムーズスクロールエンキュースクリプト関数に追加します。これは、他のスクリプトのいくつかで既に使用されています。スムーズスクロールの行にも追加するだけです。

wp_register_script('smooth-scroll', get_bloginfo('stylesheet_directory').'/js/jquery.scrollTo-1.4.2-min.js', array('jquery');

それが役立つことを願っています。

jquery - jQuery Next/Prev スムーズスクロールとWordpress?

1 に答える 1

Related

Reference