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.
v. 1.7.0
What’s new in v. 1.7.0:
Introduced two more callbacks:
- loadCallback: that is invoked once the component is loaded
- changePageCallback: that is invoked each time a page is changed.
Cleaned up the code:
- all the methods that changes the actual page refer to the “gotoPage” one.
Spelling, it’s horizontal not orizontal. Looks nice though.
he is italian. who cares bout is spellin. im irish and i aint able 2 spell. why dont u try replying to him in italian numb nuts.
THIS IS A SAVAGE BIT OF JQUERY, IL DEFO BE TRYING TO FIT ALL THESE MB.EXTRUDER PARTS INTO MY SITE.
Forza Italia, thanks for reminding us of your beautiful country, greets an Argentine who speaks Spanish and congratulates you on your work
Thnx horacioepeldeh but unfortunatly we still have Berlusconi here; Everything will be better whe he’ll fly away.
very nice work man
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
hi i have a problem , when i changed page direction from “ltr” to “rtl” the plugin stopped and no scroll happened
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?
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
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 !
Hi FX,
the solution for this issue is here (jQueryExchange)
Bye,
Matteo
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.
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
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.
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
With this object declaration, all works !
http://www.icipro.fr/index.php
Thank you very much !
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.
Hi Cyril,
Thnx for your implementation, I’ll include this method for next release.
Bye,
matteo
When is the gotoPage() function be part of the official release? This is a critical function.
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!!
i have implemented this but seems to stop the scroller, do i have to add the call function to initiate the scroller
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
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
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
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
Hello Matteo,
thx for your message.
That really fixes the problem.
Thank you!
Bye, Robert
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
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
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
Love the plugin, just one question though – do you have to use all divs ? Can I use other elements instead?
Thanks!
Hi Diane,
jquery.mb.scrollable needs DIVs to define scrollable elements; you can insert whatever you want inside.
Bye,
Matteo
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)?
Hi Jen,
Not yet… That’s a feature for next release.
Bye,
Matteo
Hey Matteo,
Did you menage to make this possible (always forward scrolling)?
Love your script btw!
Regards,
Edi
Hi Edi,
Actually, to let the component scroll infinitly I should completly change the code of the script. I know that this is the top feature request for it and hope to do this change soon.
Subscribe to my blog to keep informed.
Bye,
Matteo
Hi Matteo,
How do we change the height of the orizontal?
And once the coffee enters I realise the height parameter in the .css example
Thanks
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!!
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
Thank you! My mind almost cascaded over this issue ;~}
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.
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
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
I think you have some cache problems… I can see the demo perfectly…
Bye
Matteo
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
Great work! thnx!
Hope to publish soon the new one.
Bye,
Matteo
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
Hi Paul,
I’ll implement your improve on next release.
Thnx,
Matteo
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
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
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.
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,
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
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
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
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.
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 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.
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
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
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
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
i will use the color from the style for other elements.
how i do it.
thx
HI
Thanks for the nice component. Its working perfectly
Is it possible to display the images in 3 row * 2 column display
Pls advice
Gopi
Hi, great script but I’ve a problem when I use it vertical on a non static page.
On a static page everyting’s fine
When I code the same for a page with elements generated through PHP the first “slide” is ok but the second slide doesn’t display anything. scrollEl div’s are in the source code but aren’t displayed correctly they stay invisible
HI,
i see you solved your problem, but I don’t understand what was going on your page… Are you sure your HTML was well formatted?
Bye,
Matteo
Hello
Nice work here.
It works fine with static content.
Is it working with dynamic content ?
I Try to create pages with a SQL REQUEST.
like this :
titre?>.
soustitre?>.
Here I try to create a new page after ten resulsts then 20 then 30 …
The html code resulting is fine but everything appears in the first page on IE. in the second page on chrome (the first page works well). The others pages are not created in the index.
anyone can help ?
Hi Ludo,
Did you try to compare the HTML produced with the static one you have in the demo to see if something is going wrong?
As the fact you should reproduce the static content dinamically and there should be no difference in the mb.scrollable behavior…
Do you have a public page where I can see the produced code?
Bye,
Matteo
OK I’ve found out.
Fortunately this is not a weird static / dynamic problem.
an em tag was not closed in the request result. Dirty database…
Many thanks fot this script. after some modification in the javascript code it fits perfectly my needs.
heya i submitted a question quite some time back concerning how to speed up my twilight eclipse site’s load time seeing that we utilized the same theme at the time and someone left a comment responding to it on my website days ago – if that was you I just wanted to say cheers, and if it was not you then i’m sorry to bother you, but cheers anyway!
Hello.
I use this fine plugin for 1 month. Everything works fine.
I wondered if I can change the height of each page ?
to make it clear I would like to fit the height of each page with the content of the page.
height : ‘auto’ seems to put a fixed height based on the taller content.
best regards
Is it possible to separate the controls?
I’m replacing a mootools script in my site with mb.scrollable. In my site I have a “controls” div above the content area that contains prev and next buttons. Below the content area I have another controls div (called controlsExtra) that contains the clickable page numbers (in my script they are titles).
I’ve been goofing with mb.scrollable to force the links into the lower controls div, but I’m at a loss. In options I’ve created a new controlExtra variable and I try to tie it to the links, but I don’t know how. I’m new to using jquery and everything I change makes no effect to what I’m trying to do. It’s very frustrating.
Any help would be appreciated!
For the record, this scroller is much better, lighter and faster the mootools script I modified. I just need to split the controls above and below.
Hi Sam,
mb.scrollable controls can be placed wherever you need;
to obtain your needs just wrap everithing inside a DIV with an ID and set as “controls” property your DIV id (f.e.: controls:”#controls”).
The component will search inside the defined HTML element the controls and if finded it’ll initialize them.
Let me know If you need more help.
Bye,
Matteo
Thanks for your reply Matteo, and thanks for the great plugin.
What I’m trying to do is have essentially 2 controls divs. One above the scrollable content and one below.
Like you said here – controls:”#controls”, I have that, plus I’ve added controlsExtra:”#controlsExtra” and I’m trying to force the numbered links into the #ControlsExtra, while “prev” and “next” remains in the original #controls div. I’m not using the goto, start or stop.
Does that make sense?
Thank you for your time!
Just wrap everything with one div “#controls” and put prev and next on the top and pageIndex on the bottom of your scroller area.
Yuo don’t need to have controlExtra.
<div id="controls">
<div class="first">first</div><div class="prev">prev</div>
<div class="next">next</div><div class="last">last</div>
<div id="myScroll">
<div class="scrollEl" style="background-color:#9999ff">1</div>
<div class="scrollEl" style="background-color:#cc9900">2</div>
<div class="scrollEl" style="background-color:#660066">3</div>
</div>
<div class="pageIndex"></div>
</div>
But If you want to have two control places as you wrote just add both IDs comma separated in the “controls” property: controls:”#controls, #ControlsExtra”.
<div id="controlsExtra">
<div class="pageIndex"></div>
</div>
<div id="myScroll">
<div class="scrollEl" style="background-color:#9999ff">1</div>
<div class="scrollEl" style="background-color:#cc9900">2</div>
<div class="scrollEl" style="background-color:#660066">3</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>
Bye,
Matteo
I couldn’t thread any more replies to my question, so I’m adding another.
So thanks! And that’s why you get paid the big bucks! I do appreciate your time. I have yet to try it, but I’m sure it will be easier than what I was doing before. Take care!
I haven’t tried yet but i’m looking forward to giving it a try!
I just wanted to say your web site is one of the nicely laid out, most inspirational I’ve come across in quite a while. Thx!
Thx for the plugin.
Just a question. Is there a simple way to initialize the slideshow at an other position (start with the 3rd slide for example) ?
Hi,
yes, you can call the goToPage function just after the component initialization:
$('#myScroll').goToPage(3,false);bye,
Matteo
Thx for the answer, that’s perfect !
I added 2 new options : startCallback and endCallback, as your prevCallback and nextCallback.
I use the control in a ASP.NET UserControl and I had troubles with Ajax.NET. The scrollable control was skipped any time there was an Ajax.NET refresh… So I have to initialize the scrollable control each time and apply the goToPage function for retrieving the right slide ^^
Easy with your control after I found the trick in Ajax.NET for calling a script when there is a partial load of the page.
Can anybody tell how should i implement it with database using asp.net and sql server.
Plz rply.
thank you.
Hi John,
Your question is quite generic…
What are your needs?
I’ve no .NET culture, I m a JAVA developer, but anything you want to realize should be a loop on your data, fill the HTML template, initialize your scrollable…
Bye,
Matteo
Don’t want to flood and I hope that my use of tags is right ^^, but I used that with succes in .NET
C# :
————————————————————–
public string AdresseSlider = string.Empty; // class attribute
...
// my HTML pattern
string item =
@"
{0}/{1}the HTML you want here !
";
foreach (AdresseLivraison adr in Adresses.AdresseLivraison)
{
AdresseSlider += string.Format(item, count++, total);
}
CSS :
————————————————————–
// some CSS, maybe not what you need, but it was correct for me
div.adr_pager ul.icons { margin: 0px 0px 2px 0px; padding: 0px; } div.adr_pager ul.icons li { margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none; } div.adr_pager ul.icons span.ui-icon { float: left; margin: 0 4px; }Javascript I needed for jquery buttons and the slideshow :
————————————————————–
function slider_initialize() {
try {
function select(liste, action) {
if (liste != null && liste.length > 0) {
for (var i = 0, n = liste.length; i < n; i++) {
if (liste[i].Selected) {
adr_index = i + 1;
liste[i].Selected = false;
}
}
switch (action) {
case "<<":
adr_index = 1;
break;
case "":
adr_index++;
adr_index = Math.min(liste.length, adr_index);
break;
case ">>":
adr_index = liste.length;
break;
}
liste[adr_index - 1].Selected = true;
}
return liste;
}
$(".myScroll").mbScrollable({
width: 200,
elementsInPage: 1,
elementMargin: 0,
shadow: false,
height: "auto",
controls: "#controls",
slideTimer: 600,
autoscroll: false,
scrollTimer: 2000,
startCallback: function() {
$("#panier-adresses > input").each(function(adr_index, element) {
var adresses = JSON.parse(element.value);
element.value = JSON.stringify(select(adresses, "< input").each(function(adr_index, element) {
var adresses = JSON.parse(element.value);
element.value = JSON.stringify(select(adresses, " input").each(function(adr_index, element) {
var adresses = JSON.parse(element.value);
element.value = JSON.stringify(select(adresses, ">"));
});
},
endCallback: function() {
$("#panier-adresses > input").each(function(adr_index, element) {
var adresses = JSON.parse(element.value);
element.value = JSON.stringify(select(adresses, ">>"));
});
}
});
$(".myScroll").goToPage(adr_index, true);
}
catch (ex) {
}
}
HTML : the slideshow
————————————————————–
didn’t work for the HTML code, maybe with tag
start
previous
next
last
Is there any way to make it so it stays readable if you increase the text-size? Possibly use relative values instead of pixels? When I increase the text size on my site, the boxes start to overlap and become unreadable.
Hi,
No, it’s not possible to have relative values because the components needs to know exactly the width and the height of each element to work.
Bye,
Matteo
Hi, Matteo!
Is it possible to have a link (url) to each picture? That way, if you click on the picture in the center, It launches to the url.
Many thanks!
Marcos
Hi Marcos,
of course yo can have links on picture inside the scrollable, just wrap your image inside an anchor tag with an URL and it should work…
Bye,
Matteo
is the scrollable compatible controls with IE 6,7?
please check the following link
http://www.jamaluke.com/pages/category.aspx?catid=82ff3ffb-9e42-45bf-8608-0f5a00b30d14
using IE 6.
it takes from me hours to debug my website style, but when i used scrollable control, the whole web style sheet and the scrollable style is corrupted on IE6.
any solution please
Hi Firas,
I’m sorry, but I’m not testing mb.components on IE6; it’s not supported anymore. IE6 has so many bugs on DOM visualization and it would be really complicate to adapt behaviors of my javascript componets to it.
Bye,
Matteo
Ok thanks a lot.
We use this for a site tested in IE6 & IE7 and it works perfectly… perhaps the problem is with CSS and not the component
Hi Matteo,
Did you happen to add the feature that will allow the slides to rotate back to the first. Like, 1,2,3,4 – 1,2,3,4 or is it only still available to scroll back 1,2,3,4 – 4,3,2,1
I read a comment you made to someone back in 2009 regarding adding this feature but didn’t see it in your release notes anywhere.
This is a great plugin!
Is it possible to switch to a fade effect?
Is it easy ti emplement?
Yes Please a fade option? how to setup and use? or do We need a different tool?
The autoscroll sometimes bounces back and forth like a ping-pong ball.
Matteo,
Thank you very much for sharing your knowledge and genius with us.
Take care and keep being yourself !
Best regards,
Guby
Hello Matteo.
I love using your plug-ins and am looking forward to your next release of Scrollable with the ability to loop back to the first element from the last. Do you have any idea when this release will be made available? I have a current project that needs this function.
Thanks for all your efforts.
Ben
Hello I have a problem with my script … I have 3 sliders in my website Top50.mariuscirciu.com
But i have a problem in Chrome, when I push the next botton, the next slide with 3 elements are padding 1 px to the left, and everytime I push next my current slide with 3 elements go 1px to the left.
Please help me, what is the problem?
In IE and FF there is no bug, but in Chrome….
I’m looking back for your reply,
Thank you
Sorry my mistake, i foun the error, it was a problem with css(padding-left) and elementmargin,i putted both and didn’t work well together, sorry for this and for my bad english
Hi Matteo,
thanks for your excellent plugins.
To reduce the size of .js file I’m using Google Closure Compiler ( http://closure-compiler.appspot.com/home ), however, mbScrollable.js doesn’t get through with error message:
SC_PARSE_ERROR: Parse error. invalid property id at line 65 character 140
…rollable.singleElDim, display:”inline-block”, float:”left” }); //float:”left”
Could you give it a try? Or do you have other tools to minimize the file size?
Thanks.
Stephan
Hi Stephan,
this happens because the float word at line 65 is a reserved word; just wrap it into quotes and it works:
...,"float":"left" })Bye,
Matteo
Hi Matteo,
thanks. It works with simple optimization.
Just wondering, could you please comment on the request of a earlier poster:
<<>>
I would like to see that too.
Cheers,
Stephan
<> should be:
Did you happen to add the feature that will allow the slides to rotate back to the first. Like, 1,2,3,4 – 1,2,3,4 or is it only still available to scroll back 1,2,3,4 – 4,3,2,1
Hi Matteo.
I am also wondering if the function to rotate back to the first slide will be included in a forthcoming release. That would be a very welcome addition to this terrific plug-in and make it more useful for my project.
Thanks for your contributions.
Hi Matteo,
as long as I’m using static DIV’s for the content to be scrolled mb.scrollable works fine. However, if I add the DIV’s dynamically within the jQuery.getJSON() callback function I get weird behaviors. The content of the first DIV is shown properly, when auto scrolling to the second just have of the content is shown and afterward just blanks until the scrolling come again to the first DIV.
Any ideas?
Thanks.
Stephan
Okay, got it. I needed to substitute some surrounding JSF tags with DIV tags. Now it is working as expected.
There is an issue while opening mb.scrollable (Horizontal) in IE8, all the control buttons (links) appears vertically.
Hi Chiranjib,
You can easly fix it via CSS, adding a float: left property on the controls CSS classes.
Bye,
Matteo
Hi
If I’m using dir:”vertical” and height:”auto”, I’m always getting back all elements at once and not only the number of elements defined in “elementsInPage”.
Is it not possible to use height:”auto” for vertical srcoller?
Thanks
Andrea
Hi Andrea,
If you use the vertical option that you need a defined height to let the mb.scrollable works; as if you use it horizontally you need a defined width… I’m sorry.
Matteo
Hello,
I LOVE this component (we made a donation a few months ago), and I’ve used it a few times with great success!
However, I have encountered a strange issue, and have been troubleshooting it for a while now, and I was wondering if you may know what is causing this?
I am working on a bookshelf here: http://fpac.ca/index.php/en/publications-2011
Everything is fine at first, but once you have clicked ‘Next’ to item 11 or 12… it starts to go a little crazy. When it is auto-playing, it starts to speed up faster, until the items are flying by the screen!
Any help/advice would be greatly appreciated.
Thank-you,
I have discovered that this is happening because of using jquery-1.4.4.min.js instead of jquery/1.3/jquery.min.js!
I have changed the js version on the link above. A non-working version can be seen here – http://fpac.ca/index.php/en/publications-2011-2 …after a while it will speed up really fast.
Is there something that can be changed to make it co-operate?
Thanks!
Hi Mila,
That sounds strange… As You can see on the demo file, the included jquery is the latest 1.* that means it is the 1.5 version, and it works great.
Where can I see this strange behavior? The actal page “http://fpac.ca/index.php/en/publications-2011″ seams to work fine now…
Do you have any error advice on the console?
Bye,
Matteo
Hello Mila,
Did you figure out the solution to your problem ?
I am facing the same problem. After sometime the slider starts moving faster.
Thanks for any help.
Hi Praveen,
I just changed the version of jQuery I was using and it was fine
-Mila
Hi Matteo,
fist of all, thank you very much for your terrific work with mbScrollable. Unfortunately, I am having some problems implementing it with a website.
I’d like to implement a position display, showing which element out of how many the user is currently viewing. I need to put this inbetween the controls for scrolling to the prev and next element, something like this:
prev
x/y
next
Obviously, the position display shall go into the div tag with the id positiondisplay.
Putting together the string itself seems reasonably simple, it’s just:
$('#myScroll').get(0).idx+'/'+$('#myScroll').get(0).totalPagesbut placing the string there is proving more troublesome. I have attempted using document.getElementById(‘positiondisplay’).value = …, but for some reason the browser always says document.getElementById(… is null. Could this be due to the div tag being nested within the control-class?
Perhaps you can help me out with this or suggest an alternative, perhaps more elegant solution.
Thank you!
Sorry for the improper code display above. I hope this works better:
<div id="controls">
<div class="prev">prev</div>
<div id="positiondisplay">x/y</div>
<div class="next">next</div>
</div>
Hi Benedikt,
I just updated the plugin to v. 1.7.0 with some new feature that could help you.
Anyway you can solve your issue by using the two callbacks available (in the 1.7.0 you have 4 callbacks) to update position display as follow:
$("#myScroll").mbScrollable({
width:700,
elementsInPage:1,
elementMargin:2,
shadow:"#999 2px 2px 2px",
height:"auto",
controls:"#controls",
slideTimer:600,
autoscroll:true,
scrollTimer:4000,
nextCallback:function(){
var positiondisplay= $('#myScroll').get(0).idx+'/'+$('#myScroll').get(0).totalPages;
$('#controls .positiondisplay').html(positiondisplay);
},
prevCallback:function(){
var positiondisplay= $('#myScroll').get(0).idx+'/'+$('#myScroll').get(0).totalPages;
$('#controls .positiondisplay').html(positiondisplay);
}
});
Hope this can help you,
Matteo
Hi Matteo,
yes and did help, thank you. There is however, still one odd bug. The display shows incorrect values. When I am viewing the first element, it says 2/4, when I am viewing the last one, it says 3/4, then when I scroll back one element., it says 4/4, and so forth…
Any clue as to what may be causing this incorrect behaviour?
Thank you very much!
Hey. I know this is a bit late, sorry, but does anyone know how to set up random scrolls?
I get an extra “page” in IE.
I have 9 images.. .but 10 numbered buttons in controller and a blank page at the end.
works fine in FF, Safari, chrome.
Hi,
You are the man!
All components here are just wonderfull. And could not believe in my eyes.
Thnks for the great work, we really appreciated.
Best regards,
Great plug-in! I have one issue though that I’m trying to figure out. I’ve replaced the “prev” and “next” text links with PNG images. In my implemenation I have 9 images total and I’m showing 3 at a time. When my page loads the controls blink 9 times. Each time I use the controls to scroll the content, the controls blink 3 times.
Not sure why this would be happening. Do you have any idea what might be causing the blinking?
I found the function that was causing the blinking. In msScrollable.js I modified the function mbManageControls to replace controls.fadeIn() with controls.show().
mbManageControls: function(){
var mbScrollable=$(this).get(0);
var controls=$(mbScrollable.options.controls);
if (mbScrollable.elements.size()<=mbScrollable.options.elementsInPage){
controls.hide();
}else{
//controls.fadeIn();
controls.show();
}
This fixed the blinking controls.
Hi bart,
I’ll fix this with the next public release,
Thnx for your contribute.
Bye,
Matteo
Hi, I seem to be having a prolem when using your scroller.
When I get to certain numbers, mostly above 8, it does scroll to the next or previous one, but it first scrolls all the way to 1 and then to the correct div. This is strange as it works in the demo, but in mine it doesn’t. I copied your demo code and I have removed all controls except the pageindex section.
Just for in case it may have an affect, it is running in a frameset and is nested in multiple tables and divs in the body.
Hello,
I would like to know if there’s a possible way to have an infinite scroll for the content.
I tried replacing ” $(mbScrollable).mbPrevPage(true); ” by ” $(mbScrollable).mbFirstPage(true); ” but the scroll still goes back. I would like to continue scrolling on the same direction.
Hi Anthony,
Actually the component doesn’t allow infinite scrolling; once it reach the lat element it start scroll back.
Hope this could be a next feature.
Bye,
Matteo
Hi
It is possible to make a circular rotation? After the last page then goes to the first one. How can I achieve it?
Thank’s!
very nice…soothing animation..like it too much..thank u 4 sharing..have a nice day.
Really appreciate your work, have the following problem: Works great when I test on Visual Web Developer but when I upload to hosting server it does not work. I canot figure out what the issue is. Any advice would be appreciated. Thanks
Not to worry… after a bit of trial and error, moved the script function below the content div and it works great, except the page of pages div, which is not an issue for me. By the way this seems to work for asp content pages.
Dear Matteo.
I just passed by and want to leave a small notice about my appreciation of your work.
Your most patient and friendly style to answer all questions is exceptional and outstanding on the internet.
You are really “a case sui generis”.
Moltissime grazie.
noRiddle
P.S. there must be people who don’t combine a “thank you” with a question
Please help me for my problem:
I would like it to have infinite scroll meaning when it reaches the end it starts over at the the first panel.
Thanks,
D.
Hi Duc,
This is one of the issue for the next release.
Bye,
Matteo
Hi Matteo,
When have the next release created?
Please let me know.
Thanks,
D.
I really don’t know.
Bye,
Matteo
Little problem with Chrome, Jquery 1.6 and vertical scrollable. When change tab, the scollable speed is really quick.
But really nice job!!! Congratulation!!!
Hi Gregory,
I’ll see to fix this issue.
Bye,
Matteo
Hi Matteo!
I recently implemented this as a vertical slider on a governement site, which for some reason insist on being IE6 compatible. In testing no problem was found, however once in production a layout issue was found and nailed down to one line of code.
I think the issue stems form only taking in one dimension, but basically when all assembled the width of the vertical slider was being forced too large by , the width is set in this case on line 78:
var mbscrollableStrip=$(“”).css({width:mbScrollable.elementsDim, position:”relative”});
To kludge a fix quickly, I changed this to:
var mbscrollableStrip=$(“”).css({width:220.elementsDim, position:”relative”});
Previously the width was being set to 2910px -far to width and made other page elements trip up over it.
By setting it to 220px (the width of the rest of the container) it is behaving correctly.
I understand if you do not want to support IE6 per se, but this appears to me to be a bug, which you may want to fix -I am in my jQuery infancy, so please be gentle if I am wrong
Many thanks,
Peter.
Thnx Peter,
I’ll take a look.
I would like to ask you if this could work with blog articles too.
What i want to do is this:
In a blogger.com blog, i only want to display one article on the main page and if users want to view older articles, they press a button that scrolls down one article at a time.
Of course, all articles have a fixed height so they display propperly one at a time.
Could this be done? And if it can’t be done with the mb.scrollable, is it possible using a different method?
Hi Bogdan,
I’ve no experience with blogger.com and I don’t know How you could customize its functionalities; anyway if it allow javascript inclusion I can suppose it is possible…
Bye,
Matteo
My scroller seems to be working fine in Firefox 4 and IE 8 + 9 but doesn’t work in Google Chrome or Safari. It can be viewed at http://goo.gl/BsVWi
Hi Alan,
Your page does not works on webkit browsers because of the “align=”center” propertyyou have on almost all the DOM elements…
Generally, if you want to have a centered alignment on the x axis you should add the style propery “margin:auto” to an outer DIV element with a position relative; don’t need all this nested centered element as in your page.
Bye,
Matteo
Just remove this and it will work.
Hi Matteo
I have a question regarding the controls, if I’m using “autoscroll” the START and STOP entries are always flickering if I hover over the listed elements.
Why does it react on a hover/mouse over on the listed elements?
Is it possible to disable this behaviour?
I would like to have only a hover or mouse over reaction if the user hovers over the controls div and the entries START/STOP.
Thanks a lot for your help!
Well, I like this jquery scroller and it seems to work but I have a big issue. the scroller, every once in a while, I dont know when how or why, just bounces back and forth when auto scroll is on. it disregards the value for slideTimer and jsut goes through them all. I do not understand it!
any ideas why this could be happening?
Hi Matteo! Thanks so much for the wonderful plugin, it looks like it will help a ton! I’m currently trying to get a vertical scroller working on my site. Everything works fine except it seems that the text will not align correctly inside the box. I set the height of the vertical parameter as 400, but it looks like only half of that is showing up. It then spills over into the next page. I had a look around in the css and tried messing with everything to do with the height but nothing would change it. Is there something in the actual .js file that I need to edit as well? Thanks again!
It looks like this:
http://imgur.com/vK6v6
http://imgur.com/vFsk4
This is what I have now, CSS file unchanged.
$(“#myScroll1″).mbScrollable({
dir:”vertical”,
width:647,
height:400,
elementsInPage:1,
elementMargin:6,
shadow:”#999 2px 2px 2px”,
controls:”#controls1″,
slideTimer:600,
autoscroll:false,
scrollTimer:6000
});
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
2
Hi, again congrats for this amazing pluging. Just one question, what does the elementMargin value? because no matter the value I give it doesnt change anything. Is it for separating the different divs?If not, is there a way in which I could add more separation between the different divs?
Thx
Mateo,
Wanted to thank you for this and all the other awesome plugins you have created!!
Sincerely,
Jimmy
Thank you Jimmy
Bye,
Matteo
hello and thanks
is it possible to call by id name other than numbers (by example and gotopage(toto)?
thanks
le tophe
hey,
i am trying to use the mb.scrollable with a custom menu and the menu go to a certain page on the scrolled elements, is this possible?
Hi Matheo,
I would like to use the alphabet instead of the numbers in the navigation. Is it possible? Could you help me doing this, please? I would appreciate very much your help.
Thanks in advance
Hi Ines,
If you want to use a different way of navigation instead of numbers you need do build manually your navigation control.
As you can see in the demo there’s a function that let you get a specific index: $(‘#myScroll’).goToPage([pageNumber]); you can print out your letters and add this function pointing to the specific index to the click event of each element.
For example:
<div id="alphabetIdx"><span onclick="$('#myScroll').goToPage(1)">A</span><span onclick="$('#myScroll').goToPage(2)">B</span>...</div>Hope this can help you.
Bye,
Matteo
You need a forum with all these comments to figure out what’s going on. I am trying to implement this but I can’t seem to get the CSS all lined up.
Hi,
There’s the jQueryExchange Q&A at http://jquery.pupunzi.com if you want.
What is your problem exactly?
Bye,
M
Matteo: ante todo, muchas gracias por tu amabilidad hacia con todas tus respuestas que he leído detenidamente y por sobre todo, tu buen ojo para el diseño, creatividad para el diseño y amabilidad por no guardártelo para vos solo. Te comento que quise incluir el Scrollable en mi sitio, y al no funcionar, decidí armar una página exclusivamente con el Scrollable para poder detectar los errores, pero aun así no consigo saber qué es lo que no funciona. Veo la botonera (siempre hab lando del scroll horizontal, ya que la parte del vertical la saqué), pero no las fotos que están todas escaladas al mismo tamaño, ni un .png que subí a modo de marco de las fotos. La dirección es http://www.deltaredes.com.ar/pruebaindex010.html Muchas gracias. Gustavo
Hi,
As I can see you loose something in the script:
$("#myScroll").mbScrollable({width:"343",
elementsInPage:1,
elementMargin:2,
shadow:"#999 2px 2px 2px",
height:"257",
controls:"#controls",
slideTimer:600,
autoscroll:true,
scrollTimer:4000
});
setTimeout(function(){$("#wrapper").fadeIn();},2000);
});
should be:
$(function(){$("#myScroll").mbScrollable({
width:"343",
elementsInPage:1,
elementMargin:2,
shadow:"#999 2px 2px 2px",
height:"257",
controls:"#controls",
slideTimer:600,
autoscroll:true,
scrollTimer:4000
});
setTimeout(function(){$("#wrapper").fadeIn();},2000);
});
Bye,
Matteo
Matteo: Thanks a lot for your time. I will send you the link when the page is done.
Regards and have a great 2012
Gustavo Guido