Author Topic: [JS] Scrollers  (Read 3384 times)

0 Members and 1 Guest are viewing this topic.

Offline p01

  • Atari ST
  • ***
  • Posts: 158
  • Karma: 51
    • View Profile
    • www.p01.org
[JS] Scrollers
« on: September 29, 2007 »
Recently CLANKY asked about scroll texts in JavaScript. As this might be interesting for others, I figured this discussion deserves its own thread so the informations are easy to find.

Quote
The basic idea behind scroll texts using web standards relies in CSS.

First you need a container in non static position ( i.e.: in absolute, relative or fixed ) and overflow:hidden so that it will allow to position and clip the nested content. Which content is in position:absolute; Finally initiate the regular update of the position of the content using a setInterval( functionHandle, delay );

The offsetWidth and offsetLeft properties returns the width and left respectively of an element. Use them to place the content as you wish within its container.

Check out the attachement to see a Scrollers manager ( working in IE, Opera, FireFox and Safari ) able to handle any number of scroll texts with custom types of scroll. Notice it's one out of many ways to do that, also the code can be enhanced to allow certain tags ( e.g. img, strong, em, ... ), user interaction, callback when a certain position is reached, ... Candies, karma, credits and/or  a notice would be appreciated if someone uses this tiny Scrollers manager.  ;)


Hope that helps,
:cow:
« Last Edit: September 30, 2007 by p01 »

Offline Shockwave

  • good/evil
  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 17394
  • Karma: 498
  • evil/good
    • View Profile
    • My Homepage
Re: [JS] Scrollers
« Reply #1 on: September 29, 2007 »
Nicely written code there, thank you for posting it :) K+
Shockwave ^ Codigos
Challenge Trophies Won:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: [JS] Scrollers
« Reply #2 on: September 29, 2007 »
Thanks for posting. Cool code as always. Thumb up !!!
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won: