Sourcecode -  01.01.2005 - Version 1.1: 11.08.2009
A homepage needs a scroller, I thought and was looking for a solution. The internet produced some available solutions ... but
they were either to expensive or too big, too complex, the code to complicated. So, I created one on my own - and it was not
that complicated after all!
After various attempts and intensive research work in the global net I did not find any useful scroller sources.
Either too complex, too unflexible, too complicated source or too limited scope of browsers ...
I came to the conclusion: Let's do it yourself!
The solution needs to be very simple - I am not an expert JavaScript™ - and should execute on most of the
latest browser versions. Ah, as a side requirement, the scroller should be able to move all possible and impossible content
- ideally HTML elements. For version 1.1, I added an option to stop the scrolling when the mouse moves into the scrolling area.
What happens during the scrolling? Well, it's quite simple: You simply need to make the browser move part of the content one or two lines in defined time intervals - ready!
Addendum -- Version 1.1
A Google search for JavaScript™ based scrollers produced a discussion thread where people were discussing the source of a
scroller - it turned out to be my scroller source. People were complaining about the scroller not stopping when the mouse moves
into the scrolling area.
Well, thinking a bit about this requirement produced a nice addition to my scroller - implemented in version 1.1!
How does this work? First, you need to tell the browser which part of the screen shall be moved. The following HTML example shows this quite good:
<html>
<header>
<script src="./scroller-js.js" type="text/javascript"></script>
</header>
<body onLoad="javascript:initScroller()">
<hr>
<h1>scroller-js - version 1.1</h1>
<hr>
<br>
Now, the scroller stops scrolling if the mouse enters the
scroll container. It also starts when the mouse moves out again.
<br>
<br>
<div id="ScrollerContainer"
onMouseOver="javascript:stopScroller()"
onMouseOut="javascript:startScroller()"
style="border-width:thin;
border-style:solid;
position:relative;
width:203;
height:180;
overflow:hidden">
<div id="ScrollerText"
style="display:none;
position:absolute;
left:0px;
top:0px;
width:100%;">
<font size="-2" face="Verdana">
<b>This is a scroller, provided by</b>
<img src="./maretzke_de.jpg">
</font>
</div>
</div>
<br>
The original source code is provided by Michael Maretzke.<br>
The code does not contain any copyright constraints.<br>
Please use and distribute it whenever and for whatever<br>
reasons you want to.<br>
<br>
If you want to contact me - please visit my website
<a href="http://www.maretzke.com/impressum/">
http://www.maretzke.com</a><br>
<br>
<b>-- scroller.js -- version 1.1 -- 20090811<br></b>
</body>
</html> |
First of all the header includes the JavaScript™ source. This script contains the code that moves the screen. The loading process of the page invokdes the function "initScroller()" and initializes the scroller (later more on the JavaScript™ source). Following some CSS. The first DIV tag defines the "ScrollerContainer". The container defines the area where the scroller moves its content. The next DIV tag named "ScrollerText" defines the content to scroll. Everything included in the last DIV tag will be moved. Ready!
The CSS attributes for "ScrollerContainer" and their meaning:
- "border-width:thin" - a thin frame. Allowed are numerical values or "thin", "medium", "thick"
- "border-style:solid" - a solid frame. Valid values are "none", "double", "solid" and some more
- "position:relative" - the positioning of further elements inside the container shall be relative to the container's point of origin
- "width:203" - the width of the container - and therewith the scroller
- "height:180" - the hight of the container - and therewith the visible area of the scroller
- "overflow:hidden" - everything not inside the container is not visisble
Especially, the attributes "width", "height" and "border-width" are parameters to play with - otherwise every scroller will look the same.
What happens in the JavaScript™ code?
/*
The original source code is provided by Michael Maretzke.
The code does not contain any copyright constraints.
Please use and distribute it whenever and for whatever
reasons you want to.
If you want to contact me - please visit my website http://www.maretzke.com
-- scroller.js -- version 1.1 -- 20090811
*/
var speed = 75; // the smaller the faster
var vertical = -2; // positive values == from top to bottom
// negative values == from bottom to top
var size_y = 182;
var y = size_y;
var scroller = null;
function scroll() {
if ((-y) > ((document.getElementById('ScrollerText').offsetHeight)))
y = size_y;
document.getElementById("ScrollerText").style.top = (y+=vertical);
document.getElementById("ScrollerText").style.display = "block";
}
function initScroller() {
scroller = setInterval("scroll()", speed);
}
function stopScroller() {
if (scroller != null) {
clearInterval(scroller);
scroller = null;
}
}
function startScroller() {
initScroller();
}
|
As mentioned already above the function "initScroller()" is called during the loading process of the HTML page. "initScroller()" invokes the method "setInterval()" to install a timer. The timer invokes regularly the method "scroll()". The time unit is milliseconds. In the code example above the function "scroll()" will be invoked every 75ms.
What happens inside "scroll()"? Well, a counter "y" is incremented by the value "vertical" and modifies the position of "ScrollerText". Why the check for "-y"? Well, "ScrollerText" shall move from the bottom of "ScrollerContainer" to the top and should disapear slowly into the sky. The zero line (y=0) is the top of "ScrollerContainer".
"-y" is compared with the height of "ScrollerText" ("size_y"). If the scroller is no longer visible it should appear again from the bottom ... therefore the counter needs to be reset to start.
The remainder of the method sets the upper position of "ScrollerText" and the way it is displayed.
Copy the sources from this page or download them ...
|
