Question

I’m creating a horizontally scrolling website using jQuery and I also want to add this hide and show function. However, after I insert another jQuery script for the hiding function, the easing effect for horizontally scrolling is not working! So that when I click the navigation of the site, it jumps to another section.

Here’s my code of the jQuery:

<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.localScroll.defaults.axis = 'x';
        $.localScroll();
    });
</script>
<!-----------------------hiding div------------------------------------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $(".slidingDiv").hide();
        $(".show_hide").show();

        $('.show_hide').click(function () {
            $(".slidingDiv").slideToggle();
        });

    });
</script>   

Does anybody know how to solve this?

Answer 1

considering that you are using correct scripts as per your requirements.

Many JavaScript libraries use ‘$’ as a function or variable name, just as jQuery does. In jQuery’s case, ‘$’ is just an alias for ‘jQuery’. To fix this add jquery in no conflict mode.

jQuery.noConflict();

Include all your jquery code as below :

(function($) {    

     //jquery code goes here.    

})(jQuery);

See the complete code :

<script type="text/javascript">
    //no conflict jquery
    jQuery.noConflict();

    (function ($) {

        //jquery code goes here.         
        $.localScroll.defaults.axis = 'x';
        $.localScroll();

    })(jQuery);
</script>
<script type="text/javascript">
    (function ($) {

        $(".slidingDiv").hide();
        $(".show_hide").show();

        $('.show_hide').click(function () {

            $(".slidingDiv").slideToggle();
        });

    })(jQuery);
</script>