Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

It has been a while since I presented some unobtrusive (hopefully useful) JavaScript function. Recently I have been working on a project that demanded content scrolling, so instead of reaching out for some heavy unobtrusive solutions, I decided to write my own function. As I was developing it I kept simplifying it so I came down to what I am presenting today - Easy Scroll v1.0, an accessible, unobtrusive content scroller.
I am not using any JS libraries with Easy Scroll. Although I enjoy jQuery a lot, I believe that it is important to code in "regular" JS, just not to forget it :)
So, Easy Scroll is standalone, lightweight script that is very easily applicable.

Take a look at the demo | Download Easy Scroll v1.0

Features

Easy Scroll is capable of scrolling any type of content by using unobtrusive JavaScript. It has up and down scroll options and reset button that places your content in the default position.
It also features double speed. When buttons are rolled over, slow scrolling starts. When buttons are pressed, speed increases.

Ok, let's get it going

To start with Easy Scroll download the script, and link it to your document by placing this line of code inside the head tag:

<script type="text/javascript" src="easyscroll/easyscroll.js"></script>

You'll also need a div with custom id (default is "myContent"). Then you should put some content in it of course :)

<div id="myContent">
	<!--  YOUR CONTENT HERE -->
</div>

Believe it or not, as far as the markup is concerned, that's it!

The script takes it over from here.
It creates another div id="easyscroll" and places your content div inside and takes care of the absolute positioning, scroll buttons and scrolling.

Setting things up

You might want to set the variables in the JavaScript. When you open easyscroll.js you'll notice these variables in config area

var id = "myContent";

This id matches the one you have in your html file for content div. If you wish to change it, you must do it in both html and JavaScript

var nav = ["Scroll Up", "Scroll Down", "Reset"];

Text that appears inside of each scroll button.

var navId = ["btnUp", "btnDown", "btnReset"];

These are optional id's for scroll buttons in case you want to apply some specific CSS for each.

var speed = 5;

Movement speed. The larger the number the faster the scrolling will be.

var height = 200;

Desired height of the Easy Scroll area.

Use css to style the content area. Oh yes, buttons are rendered as unordered list. Use css to style those too :)

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• ani625 on 3 Apr, 2008 wrote:

  Cool article dude!
  And btw, Link updated on delicious.

• cssglobe on 3 Apr, 2008 wrote:

  Thanks ani625 :)

• b0li on 3 Apr, 2008 wrote:

  nice article
  greetings

• kerberoS on 3 Apr, 2008 wrote:

  Great effect :)

• WebTecker on 3 Apr, 2008 wrote:

  Thats a very cool effect Alen.

• cssglobe on 3 Apr, 2008 wrote:

  Thanks guys :)

• Tomas M on 3 Apr, 2008 wrote:

  Hello, that i'm looking for long time! thanks a lot :-)
  can be used for left/top scrolling ?

• cssglobe on 3 Apr, 2008 wrote:

  Thanks Tomas. This version supports up and down, but who knows I might code a left-right scroll soon too.

• Germán on 3 Apr, 2008 wrote:

  Really useful! :) Thank you! ;)

• davidwalsh on 4 Apr, 2008 wrote:

  Great work Alen!

• Steph on 4 Apr, 2008 wrote:

  Gasp! I've been looking for something like this for awhile - I know it's on a few sites, but it was never validated or just didn't have the..best..code.
  
  Thanks Alen!

• Chad Smith on 4 Apr, 2008 wrote:

  I've seen this while looking for a Horizontal Scroller (went with mootools). But this example really seems like something i'd use. thanks!

• Derek on 4 Apr, 2008 wrote:

  I wouldn't call this accessible though - you can't control it using the keyboard.

• cssglobe on 4 Apr, 2008 wrote:

  When I said accessible I meant that content is accessible. That's the important thing. Scrolling things is purely presentational.

• ani625 on 4 Apr, 2008 wrote:

  "Join 3000+ subscribers and receive our content instantly." Therem fixed it!

• cssglobe on 4 Apr, 2008 wrote:

  @ani625: updated ;)

• Roman Lokhov on 5 Apr, 2008 wrote:

  Great work Alen!
  But don't you think that to use offsetHeight and offsetTop is very slow? Especially if the "myContent" have many content (images, flash)?

• webfruits on 6 Apr, 2008 wrote:

  I'm using it on my portfolio... great! I have customized scroll buttons by adding background images. It works perfect, thanks :-)

• cssglobe on 6 Apr, 2008 wrote:

  I checked it out... Looks great! Glad you could find a use for it.

• Philly Dude on 9 Apr, 2008 wrote:

  Sweeeeeeet!!!! Nice, simple and easy to customize.

• emre on 11 Apr, 2008 wrote:

  thanks for article... but I want ask a question,
  how can I replace "graphic" instead of texts...
  I mean; I want add UP and DOWN ARROW to the leftside of my div...
  can I do that with this script?

• cssglobe on 11 Apr, 2008 wrote:

  @emre: sure you can. It is done via css. webfruits in the comments above did that on her site, you might want to check that out. http://www.webfruits.it/

• Alberto on 13 Apr, 2008 wrote:

  It is posible add more than one easyscroll, I mean have several

  with this funtionality.
  Thanks, great job.

• AndreiZorrov on 13 Apr, 2008 wrote:

  Useful!!!! Thank you very much!
  I searched for a very long time

• mexx63 on 17 Apr, 2008 wrote:

  Cool, but about the width? How to make 100% or 90% of the page?
  
  Thanks

• cssglobe on 17 Apr, 2008 wrote:

  @mexx63: that is done with css. In my demo the actual width is defined by the container. You can easily set it to whatever you want.

• Mya on 17 Apr, 2008 wrote:

  Excellent work Alen! I like that you didn't use an existing JS library. this will come in handy for future projects. Thanks for sharing!

• Deborah on 22 Apr, 2008 wrote:

  Awesome! Just what I was looking for! Thank you so much for making this available for all to share... Your work at PixelPusher is terrific.
  dj

• Juvenn on 22 Apr, 2008 wrote:

  Thanks for sharing!

• Krystal on 23 Apr, 2008 wrote:

  This is AWESOME but I can't figure out how to apply this code so it works with up and down arrows. I am a beginner with CSS but haven't been able to figure out how Webfruits made the adjustment on her website. PLEASE HELP ALEN!

• Daddo on 29 Apr, 2008 wrote:

  Great article and thank for sharing.
  I think I'll be using it soon on my sites...
  :-D

• Aaron Mc Adam on 6 May, 2008 wrote:

  Is there a way to make the content scroll itself? and then stop when the mouse hovers over it?

• graham on 7 May, 2008 wrote:

  This is great, so thanks for sharing it.
  However, I'm wondering how to add two blocks of scrolling text at different points on a page. If it uses ids, is this even possible?

• weremoose on 10 May, 2008 wrote:

  Great, simple script... Very usefull. I was searching for a left-right one and I found this one. Well done!

• Pete on 13 May, 2008 wrote:

  Nice work. thanks for sharing it. Looks like I'm not the only one who's after a lefty righty version! I wanted to do a scrolling image gallery where all the pics are the same height and contained within a fixed height (and width) DIV like jordanmakarof.com but without the need for scrollbars.

• Jim on 15 May, 2008 wrote:

  I'm trying to use this script but without the "reset" tab - what do I do if i want to not use that portion of the script?