Ultimate JavaScript Slider and Scroller

6
May

Ultimate JavaScript Slider and Scroller

Posted by Michael in JavaScript, XHTML

This versatile and lightweight JavaScript clocks in at less than 3.5kb unpacked. The above example is one of four scenarios I have demonstrated on the demo page.

To setup a scroll/slide area create a container with the following CSS properties…

position:relative; overflow:hidden; height:XXXpx;

Inside the scroll area container create another div that will house your actual content. It needs the positioned absolutely within the previous div. Each sliding or scrolling area on the page needs to have a unique ID for this div.

position:absolute;

Inside the content div you can need to create a section for each area of content, be it 1 or 50. For each section after the “prefix-” numerate the order from 1 onwards. The prefix (ie section, newssection, imgsection, etc) needs to be unique to the current sliding/scrolling container’s sections.

<div id="section-1" class="section"></div>

You can call functions to incrementally scroll up or down, scroll to a particular section and initiate autoscroll/cancel the autoscroll. Take a look at the source code for examples. You might also consider dynamically adding some currently static CSS properties such as overflow:hidden and the height to allow for better degradation without JavaScript support.

This script has been tested working in IE6/IE7, Firefox, Opera and Safari. Please report all bugs to michael@leigeber.com. This code is free for both personal and commercial projects.

Click here for the demo.

Click here to download the source.

3 Diggs

28 Responses

[...] Interesting approach… Published in Spotlight | Tags: CSS | Browse the Archives That’s all. Want more info? Inspiration?Subscribe to the Gallery, the full RSS feed or get it via Email. miloIIIIVII is a graphic and Web designer based in Munich, who works with clients to create exciting and cutting edge web design [...]

Scroller and Slider | milo on 07 May 2008 at 2:55 am

Ultimate is not the proper word.
It should degrade a lot better with javascript turned off to deserve that word.
You should use javascript to set some css attribute.

Grab on 07 May 2008 at 7:26 am

@Grab - Per my post “You might also consider dynamically adding some currently static CSS properties such as overflow:hidden and the height to allow for better degradation without JavaScript support.”

Michael on 07 May 2008 at 7:49 am

[...] Очень интересно выглядит. Не буду расписывать, а просто дам ссылку. [...]

Блокнот » Blog Archive » JavaScript: Скролер и Слайдер on 07 May 2008 at 7:58 am

Thanks Michael, this is definitely something i am going to use on my site.

nice post

Phil on 07 May 2008 at 4:37 pm

[...] Источник: Блог Майкла Лейгебера. [...]

Универсальный слайдер | АяксЛайн.ру on 07 May 2008 at 4:56 pm

[...] 18)Ultimate JavaScript Scroller and Slider- This versatile and lightweight JavaScript makes it easy to scroll text blocks, create slideshows, slide between content, create tickers and more. [...]

30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars on 07 May 2008 at 5:34 pm

[...] it easy to scroll text blocks, create slideshows, slide between content, create tickers and more.http://www.leigeber.com/2008/05/ultimate-javascript-scroller-and-slider/Free-Javascripts.com - 100s of free scriptsA database listing 100s of free javascripts that you may [...]

javascripts on 09 May 2008 at 5:19 pm

[...] Ultimate JavaScript Scroller and Slider - Web Development Blog [...]

JSPT - テキストnoスライド on 09 May 2008 at 7:43 pm

[...] 18)Ultimate JavaScript Scroller and Slider- 这种多用途的和轻量级的JavaScript可以很容易滚动文本块，制作幻灯片，投影片之间的内容，代号和创造更多。 [...]

30个 Ajax/Javscript 滑动门, 滚动栏和滚动条技术 | 帕兰映像 on 16 May 2008 at 4:50 am

thanx Michael. this is very useful clean and easy to use…. i wonder if it can be configurable like a loop… i mean. the after the last item loads the content again without scrolling up to the begining. it will be nice!

fullmental on 27 May 2008 at 11:33 am

@fullmetal - It could be and I might specifically create a script for that functionality before too long. The current script could be modified to update the DOM dynamically to create the continuous loop effect. Shoot me an email if you need the script soon and I will help you work it out. michael@leigeber.com

Michael on 27 May 2008 at 11:47 am

[...] Contenido deslizante. [...]

JavaScript sin frameworks / acualicio.us on 01 Jun 2008 at 11:57 pm

can this script be configured to autoplay the slideshow when the web page loads? i tried putting

onload=”autoScroll(’imgslider’,'imgsection’,5,true)”

on the <body> tag..
there’s an error..

any idea how to go about getting this right?

glove on 20 Jun 2008 at 9:28 pm

@glove - Sure, on the demo page the first example is doing just that. If you are still having a problem email me a link and I will take a look.

Michael on 22 Jun 2008 at 9:50 am

hi michael, great script!! I use it on http://www.martin-franssen.de/de/klienten/case-studies.php for displaying a scrollable list of news entries. everything’s fine exept a strange behaviour using the Internet Explorer 6: if you are scrolling using the two icons on the right side the text is going to be bolded od blurred… any suggestions?

bolleone on 24 Jun 2008 at 3:40 am

Would it be possible to load the content via an XML script? That would make this really, really useful, not to mention easy to use.

Aditya on 26 Jul 2008 at 12:05 am

very nice script…
i started with preparation to use it on my test web site then i notice that it has a very poor quality of display on IE7 (it distorts text therefore its difficult to read)
its that possible to fix in some of the next versions?
thx!

mario on 03 Aug 2008 at 7:57 am

@bolleone - I just tested in IE6 and it looks good to me. Shoot me an email if you are still having problems.

@Aditya - Sure that could be done. You would just need an onload event that parses the XML and builds out the markup to the page. Shouldn’t be difficult.

@mario - I don’t know how I missed that before, I definitely see what you are referring to. Once you start scrolling the distortion kicks in. I will look into this asap and post an update.

Michael on 03 Aug 2008 at 8:14 am

That looks really great. Nicely done.
I’m going to try and integrate it into a site of mine.

Thanks for the freebie

Stefson on 08 Aug 2008 at 2:53 am

I’m testing this to include on a website but on ie6 and ie7 on scroll the text gets a little unreadable and color turns to black.

The solution that I found is setting font-family: verdana; inside .slider i think that the browser don’t reconize some fonts after the javascript effect, like sans-serif and otyhers.

.slider
{
font-family: verdana;
}

I hope this helps some guys.

Jim on 08 Aug 2008 at 11:40 am

Oh this is a nice small script. I haven’t looked at code in probably 4 years and wanted to do a small site where I needed to keep some text in a scrollbox to keep the display height down. Stumbled on this from somewhere and decided why not give it a crack since I couldn’t do it in straight CSS. Started pulling it apart and moved all the elements around after looking at the markup instead of just keeping the up/down at the top of the box. Also ended giving the scroll speed a boost since on the mobile safari version it just scrolled too slow. Desktop safari it’s fine so it’s probably just related the the processor clock of the phone/touch unit.
Should stick a donation link up I’d kick in a buck or two if I eventually use it on a production site.

Shawn on 16 Aug 2008 at 1:52 am

I was wondering if you could create a horizontal version of the news ticker too?

Thanks!

Paul Vincemike on 19 Aug 2008 at 9:50 am

Thank you for sharing your code Michael!
@bolleone, @mario, @Jim: I’ve encountered same problem as yours. I think the problem is in the style.filter = ‘alpha(opacity=, in javascript code. Probably ie6 has a different syntax for setting opacity.
Infact, commenting those lines in javascript, the problem disappears, but opacity effect too!
I’ll try to solve the bug and post the solution if found.

Emanuele on 21 Aug 2008 at 4:36 pm

I noticed also that the problem is only present if you have ClearType enabled (http://www.microsoft.com/typography/cleartype/tuner/step1.aspx)

Emanuele on 21 Aug 2008 at 4:55 pm

@Paul - Will add it to the very long overdue to to-do list. Thanks.

@Emanuele - Still need to look into the issue but I figured as much. There may not be a resolution besides removing the opacity effect altogether.

Michael on 24 Aug 2008 at 8:55 pm

Hi Michael,
thank you for posting your Code

@emanuele: in ie6 an ie7 i have the same problem with those ugly fonts. If the font-weight is set to “bold” in CSS, the text turns very ugly (sorry, i’m no native english-speeker, and don’t know the right word, ugly sounds hard, but I just don’t know a better one) when i start the scrollContent function.

Commenting the lines of “div.style.opacity” and “div.style.filter” in scrollContent function doesn’t work for me …
Has anyone an idea how to get the bold text fine for ie6 & 7?

Stefanie on 26 Aug 2008 at 2:13 am

I found a workaround for the ClearType bug (ie6 & ie7): just put a background color to slidercontent css class (for example: .newsslidercontent {position: absolute; background: #eef5f6; } ).

Thanks to: jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html

Emanuele on 01 Sep 2008 at 10:11 am

Trackback URI | Comments RSS

Ultimate JavaScript Slider and Scroller

28 Responses

Leave a Reply