Response title
This is preview!
Move this topic
JQuery Clash !!!!! ;(
in Using jQuery Plugins
•
10 years ago
Hello All,
I added plugin for sliding banner (JQuery) and also accordion (JQuery UI) on the same page. Now, when the page loads the banner does'nt work ...!!! and if accordion is removed the the banner works fine ..!!!
Any help is highly appreciated...!!! plz help me out of this :(
1
Replies(5)
Re: JQuery Clash !!!!! ;(
10 years ago
are you loading jquery.js twice? if so, only load it once and make sure plugins load after jquery does
post a link to page that fails with both
Re: Re: JQuery Clash !!!!! ;(
10 years ago
Thank you very much fr reply.
1 The Banner home Page
2 The Main index File
3 accordion file
PLEASE HELP ME TO COMBINE THE BANNER AND ACCORDION TO INDEX FILE !!! Thanks Again !
BANNER
</div>
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
____________________
(function($) {
var NivoSlider = function(element, options){
//Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
//Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
randAnim: '',
running: false,
paused: false,
stop: false
};
//Get this slider
var slider = $(element);
slider.data('nivo:vars', vars);
slider.css('position','relative');
slider.addClass('nivoSlider');
//Find our slider children
var kids = slider.children();
kids.each(function() {
var child = $(this);
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
//Get img width & height
var childWidth = child.width();
if(childWidth == 0) childWidth = child.attr('width');
var childHeight = child.height();
if(childHeight == 0) childHeight = child.attr('height');
//Resize the slider
if(childWidth > slider.width()){
slider.width(childWidth);
}
if(childHeight > slider.height()){
slider.height(childHeight);
}
if(link != ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
//Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
vars.currentSlide = settings.startSlide;
}
//Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
______________________________________
ACCORDION
<title>Accordian JQuery</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
event: "mouseover"
});
});
</script>
<link href="jquery.ui.all.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#accordion div p img {
vertical-align: top;
}
-->
</style>
</head>
__________________________________________
INDEX FILE
<?php include_once("demo.html");?>
<?php include_once("footer.html");?>
Leave a comment on charlietfl's reply
Re: JQuery Clash !!!!! ;(
10 years ago
like I suggested you are loading jQuery twice, remove the second instance, it will wipe out the plugins that are attached to first instance
Leave a comment on charlietfl's reply
Re: JQuery Clash !!!!! ;(
10 years ago
jquery-1.6.2.min.js and jquery-1.6.1.min.js are the same thing with slight version differences. Loading both is causing you the problem
Leave a comment on charlietfl's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to vpurohit's question
Statistics
- 5 Replies
- 3202 Views
- 0 Followers