Monday, April 28, 2008

Doctorate on jQuery.SerialScroll

Introduction

After replying to a large amount of comments and emails about jQuery.SerialScroll, I decided to comment some more about this plugin, also to publish some snippets, to achieve commonly desired effects or behaviors.
This should save you (and me :)) some time. It might also show you some additions, that you haven't considered.
I'll also try to show some more model calls to the plugin, so you can unattach yourself from those in the demo.

A little bit of theory

Before the snippets, I'll go through the basics, to refresh your mind.
Calls to the plugin
It can be done on two different kind of elements
  • Element to be scrolled: This is what you normally do when you want one single instance of SerialScroll in a page.
    $('#pane').serialScroll({
    //...
    });
    
  • Container: You might want to create many "SerialScrolls" in the page, you don't need to call it many times, just put the option 'target' to work.
    $('div.container').serialScroll({
    //...
    target:'div.pane',
    //...
    });
    
    This will allow you to have many divs with class container, which contain a scrollable div with class pane. They don't need to be divs.
    When doing this, the selectos for the arrows also become relative to the container, instead of absolute.
  • Global call: If by chance, you want to scroll the window, you'll need to use this approach.
    $.serialScroll({
    //...
    });
    
    If, for some reason, you need to retrieve this implicit element, call:
    $.scrollTo.window();
    This will return you the element, don't use window or document.
onBefore
This setting, which is a callback, will empower some snippets, so you better learn about it.
$('div.container').serialScroll({
//...
onBefore:function( e, elem, $pane, $items, pos ){
//...
},
//...
});
Note that:
  • The 'this' is the element that triggered the event.
  • e is the event object.
  • elem is the element we'll be scrolling to.
  • $pane is the element being scrolled.
  • $items is the items collection at this moment.
  • pos is the position of elem in the collection.
  • if it returns false, the event will be ignored.
  • Those arguments with $ are jqueryfied.
The onAfter, only receives 'elem' as the first argument, and the 'this' is the element being scrolled ($pane but not jqueryfied).

The snippets

Now, what you really want, the code required to do all those fancy things, that the plugin doesn't do natively.
One note, all the snippets are wrapped with a document ready and they use symbolic ids. Needless to say, you don't need to copy the ids, or even USE ids.
Only the relevant settings are specified, so you will see "..." reminding that it's incomplete code.
You configure the selectors and the rest of the settings, according to your needs.

  • Use constant auto-scrolling. getnew
  • Hide the arrows when the limits are met. get
  • Stop the auto scrolling on hover. get
  • Scroll from right to left (or bottom to top). get
  • Manipulate the widget using the keyboard. get
  • Generate a pager based on the items. get

Concluding

I hope this helped and saved you some time, I also hope you learnt something new.
I plan to add more snippets as they come up from requests.
If you have any doubt, don't hesitate to ask.

Update 6/25/08
Added the constant scrolling snippet

226 comments:

«Oldest   ‹Older   201 – 226 of 226   Newer›   Newest»
waseem said...

Hi Ariel Flesler am using your serial scroll and its a great Plugin....But i want my images to scroll continuously and stop on mouse hover... Please Help me am finding it difficult..:-(

Unknown said...

How would you get the scroller to stop scrolling content out of the screen from the right. So once content is as far right as it goes. It cant go any further. Therefore no blank space in the slider. My slider is 100% width of page. Any help???

Display Name said...

Is it possible to have two instances of serialScroller on the same page, working off the same setup?

I'm having major issues and can't seem to figure it out.

Any help or direction is appreciated.

Unknown said...

HI,
Sorry for the trouble with this question, but I'm at my wits end trying to make a custom solution.

On the page I'm building I'll have slide shows generated on the fly (depending what the visitor clicks).
So I decided the best would be the call the serialScroll on demand.

Whenever a slide show is created, then the serialscroll is called.

I thought this would be a simple modification to your init script but I'm failing once and again and again.

I put a very simplified version of waht I want to do online. I anyone could take a look at it and give me some suggestions I would really appreciate it.

Note: My modified version of the script is receiving the call, but the target.serialScroll({... function is not doing anything.

Thank you so much for your help!

http://tinyurl.com/49nu73s

Unknown said...

Thank you for the great plugin and examples.

One quick question, how can I find the "active slide"? I want to give the active li slide a class, e.g. .active, how can I do that?
thanks

Unknown said...

Hi Ariel,

I love your Plugin! It's really great and almost what we're searching for. But, how can I do the size of the UL variable?! We have an online-shop and use the seialScroll for our related products. So sometimes there are more products, and sometimes less. So how can we put a variable size to the list and that it catches the last item? And can we also use a MouseOver Effect instead of the OnClick?
Special thanks!
Helena

John Pezzetti said...

I was also having an issue with internet explorer misbehaving on the next and previous buttons...it would skip all the way to the last or first photo when these buttons were clicked. This was true if IE7 and IE8.

I solved by not calling 'next:#element' and 'prev:#element' in the inital serialScroll call but rather by using the trigger on click, like so:

$('#next').click(function(){
$('#slider-wrapper').trigger('next');
});

it now works as expected in Internet Explorer---in case anyone has the same trouble I had.

Majid said...

This seems to be a tough problem. As of posting this comment, no one's been able to figure out why this is happening:
http://stackoverflow.com/questions/5677870/serial-scroller-problem

The question contains code snippet and this is the main issue:

The problem is when it is going to the end of right site it's waiting twice more 10 second before it is return to the beginning.

It looks like scroller counts one more item but I think that the markup and code is correct.

The AQUANAUTS said...

Hi Ariel.. I'm back!! Haha, it's been about 3 years since I was posting for help on your site, but the truth is - I needed your script again and I remembered how helpful and knowledgeable you are AND how clean and relatively easy your script was.

I am in the process of building a wordpress plugin for wordpress galleries and I would love to use your script to help create the effect /sliding.

This is the look I am going for (built in flash):
http://www.justinhackworth.com/#imagegalleries/Weddings/Weddings/4

I am SOOO close right now but I am having a hard time getting the different width elements to center properly. Here is what I have currently. (it's VERY messy)

http://bscdeveloper.com/photo/

The ULTIMATE goal is to have the images that are being scrolled through to be dead center on screen (any resolution monitor of coarse) and to have to two on either side to be faded/transparent.

Any help is, as always, appreciated.

Jamie Salvage said...

Is there a way to speed up the cycle when it reaches the end/beginning?

stefmikhail said...

Love the plugin, and it's working great. But I have one problem that I'm hoping someone can help me with.

Specifically, I'm using the 'paginator' demo as well as the 'hide arrows' demo. Both work, but the problem is that if you click the page number in the 'paginator' that corresponds to the current page, the hidden button shows briefly, and then hides.

What I'm hoping is if someone can grab the 'paginator' code, and append something to ensure that if the current page number is clicked, nothing happens.

The logic makes sense to me, but I'm not apt enough with javascipt to write it myself.

Thanks!

wouter said...

Hi Ariel,

Thanks for putting a lot of time and effort into this plug-in and the support for it.

However I have a problem with it. When using a single call that targets multiple slideshows, I am unable to use the prev/next settings, as they will target all slideshows.

Any way around that (except from calling serialScroll on every slideshow seperatly)?

wouter said...

Nevermind, found a way of doing it!

I wanted to be able to use $(this)/this, to have dynamicly defined prev/next items, but when you use:

$('.class').serialScroll();

You can not use $(this)/this inside the set-up. Instead you'll have to use:

$('.class').each(function(){
$(this).serialScroll();
});

Luca said...

I change

$pane.bind('notify.serialScroll', function(e, elem)

to

$pane.bind('notify.serialScroll', function(e, elem){// let serialScroll know that the index changed externally
var i = index(elem);
if( i > -1 )
active = i;
if( auto && ( ( (i == 0) && ( previous == items.length-1 ) ) || ( ( i == items.length-1 ) && ( previous == 0 ) ) ) ) {
clear();
timer = setTimeout(n, settings.interval + ( items.length - 1 ) * settings.duration);
}
previous = v;
});

for sync timing when you go from the last to the first content and vice versa.

Remember to add a global variable known as previous initiate to -1.

It's right? Other solution?

Bye.

Anonymous said...

That seems to be quite confusing while working with the call function in JQuery.Ur blog was interesting with the simple steps explanation.
web design company

Anonymous said...

That seems to be quite confusing while working with the call function in JQuery.Ur blog was interesting with the simple steps explanation.
web design company

Antonio said...

Hi, I have a long text inside a div with the attribute overflow: hidden.
I'm using serialScroll .2.2 to scroll from paragraph to paragraph. I'd like to be able to use the mouse wheel to scroll my text. How can I do that?

Alek said...

Hi Ariel,

Thanks so much for an amazing bit of code!

My only problem is with IE (of course). It doesn't cycle automatically and the left and right buttons do nothing. I've added "position: relative" to the containing divs as I know that is important with IE, but this seems like a jQuery problem. Here is the error report:

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.1)
Timestamp: Fri, 18 Nov 2011 19:01:01 UTC

Message: 'jQuery' is undefined
Line: 11
Char: 2
Code: 0
URI: http://www.bluesheepstudios.com/clients/early/js/jquery.scrollTo-1.4.2-min.js

Message: Object doesn't support this property or method
Line: 10
Char: 1420
Code: 0
URI: http://www.bluesheepstudios.com/clients/early/js/jquery.serialScroll-1.2.2-min.js

Message: Object doesn't support this property or method
Line: 1
Char: 1
Code: 0
URI: http://www.bluesheepstudios.com/clients/early/js/slider.js

URL is here: http://www.bluesheepstudios.com/clients/early/attorneys.html

Can you please help?

Alek said...

Sorry, that URL seems to be working now.

However this one (http://www.bluesheepstudios.com/clients/early/index.html) is not working and bringing up an error on both IE 7 and 8.

HTML5 validates. I checked that first to make sure their weren't any blatant HTML errors on my part.

Michal Rusina said...

hi, is it possible to attach an action to next & previous "buttons" if theyre inactive (previous if we are on the first element and nexti if we are on the last element?

onBefore does not work in these cases...

Nikola said...

I am trying to use your slideshow option for a vertical slide but i cannot seem to figure out how. Since i am not very good at this i just used your demo file, init file and js and css files and worked from your working demo. But no matter how i manipulated the main js or the init it did not scroll vertically. Any tips?

Thank you!

Patrick said...

Hello Ariel,

I've been using the serialScroll to create a slideshow which is extending beyond the viewport.

Though i have come across two problems i hope you could help me with.

First problem
The designer want's each of the images to be horizontally centered of the window when clicked upon. This was easy to achive when all the images was of the same width, by using the offset setting. However, most of the images do not share the same width and the problem is to get the correct offset to center the image which is clicked on. I've tried something as "user clicked on image, calculate that image's width and divide it by two (and alot of different calculations)". This has sadly not worked for me. So my questions is, how can i solve this?

Second problem
The offset needs to be updated upon window resized. I tried with something you suggested some other person, which was to unbind serialscroller and then to run a new serialscroll with the updated settings.

My code for the second problem is:

$(window).bind("resize", function() {

$('.single-wrapper').find('*').andSelf()
.unbind('.serialScroll');

leftMargin = $("#header-wrap").offset().left;

$('.single-wrapper').serialScroll--> with new settings
});

What have i've done wrong?

Hope that you can solve this for me.

Thanks,
Patrick

Stakabo said...

Hey Ariel,

Thank you so much for this plugin. Very nice and easy to use.

On a project i'm currently working on, I notice something and i'm wondering if it's a bug or normal behaviour.

I have a page with multiple pane that I hide and show. ( $(…).hide(),$(…).show() )
I notice that once you hide a pane, when you make it visible again, the scroll position is reseted to it's original value.

I made this example on jsfiddle.net :
http://jsfiddle.net/H6uKq/

If you have the slideshow scroll to any position, click the hide button and click again to show it, it's the first item that show. it did not retain is position.

Is it normal or unexpected behaviour ?
Also, would you know any fix around this ?

Thank a lot for your help !
And again, this is a very nice plugin !

belovah said...

Is there any way to get jQuery.SerialScroll and jScrollpane working together?

Fabian said...

Hi Ariel, I need to ask you if it is possible to add and remove items, and refresh SerialScroll on runtime. Thanks for everything. Greetings.

Le passant said...

Hi,

I noticed that when scrolling back from bottom to top, it's done in one run. The drawback is that the events are not triggered until reaching the top, and also there's no way to make a pause on each item as 'interval' is only taken into account between each scrolling step. So I modified the script as follows :

- Replaced
'else pos = limit - n - 1;'
with
'else {
step = -step;
pos = pos + step + step;
}'

- Replaced
'e.data += active;'
with
'if (step < 0) {
e.data = active - e.data;
} else {
e.data += active; }'

I don't know whether it will always work and would deserve to be integrated within serialScroll, but it perfectly fit my needs.

«Oldest ‹Older   201 – 226 of 226   Newer› Newest»