user3406286
user3406286

Reputation: 59

How to make 2 jQuery functions work?

I have 2 jQuery functions on my website: a fotoslider and a Scrollit function. But I can only use one function because the other won't work. It depends on which one I put at the bottom.

I have barely knowledge about jQuery but I need those functions on my site.

The function that is working here is the fotoslider because it's at the bottom.

Html:

<link href="ppgallery/css/ppgallery.css" rel="stylesheet" type="text/css" />
<link href="ppgallery/css/dark-hive/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 
<script type="text/javascript" src="ppgallery/js/ppgallery.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
    $('#gallery').ppGallery();
});

the script file for the Scrollit Function:

$(function(){
  $.scrollIt();
});

$(document).ready(function() {  
    var stickyNavTop = $('#menu').offset().top;  

    var stickyNav = function(){  
        var scrollTop = $(window).scrollTop();  

        if (scrollTop > stickyNavTop) {   
            $('#menu').addClass('sticky');  
        } else {  
            $('#menu').removeClass('sticky');   
        }  
    };  

    stickyNav();  

    $(window).scroll(function() {  
        stickyNav();  
    });  
});  

PS: Fotoslider was a plugin

Upvotes: 1

Views: 68

Answers (1)

Prashobh
Prashobh

Reputation: 9542

Use jquery no-conflict

var $j = jQuery.noConflict();

Now you can use $j instead of $ in your jquery code.

There are always chances of conflict between these javascript libraries.

Upvotes: 1

Related Questions