Personal Daantje on 24 Dec 2006 12:56 am
SimpleHorizontalScroll
A simple scroll written in javascript. Works in MSIE and Mozilla based browsers. It’s the same effect as a marquee tag in MSIE, only this script is cross browser. No rocket science here.
LICENSE:
LGPL (http://www.gnu.org/licenses/lgpl.txt)
SUPPORT:
Just mail.
DONATE:
Please support this project by paypal donations, (my email is my paypal address)
Help me develop this and other projects. Donate to the good cause.
DOWNLOAD:
Download and untar the file (tar -zxvf SimpleHorizontalScroll.tgz), upload it and point your browser to one of the examples. Windows users can use WinRAR to decompress the file.
- Download file: SimpleHorizontalScroll.tgz
- Last update: 24 Dec 2006 00:13:15
- Current version: 0.2
EXAMPLE:
This example is also included in the package.
lets scroll this, right here..
25 Responses to “SimpleHorizontalScroll”
Leave a Reply
You must be logged in to post a comment.
on 13 Mar 2007 at 12:45 am 1.agus nursyamsah said …
Plaese give me opportunity to try your script
on 13 Mar 2007 at 12:52 am 2.Daantje said …
Just download the tgz file, and decompress it with winrar or stuffit expander and run the example html file in your browser…
on 05 Apr 2007 at 3:00 pm 3.Alex said …
Cool stuff, right what I was looking for. But would it be hard to implement a function to let it stop when it is hovered by the cursor?
on 23 Apr 2007 at 2:59 pm 4.Daniel said …
How can I limit the appearance so that text only appears on one single line … and not to get the multi-lines when the width is smaller than the space needed for the text?
on 23 Apr 2007 at 3:14 pm 5.Daantje said …
Just set the stuff in your css for the two div elements of the scroll…
#scroll {
display:inline;
width:200px;
height:21px;
}
#scrollme {
font-size:10px;
}
somthing like that…
on 13 Jun 2007 at 5:52 am 6.Ben said …
Nice script, shame that IE doesn’t play nice and has the scrolling item visible the whole time (i.e. it’s not masked to the “scroll” area)
Any idea of what the issue might be?
on 12 Sep 2007 at 3:40 am 7.Kyle said …
Yeah, works quite well in Safari and Firefox but breaks down in IE/Win. Any ideas?
on 12 Sep 2007 at 10:19 am 8.Daantje said …
It could be the doc type of the html document? I do not know? Do you get errors?
on 22 Sep 2007 at 11:25 am 9.Billy said …
Is there anyway to make this start on mouse over and stop on mouse off, instead of on page load? Awesome script thank you for it.
on 23 Sep 2007 at 10:14 pm 10.Daantje said …
That should be simple…
Change the line:
window.onload = function(){
into:
function startScroll(){
Now you can do:
onMouseOver=”startScroll();”
onMouseOut=”clearTimeout(scrllTmr);”
done ;)
on 15 Mar 2008 at 1:35 pm 11.Topaz said …
This works with all popular browsers, it’s a completely different script but it stops on hover.
scrolling text or images
on 29 Aug 2008 at 1:52 pm 12.james said …
Is there any way of speeding up the scroller?
on 03 Oct 2008 at 11:11 pm 13.Gihef said …
Hi,
Nice simple and easy way to replace a .
But, how can I make the “wait and do next� different?
There’s a waiting time before it launches or it comes back again.
How can I change that?
I would like to make a “How to” to explain how to use your work to french users.
++
Sorry for my special Englih…
I tried this
Simple scroll v0.1
h1 { /* a solution to a previous question here */
width : 200px;
background-color : #eee;
}
Lets scroll this right here
with
/**
* Simple Horizontal Scroll v0.1
* By: me@daantje.nl
* last update: Sun Dec 24 00:13:19 CET 2006
*
* Documentation: Copy & paste
* License: LGPL
* Support: some.
*/
var scrllTmr;
window.onload = function(){
//set style
document.getElementById(’scroll’).style.overflow = ‘hidden’;
document.getElementById(’scrollme’).style.float = ‘left’;
document.getElementById(’scrollme’).style.position = ‘relative’;
//get canvas
cw = parseInt(document.getElementById(’scroll’).offsetWidth);
w = parseInt(document.getElementById(’scrollme’).offsetWidth);
// alert(’cw=’ + cw + ‘ - w=’ + w);
//start scroll
lft = cw + w;
document.getElementById(’scrollme’).style.left = lft + “px”;
scrollStep(cw,w,lft);
}
function scrollStep(cw,w,lft){
//calc and do step
if(lft == w * -1)
lft = cw + w;
document.getElementById(’scrollme’).style.left = lft + “px”;
document.getElementById(’scrollme’).innerHTML = lft + “px”;
//wait and do next…
if(scrllTmr)
clearTimeout(scrllTmr);
scrllTmr = setTimeout(’scrollStep(cw,w,’ + (lft - 2) + ‘)’,10);
document.getElementById(’tmr’).innerHTML = scrllTmr;
}
How comes that the “scrllTmr” does not change?
Thank you.
on 03 Oct 2008 at 11:28 pm 14.Gihef said …
Sorry,
My message was not in a valid format.
You can find the whole text in tis file
http://dl.free.fr/getfile.pl?file=/ligtYfuL
http://dl.free.fr/rligtYfuL/post.txt.zip [.txt zipped - 1.4ko]
on 04 Oct 2008 at 5:10 pm 15.stance said …
Thanks for the script.
Ben said:
“Shame that IE doesn’t play nice and has the scrolling item visible the whole time (i.e. it’s not masked to the “scrollâ€? area) Any idea of what the issue might be?”
Just set all the inside divs’ positions to relative, and it will work fine with IE either.
on 09 Jul 2009 at 6:23 am 16.Psykosen said …
Hey not that i don’t like the work you pyt in to this but why use so menny lines of code when this dos the trik too
Hi There!
///////// STYLE CSS
.scroll {
position: absolute; margin-left: 50%; margin-top: 200px; left:-100px;
background: #EEE url(some_back_G.png) no-repeat bottom left;}
#scroller {
font-size: 17px;
}
just saying byt hey cood codeing ;-)
Regards
psykosen in DK
on 09 Jul 2009 at 6:27 am 17.Psykosen said …
sorry for that the code dosn’t show but
//
//
Hi There!
//
//
///////// STYLE CSS
.scroll {
position: absolute; margin-left: 50%; margin-top: 200px; left:-100px;
background: #EEE url(some_back_G.png) no-repeat bottom left;}
#scroller {
font-size: 17px;
}
Regards
psykosen in DK
on 09 Jul 2009 at 6:30 am 18.Psykosen said …
arg!!!! ****** this system why!!!!!!!!!!
use marquee with id \scroller\ in site a div with class \scroll\
on 23 Sep 2009 at 9:23 am 19.Ron said …
Dah!
The compressed file ain’t opening with my winzip
on 25 Sep 2009 at 12:58 am 20.Daantje said …
USE WINRAR!!!!! or a real OS. Dah!
on 29 Sep 2009 at 2:40 pm 21.Huzefa said …
Hi,
Thanks for simple way
But, how can I do it fast, There’s a waiting time before it launches or it comes back again.
How can I change that?
Huzefa
on 29 Sep 2009 at 2:45 pm 22.Daantje said …
The scollable starts at left:-100px; make that value lower or higher to tweak.
on 29 Sep 2009 at 2:49 pm 23.Daantje said …
@Psykosen W3c doesn’t support “marquee”…
on 24 Oct 2009 at 1:58 pm 24.simirnov said …
Hi Daantje ,
Nice javascript work! But it has one short-coming! It should stop on mouseover event and start scrolling on mouseout event!
can you tell me how to do this in this code?
Secondly, it take a lot of time in beginning the second loop! When the text starts its first animation and exits the stage, in starting the second time animation, there is big interval or time!
can this interval be reduced in timespan and make it seamless looped animation?
Please help!
Thanks!
Bye!
on 25 Oct 2009 at 11:46 am 25.Daantje said …
On mouseover, just kill the timer and on mouseout start it again. onmouseover{clearTimeout(scrllTmr);}
The next loop comes after the scroll pane (scrollme) object is completely to the left. So when ’scrollme’ is a width of 100000px it can be a log time to start see it again. You can debug by giving it a border, you can see what happens.
This little script is just to let you see how it works, you’ll need to tweak it to your needs.