Here is the following code on my website which is under my < head > tag.
There is a conflict between the jQuery file used for the "Banner Code" and the jQuery used for "Sticky navigation" as depicted below:
<!--Banner Code-->
<script type='text/javascript' src='js/banner/jquery.min.js'></script><!--older version jQuery-->
<script type='text/javascript' src='js/banner/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='js/banner/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/banner/camera.min.js'></script>
<script>
jQuery(document).ready(function() {
jQuery('#camera_wrap_4').camera({
height: 'auto',
loader: 'bar',
pagination: false,
thumbnails: false,
hover: false,
opacityOnGrid: false,
imagePath: 'images/banner'
});
});
</script>
<!-- End of Banner Code-->
<!--Sticky Navigation-->
<script type="text/javascript" src="js/jquery.js"></script><!--NEWER version jQuery-->
<script type="text/javascript" src="js/jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$("#nav").sticky({topSpacing:0});
});
</script>
<!--Sticky Navigation close-->
First of all, you should never need to use 2 different versions of jQuery. Always try to find a version compatible with the plugins you need and|or use the latest version compatible with the browsers you intend to support. If one of the plugins will only work with a very old version of jQuery, (like anything ver 1.43 and below) then you should really consider a different plugin as that one is probably not serviced regularly anymore.
So your head should look more like:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script><!--older version jQuery-->
<script type='text/javascript' src='js/banner/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='js/banner/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/banner/camera.min.js'></script>
<script type="text/javascript" src="js/jquery.sticky.js"></script>
<script>
$(function() {
$('#camera_wrap_4').camera({
height: 'auto',
loader: 'bar',
pagination: false,
thumbnails: false,
hover: false,
opacityOnGrid: false,
imagePath: 'images/banner'
});
$("#nav").sticky({topSpacing:0});
})
</script>
However!
If you absolutely insist on using some old carp, there is a solution.
<script type='text/javascript' src='js/banner/jquery.min.js'></script><!--older version jQuery-->
<script type='text/javascript' src='js/banner/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='js/banner/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/banner/camera.min.js'></script>
<script>
var jqOld = jQuery.noConflict();
jqOld(function() {
jqOld('#camera_wrap_4').camera({
height: 'auto',
loader: 'bar',
pagination: false,
thumbnails: false,
hover: false,
opacityOnGrid: false,
imagePath: 'images/banner'
});
})
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
var jqNew = jQuery.noConflict();
jqNew(function() {
jqNew("#nav").sticky({topSpacing:0});
})
</script>
... i think that's about right ...
Read More Here
And Here
And Here
And Here
http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/
Keep in mind, jQuery is the most supported JS lib on the interwebz! Finding a newer "better" plugin of some old carp your using is never very hard. Generally takes about 5-10 minutes on Google ... if that!
The jquery.min.js file and the jquery.js are different versions? try to remove the jquery.min.js and put jquery.js at the top of the others