Search jQuery

jQuery Forum

Combining multiple jQuery plugins (Accordion & Horizontal Scroller)

in Getting Started • 12 years ago

Hi!

I'm new to jQuery and I'm trying to combine the jQuery UI Accordion with the Full size, horizontal scroller demo with easing (the fourth one).

Since I can not provide you more information lets ask a more general question:

How can I combine two jQuery plugins? I tried some var j = jQuery.noConflict(); but that didn't help. I just read, that I have to write in the html head

<script>
    $(function() {
        $( "#accordion" ).accordion();
        $( "#thumbScroller" ).thumbScroller();
    });
</script>

Where can I read more about combining two different scripts? Do you need more information in order to help me?

Thanks!

Ted

Replies(3)

cyberpant..

Re: Combining multiple jQuery plugins (Accordion & Horizontal Scroller)

12 years ago

are you trying to apply both these widgets on the same html element, if not, nothing special is required, it will work as it should normally work.

Ted Mosby

Re: Re: Combining multiple jQuery plugins (Accordion & Horizontal Scroller)

12 years ago

Thanks for your reply. Yes, this is my problem. How do I apply 2 widgets on the same div element. I tried something like <div id="id1 id2">

I'm trying another accordion plugin, which is much more promising. This time I started with the Full size, horizontal scroller demo with easing (the jquery_thumbnail_scroller_horizontal_full.html). Then I just copied the style, script and html parts of this accordion: jQuery: » Expandable Sidebar Menu Screencast into it.

This is my result:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery thumnail scroller</title>
<style type="text/css">
<!--
html,body{height:100%;}
body {margin:0; padding:0; background:#000;}
#outer_container{position:fixed; bottom:0; margin:40px 0; height:170px; padding:0 5px; border-top:1px solid #666; border-bottom:1px solid #666;}
#thumbScroller{position:relative; overflow:hidden;}
#thumbScroller .container{position:relative; left:0;}
#thumbScroller .content{float:left;}
#thumbScroller .content div{margin:10px; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#thumbScroller img{border:5px solid #fff;}
#thumbScroller a{padding:5px;}
-->
</style>
<style>
body { font-family: Arial; font-size: 16px;}
dl { width: 100%; }
dl,dd { margin: 0; }
dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(window).load(function() {
sliderLeft=$('#thumbScroller .container').position().left;
padding=$('#outer_container').css('paddingRight').replace("px", "");
sliderWidth=$(window).width()-padding;
$('#thumbScroller').css('width',sliderWidth);
var totalContent=0;
$('#thumbScroller .content').each(function () {
totalContent+=$(this).innerWidth();
$('#thumbScroller .container').css('width',totalContent);
});
$('#thumbScroller').mousemove(function(e){
if($('#thumbScroller .container').width()>sliderWidth){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
var animSpeed=600; //ease amount
var easeType='easeOutCirc';
if(mouseCoords==destX){
$('#thumbScroller .container').stop();
}
else if(mouseCoords>destX){
//$('#thumbScroller .container').css('left',-thePosA); //without easing
$('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
}
else if(mouseCoords<destX){
//$('#thumbScroller .container').css('left',thePosB); //without easing
$('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
}
}
});
$('#thumbScroller .thumb').each(function () {
$(this).fadeTo(fadeSpeed, 0.4);
});
var fadeSpeed=200;
$('#thumbScroller .thumb').hover(
function(){ //mouse over
$(this).fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
$(this).fadeTo(fadeSpeed, 0.4);
}
);
});
$(window).resize(function() {
//$('#thumbScroller .container').css('left',sliderLeft); //without easing
$('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
$('#thumbScroller').css('width',$(window).width()-padding);
sliderWidth=$(window).width()-padding;
});
</script>
<script src="http://jquery.com/src/jquery.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("dd:not(:first)").hide();
jQuery("dt a").click(function(){
jQuery("dd:visible").slideUp("slow");
jQuery(this).parent().next().slideDown("slow");
return false;
});
});
</script>
</head>
<body>
<dl>
<dt><a href="/">jQuery</a></dt>
<dd>
<ul>
<li><a href="/src/">Download</a></li>
<li><a href="/docs/">Documentation</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</dd>
<dt><a href="/discuss/">Community</a></dt>
<dd>
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div><a href="#"><img src="thumbs/thumb1.jpg" title="The path" alt="The path" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb2.jpg" title="A flower" alt="A flower" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb3.jpg" title="Dusk" alt="Dusk" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb4.jpg" title="A waterfall" alt="A waterfall" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb5.jpg" title="The canyon" alt="The canyon" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb6.jpg" title="The road" alt="The road" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb7.jpg" title="A forest" alt="A forest" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb8.jpg" title="A house" alt="A house" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb9.jpg" title="Paradise" alt="Paradise" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb10.jpg" title="Trees" alt="Trees" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb11.jpg" title="Plant leaves" alt="Plant leaves" class="thumb" /></a></div>
</div>
</div>
</div>
</div>
</dd>
<dt><a href="/dev/">Development</a></dt>
<dd>
<ul>
<li><a href="/src/">Source Code</a></li>
<li><a href="/dev/bugs/">Bug Tracking</a></li>
<li><a href="/dev/recent/">Recent Changes</a></li>
</ul>
</dd>
</dl>
</body>
</html>

I put the thumbscroller html into the second accordionmenu. There are now 2 problems. The thumbscroller doesn't work at all and it has no more width=100%. I set the width of .container to 100% but the thumbs are wrapping after 3 columns. Then I moved the code from $(window).load(function() to jQuery(document).ready(function()after the accordion-part.

Nothing worked yet. Any help would be appreciated.

EDIT
I see I cannot write 2 IDs in a single div-tag. Maybe it was <div class="class1 class2">. I will consider this when going back to my first attempt. But for now I'm trying the second way.