jQuery Next/Prev Smooth Scrolling and WordPress?

Example in jsFiddle working as I would like in http://jsfiddle.net/HRewD/17/

BUT..When I try to implement in wordpress, no smooth scrolling links 🙁

I feel it may have to do with the $’s, so I changed them all from $ to jQuery which normally works but not this time.

I also tried using jQuery.noConflict() as suggested but with no luck.

I am currently working on this site locally, so I am unable to link to it online at the moment.

I have a few other plugins working perfectly which call on jQuery, so jQuery 1.6.4 is definitely loading.

I realize I haven’t given a lot to work with, but I would really appreciate any sort of lead to help me get this figured out. Because at this point I am stumped.

So if anyone could lend a hand, I would be grateful.

Update:

I have been working on this problem on and off and have narrowed it further but I am still struggling to wrap my head around all of it. I received one error in the console and it was because of an invisible character (I guess created by JSFiddle?!). I ran a simple alert function at various places in the code and it displayed fine.

As of now, I am not noticing any errors in the console or ‘resources’section of the developer tools for safari, FF and Opera, but only in chrome I am getting the error

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

I get this error ONLY after clicking next or previous with a number to the left of the error that increases in increments of 2 after each click.

My 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>

My 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;
}

My 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>

My scripts being called in functions.php (wordpress):

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');

Here is a working example in JS Fiddle as I provided earlier

I also have this working in JS Bin as well as a static html page, but NOT in wordpress.

Things I have tried:

I have ensured that Jquery library is in fact loading with with this function:

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

Which returns with 1.6.4. I have found this version seems to be coming from the jquery tools script.

I have de-activated all other plug ins in case some may be loading their own jQuery library.
I have isolated the scripts I am loading in my functions.php file: I tried to de register wordpress’ included JQ and only loading 1.6.4, only loading 1.7.1, loading both, loading none and hoping wordpress’ included JQ library would do the trick as well as re arranging the order they load but none of these gave me any insight into this problem.

I have tested if variables exist and are available from my JS script mentioned earlier and the script returned acknowledging the variables’ presence.

I have tried playing with the $ symbol using:

var $jq = jQuery.noConflict(); 

and changing all instances to $jq as well as jQuery but neither do anything.

I have also tried changing the names of the #next, #prev, .post variables thinking that maybe they are conflicting with others with the identical name, but nothing.

I have checked the file paths, read numerous forum threads

Other things worth mentioning:

I have other jQuery modules working from these same libraries??
No console errors??
This may not be of use, but one thing I notice is that after clicking either previous or next, my screen will stretch so that the scroll bar on the right of the page is now hidden, but immediately reappears.

And this might be over kill but I feel providing the source might be a good idea (still working locally and unable to link to the site) :

<!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>

At this point, I don’t know what else to try. Obviously something is not in order, but it’s not apparent to me. I imagine it’s something simple and that I am complicating this way more than it needs to be. I could really use some help wrapping my mind around this.

So if anyone notices what I am doing wrong, please point out the mistakes in my thought process because I have no idea where this conflict is coming from.

Thanks,
Nick

Update:

Removing both jQuery tools and 1.7.1 from the functions file still doesn’t solve the issue.

I went ahead and uploaded the site to make this process simpler.

Here

As of now, I have one script in my functions file and I am trying to make use of the 1.7.1 library included with wordpress to avoid library conflicts.

So maybe now that the page I am working on is visible this will be easier to narrow down.

Thanks,
Nick