jquery mb.scrollable
Scroll your content!
Need to show many elements in constricted space?
1, 2, 3, 15…slide how many box you want with a simple and configurable navigation toolbar.
http://pupunzi.com/#mb.components/mb.scrollable/scrollable.html
download page:
http://mbideasproject.googlecode.com/files/jquery.mb.scrollable.1.5.7.zip
jQuery project page:
http://plugins.jquery.com/project/mbscrollable
documentaion:
http://code.google.com/p/mbideasproject/wiki/mbScrollable
Releases:
1.5.7 actual release: added goToPage() method that can be invoked from an external link pointing to a specific scrollable page.
1.0 first release
here is the js call:
$("#myScroll").mbScrollable({
width:700,
elementsInPage:1,
elementMargin:2,
shadow:"#999 2px 2px 2px",
height:"auto",
controls:"#controls",
slideTimer:600,
autoscroll:true,
scrollTimer:4000
});
here is the code for the dom elements:
<div id="myScroll"> <div style="background-color:#9999ff">1</div> <div style="background-color:#cc9900">2</div> <div style="background-color:#660066">3</div> <div style="background-color:#009966">4</div> <div style="background-color:#6600ff">5</div> <div style="background-color:#9999ff">6</div> <div style="background-color:#33cc00">7</div> <div style="background-color:#cc00cc">8</div> </div>
<div id="controls"> <div class="first">first</div><div class="prev">prev</div> <div class="next">next</div><div class="last">last</div> <div class="pageIndex"></div> <div class="start">start</div><div class="stop">stop</div> </div>
parameters:
width:700
(int) the width of the visible area
dir: “horizontal”
(string) or “vertical”; set the scroll direction of the component.
elementsInPage:3
(int) how many elements should be visible on each slide
elementMargin:2
(int) the space between each element
shadow:”#999 2px 2px 2px”
(string or “false”) the css style for the shadow of each element (doesn’t work in IE)
height:”auto”
(int or “auto”) the height of each element in the scroller
controls:”#controls”
(string) the ID of the controls element
slideTimer:600
(int) the time in milliseconds for the transition effect
autoscroll:true
(boolean) if it has to start scrolling once initialized or not
scrollTimer:4000
(int) the time in milliseconds each screen should stop
nextCallback: function(){}
(function) a callback function on next event
prevCallback: function(){}
(function) a callback function on prev event
Once you give the width of the visible area, the plugin define the with for the single element according with the elementsInPage and the elementMargin parameter;
if the autoscroll parameter is set to true the scrollable stops scrolling once you rollover each element and starts again once you rollout;
The controll tool can be configured as you whant; the complete controller is composed by:
first | prev | pageIndex |next | last | start | stop.
Methods:
- $(myScrollable).goToPage(pageNumber, noAnimation); (from version 1.5.7)
params:
pageNumber: (int) the number of the page you want to get;
noAnimation: (boolean) if the transition should be animated or not.
[...] http://pupunzi.open-lab.com/mb-jquery-components/mb-scrollable [...]
mb.scrollable 1.0 New! « Matteo Bicocchi’s Blog
09/10/2009 at 8:49 pm
[...] mb.scrollable « Matteo Bicocchi’s Blog pupunzi.open-lab.com/mb-jquery-components/mb-scrollable – view page – cached 1, 2, 3, 15…slide how many box you want with a simple and configurable navigation toolbar. — From the page [...]
Twitter Trackbacks for mb.scrollable « Matteo Bicocchi’s Blog [open-lab.com] on Topsy.com
10/10/2009 at 8:37 am
[...] a look at the component page where you can download the script. Possibly related posts: (automatically [...]
jquery.mb.scrollable 1.5 (new release) « Matteo Bicocchi’s Blog
18/10/2009 at 7:21 pm
Spelling, it’s horizontal not orizontal. Looks nice though.
seo newport wales
18/10/2009 at 10:08 pm
very nice work man
banny
21/10/2009 at 7:03 am
Hello,
is it possible that the controls will always below the images which are shown in the scroller?
What I’m thinking about is, if one picture has the height 100px the controls should be shown e.g. at height 110px. If the second picture has the height 300px the controls should be shown e.g. at height 310px.
Thanks for help.
Regards, Rob
Robert
23/10/2009 at 9:14 am
hi i have a problem , when i changed page direction from “ltr” to “rtl” the plugin stopped and no scroll happened
tan tan
02/11/2009 at 5:58 pm
Hi,
I have a problem, when i try to use it at a php page it doesn`t work. Is there a path for it?
Dantes
04/11/2009 at 1:26 pm
Hi Dantes,
The problem can’t be the PHP page; can’t you tell me if you have errors in your debug console?
Did you include all the js file needed (jquery 1.3.2, mbScrollable.js) with the correct path?
Bye,
Matteo
Matteo Bicocchi
05/11/2009 at 12:24 am
Hello,
thank you very much for this very useful plugin. i’m using it for banner rotation, works great when i’m using only images. But flash banners don’t vanish with the plugin. dunno if the fault belongs to swfobject, to my css, or to your plugin.
If you have any assumption, please tell !
FX
05/11/2009 at 1:42 pm
Hi FX,
the solution for this issue is here (jQueryExchange)
Bye,
Matteo
Matteo Bicocchi
05/11/2009 at 2:14 pm
thx for the answer…
here’s a screenshot : http://farm3.static.flickr.com/2567/4077226199_265c2553e5_o.jpg
As you can see, in the third block, first image is smaller, and the swf bigger (should be 198×142). the swf never vanish.
FX
05/11/2009 at 2:42 pm
i looked at jQueryExchange, but have seen nothing more than you told me to do.
two tries :
- wmode with object : nothing better.
- wmode with swfobject : near perfect, swf is invisible, always invisible actually
http://farm3.static.flickr.com/2737/4079344347_7399692995_o.jpg
sorry to disturb.
FX
06/11/2009 at 8:21 am
Hi FX,
I don’t know what’s going wrong with your code, maybe I should see your page code to understand, but here is what should be written in your page to embed an SWF:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="320" HEIGHT="240" id="Yourfilename" ALIGN="">
<PARAM NAME=movie VALUE="Yourfilename.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=bgcolor VALUE=#333399>
<EMBED src="Yourfilename.swf" wmode="transparent" quality=high bgcolor=#333399 WIDTH="320" HEIGHT="240" NAME="Yourfilename" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>
If you are embedding your flash via JS than you have to change the surce code of your JS to add the two new value;
Both EMBED and OBJECT are needed to work in all browsers (I think you can’t see your SWF just because you cut one of the two metods or just break it somhow).
That’s all .
Bye,
Matteo
Matteo Bicocchi
06/11/2009 at 8:46 am
With this object declaration, all works !
http://www.icipro.fr/index.php
Thank you very much !
FX
18/11/2009 at 7:36 am
Hello,
Wanted to thankyou for this very nice jQuery plugins. Just alike all the other MB jQuery Components, it is very well finished and complete.
The problem I found with this plugin was the missing function to call a “page” by index. Therefore we completed the plugin with this missing function, and wanted to share our modifications with others.
So here goes :
We added at line 194 :
goToPage: function(i) {
var el= $(this).get(0);
el.scrollTo=-((el.singleElDim+el.options.elementMargin)*(el.options.elementsInPage*(i-1)));
if(el.isVertical){
if (el.scrollTo<-el.elementsDim+el.options.height)
el.scrollTo=-el.elementsDim+el.options.height;
$(el.mbscrollableStrip).animate({marginTop:el.scrollTo},el.options.slideTimer);
}else{
if (el.scrollTo<-el.elementsDim+el.options.width)
el.scrollTo=-el.elementsDim+el.options.width;
$(el.mbscrollableStrip).animate({marginLeft:el.scrollTo},el.options.slideTimer);
}
el.idx = Math.floor(i);
},
And at line 278 we added :
$.fn.goToPage=$.mbScrollable.goToPage;
Therefore we can call the function goToPage() on our scrollable element, e.g. :
$('#myScroll').goToPage(7)
Hope this can help others, or maybe even be included in futur releases of this jQuery plugin.
Thanks again,
Cyril Christin
F4 Informatique S.A.
F4 Informatique S.A.
09/11/2009 at 3:13 pm
Hi Cyril,
Thnx for your implementation, I’ll include this method for next release.
Bye,
matteo
Matteo Bicocchi
09/11/2009 at 6:54 pm
When is the gotoPage() function be part of the official release? This is a critical function.
themia
14/12/2009 at 2:18 am
Any update on when this gotoPage will be included in the main release? This is a must-have feature to make this script highly usable. Thanks for a great implementation!!
atypical
11/01/2010 at 9:23 pm
Hey,
is it possible to have to two banner rotations on one page? One horizontal and one vertical?
If I do so, there is only one of it working
Can I fix that problem?
Thx,
Rob
Robert
11/11/2009 at 4:39 pm
Hi Robert,
I’ve no problem with tow mb.scrollable in the same page; I post an answer for your possible solution here.
Bye,
matteo
Matteo Bicocchi
11/11/2009 at 8:36 pm
HEy,
I fixed that problem with two instances. Thx.
But cann you have a look to my last question: http://jquery.pupunzi.com/questions/55/ive-problems-with-two-jquery-mb-scrollable-elements-in-a-sigle-page/62#62
In IE7 I see onle the first picture. In IE8 and firefox everything is fine.
Is there any thing I can change in the script that it is working in IE7?
Thx, Rob
Robert
12/11/2009 at 3:54 pm
have a problem in using more than one element on the page.
conflict of the buttons are not disabled correctly.
I’m not using an image as a button can change the image when it becomes disabled
Yuri Basso
11/11/2009 at 7:49 pm
Hi Yuri,
how do you initialize your multiple elements?
Keep in mind that each scrollable should have its own controls element and that each controls element must have a unique ID otherwise there are conflicts.
Take a look at this answer
For images: the best should be using images as background via CSS; the component sets automatically a css class: disabled once the command is unavailable; you can manage the apparence of your image changing the bgnd surce or how you want.
Bye,
Matteo
Matteo Bicocchi
11/11/2009 at 8:44 pm
I solved my problem.
controls.find(“.last”).addClass(“disabled”);
controls.find(“.next”).addClass(“disabled”);
add this line controls.find(“.next”).attr(’src’,'gfx/setaRight.jpg’);
and the other the same logic
thx for answer my question =D
Yuri Basso
12/11/2009 at 1:44 am
Love the plugin, just one question though – do you have to use all divs ? Can I use other elements instead?
Thanks!
Diane
16/11/2009 at 4:38 pm
Hi Diane,
jquery.mb.scrollable needs DIVs to define scrollable elements; you can insert whatever you want inside.
Bye,
Matteo
Matteo Bicocchi
16/11/2009 at 7:39 pm
Cool plugin. One question- once it gets to the end of the elements it loops, but scrolls in the opposite direction. Is there a way to make it keep scrolling in the same direction (forward)?
Jen
23/11/2009 at 10:12 pm
Hi Jen,
Not yet… That’s a feature for next release.
Bye,
Matteo
Matteo Bicocchi
23/11/2009 at 10:26 pm
Hi Matteo,
How do we change the height of the orizontal?
Adam Arnold
27/11/2009 at 12:48 pm
And once the coffee enters I realise the height parameter in the .css example
Thanks
Adam Arnold
27/11/2009 at 12:52 pm
Matteo Bicocchi
28/11/2009 at 11:40 am
Could anybody give me a hint why in IE 7 the horizontal scrolling container is displaying the whole content within the first scroll frame? (All ’s stacked up on each other) Thanks for your help!!
Noah
28/11/2009 at 4:31 am
Hi Noah,
here you can find your answer: http://jquery.pupunzi.com/questions/20/jquery-mb-scrollable-inline-bug-on-internet-explorer-7
bye,
Matteo
Matteo Bicocchi
28/11/2009 at 11:42 am
Thank you! My mind almost cascaded over this issue ;~}
Noah
28/11/2009 at 2:36 pm
Got some problems with this plugin.
I needed to swap banners without any margins in between them. Setting elementMargin to 0 or 1 was completely ignored. The plugin kept inserting a fat margin between the divs.
Also changing dir to horizontal did not produce any effect. It continued to scroll vertically.
outre
01/12/2009 at 2:35 am
Hi Outre,
That sounds really strange… I think you have something wrong in the declaration…
send me how you initialize the scrollable in your page.
Bye,
Matteo
Matteo Bicocchi
01/12/2009 at 7:00 pm
i have problem with thw script i uploaded it to
http://4exvision.com/jquery.mb.scrollable.1.5/demo.html
put i didnt get any thing
can you help me
rabeeh
10/12/2009 at 1:49 am
I think you have some cache problems… I can see the demo perfectly…
Bye
Matteo
Matteo Bicocchi
10/12/2009 at 11:34 am
Hi Matteo,
Nice plugin, just transform your code into the use of joomla banner slider. hope the joomla community can enjoy this Joomla Module.
Hope to see the next release, await for the looping parameter.
Module can be download here at
http://tny.hk/1c
Designer Sandbox
29/12/2009 at 11:53 am
Great work! thnx!
Hope to publish soon the new one.
Bye,
Matteo
Matteo Bicocchi
29/12/2009 at 10:02 pm
Hi Matteo,
thx for this very useful piece of code!!
regarding the goToPage function just two small additions:
1. At the end of the function, do
$(this).mbManageControls();
to update the controls
2. I use the function when loading a new page, then i wish no scroll- animation, so I added:
temp = mbScrollable.options.slideTimer;
mbScrollable.options.slideTimer=0;
at the begin of the function,
mbScrollable.options.slideTimer=temp;
at the end
Bye, Paul
Paul
29/12/2009 at 8:46 pm
Hi Paul,
I’ll implement your improve on next release.
Thnx,
Matteo
Matteo Bicocchi
29/12/2009 at 10:04 pm
Hi Matteo,
Nice pluggin.
In Firefox everything works fine, but with IE7
I have two problem.
1. The line #59 problem…fixed
2. I’m unabled to display the controls horizontally and centered(on the same line). They are displayed vertically (one below the other).
You can see the exact same case in your demo. In FF all controls are on one line, but in IE7 they are on one column!!!!
Any ideas ?
Merci!
Bye, Hugues
Hugues Lavoie
05/01/2010 at 10:54 pm
Hi Hugues,
For controls, they are all defined in the CSS file and their display is controlled independently of the component. You should change the CSS adding “float:left” to all the controls CSS classes: #controls div, #controls1 div{ font-family:sans-serif; margin-top:5px; background:#fff; display:inline-block; *float:left; padding:6px; cursor:pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow:#999 2px 2px 2px; -webkit-box-shadow:#999 2px 2px 2px; }
-from http://jquery.pupunzi.com/questions/20/jquery-mb-scrollable-inline-bug-on-internet-explorer-7 -
hope this can help you,
bye,
Matteo
Matteo Bicocchi
06/01/2010 at 11:15 am
Tkx Matteo.
Yeah, I had already tried this (in conjonction with a table and style text-align:center) but now it was in Firefox that it was f***ed!!! I was trying to avoid having to do a browser type test, but I have no choice. So I were able to work around (with a browser test grrr).
An other issue I added:
pages.html(”);//clear previous pagination
in mbPageIndex: function() just before the loop.
I have a list and when I click an element I fetch its notes (ajax call) to display them under the list. From one click to an other the pagination wasn’t cleared.
It would be a good thing to add this fix in your next release.
Hugues
08/01/2010 at 3:52 pm
[...] get it now! [...]
jQuery.mb.scrollable 1.5.7 « Matteo Bicocchi's Blog
12/01/2010 at 9:43 pm
Dear sir from above discussion its ensure that layout problem has been fixed by adding the float:left to all divs related to the controls.
one thing remains that curve border doesn’t show on IE7 while its curve on others like Mozilla, Goggle chrome etc. thanks for the reply and solution,
Nasir
16/02/2010 at 8:51 pm
Hi Nasir,
As yo probably know, IE doesn’t conform W3C standard either for DOM elements properties and for CSS properties. The round corner feature is realized by a css property defined by W3C CSS3 standard and it’s supported by almost all the browsers except IE; maybe you’ll find an alternative way for IE; there are some workaround on the web.
Bye,
Matteo
Matteo Bicocchi
16/02/2010 at 9:06 pm
Hi,
before I use $(‘#myScroll’).goToPage(whatever)
to display that the ‘whatever’ page, is there a function to get the active pagenumber, so I can return to that original page later?
Thanks
Wil Rikken
19/02/2010 at 1:31 pm
Hi Wil,
there’s no method actually to get the actual page; you can however get it in this way:
$(“YOURSCROLLABLEID”).get(0).idx
Bye,
Matteo
Matteo Bicocchi
22/02/2010 at 9:23 am
Hi Mattheo,
Thanks for the response, I’ve tried it, but no value is returned.
Where do I have to put the: get(0).idx
Can you give me an little example where to put it in the page.
Wil
22/02/2010 at 11:53 am
[...] 1.4 and WiQuery 1. PS: The solution is based on the implementation of “mb.scrollable” (site, demo). [...]
WICKET: Auto sliding panels « Greek Bot
21/02/2010 at 4:12 pm
Matteo thanks.
This all works when staying on the same HTML-page.
I want to save the pagenumber as a session-variable. After doing something else (other HTML-page)and later returning to the ’scrolling’-page I want to display the page on the pagenumber I left.
So I want to save the pagenumber outside the Jquery-tool.
I’ve tried my own variable as a result but I always get ‘undefined’
Sorry for the bad question-description before.
Wil Rikken
23/02/2010 at 12:27 pm
Hi Wil,
than you should store your variable in a cookie to have it cross page…
And this is a little bit more complex.
here are three methods do manage cookies:
mb_setCookie = function(name,value,days) {
if (!days) days=7;
var date = new Date(), expires;
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toGMTString();
document.cookie = name+"="+value+expires+"; path=/";
};
mb_getCookie = function(name) {
var nameEQ = name+ "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
};
mb_removeCookie = function(name) {
mb_setCookie(name,"",-1);
};
You can store the value in a cookie and get it once you are back in the page:
mb_setCookie(“mbScrollableIDX”, $(‘#myScroll’).get(0).idx);
When you enter the page:
var mbScrollableStoredIDX= mb_getCookie("mbScrollableIDX");
if (typeOf mbScrollableStoredIDX != "undefined")
$('#myScroll').goToPage(mbScrollableStoredIDX);
Bye,
Matteo
Matteo Bicocchi
23/02/2010 at 1:26 pm
[...] 1.4 and WiQuery 1. PS: The solution is based on the implementation of “mb.scrollable” (site, demo). [...]
WICKET: Auto sliding panels | Greek Bot
24/02/2010 at 10:06 am
Nice work, Thanks i am going to use this on my vBulletin 4 styles website.. what are the chances of including it within my “FREE” styles releases if i provide you with proper credits in my license agreement ?
Thanks again, i’ll check for a response soon, i understand your busy so just reply when you can or sign up on my site and pm me “ADMIN”
Regards Darren
cod5
28/02/2010 at 3:54 am
sorry to comment again but in CHROME.. the bg & content is not changing even after clicking the control buttons, ive added your above float:left; code and still no luck, Thanks
cod5
28/02/2010 at 4:21 am
Hi Darren,
I’ve no problems with Chrome… do you get any error?
All my components are under MIT GPL livence, you can do whatever you like with them… just provide my credits.
Bye,
Matteo
Matteo Bicocchi
28/02/2010 at 12:30 pm
Hi FX,
did you try to apply the solution I suggested you?
swf object, by default, doesn’t care about the overflow or z-index; but if you set the wmode param to “transparent” and, in the embed, the attribute wmode=”transparent”, the swf embed should behave as all other HTML elements.
Bye,
Matteo
take a look here: jQueryExchange
Matteo Bicocchi
05/11/2009 at 5:59 pm
Hi Robert,
I think that the problem is at line 59 of the script: there’s a commented float:”left” at the end of the line that should be inserted into the css object:
$(this.elements).css({marginRight:this.options.elementMargin, width:this.singleElDim, display:"inline-block",float:"left" });Bye,
Matteo
Matteo Bicocchi
12/11/2009 at 4:26 pm
Hello Matteo,
thx for your message.
That really fixes the problem.
Thank you!
Bye, Robert
Robert
13/11/2009 at 9:54 am
Hi will,
here is an example:
<div class="getIDX" onclick="alert($(‘#myScroll’).get(0).idx);">getIDX</div>
Supposed that your scrollable component ID is “myScroll”:
clicking on the getIDX label should return the actual index page.
You can make your own function that store the actual page index before calling the gotToPage function and than call again the goToPage() passing the stored idx as param:
$.fn.storeAndGo=function (pageNumber){
$(this).get(0).actIDX= $(this).get(0).idx;
$(this).goToPage(pageNumber);
}
Now you can make your own calls to this methods:
<div class="button" onclick="$('#myScroll').storeAndGo(5);">get IDX and go</div><div class="button" onclick="$('#myScroll').goToPage($('#myScroll').get(0).actIDX);">back to previous page</div>
Hope this can help you,
Matteo
Matteo Bicocchi
22/02/2010 at 6:29 pm