A fixed div block and scrolling text
- Use these arrows to scroll the text
Using scrollTop to display scrolling text over a fixed
div
ScrollTop attribute of an element is the measurement of the distance in pixels between the top of the element and the highest point of its visible content.
Using a javascript to scroll the text, is an alternative of marquee, wich is a deprecated tag.
It's possible to scroll text and pictures.
ScrollTop attribute of an element is the measurement of the distance in pixels between the top of the element and the highest point of its visible content.
Using a javascript to scroll the text, is an alternative of marquee, wich is a deprecated tag.
It's possible to scroll text and pictures.
Wine Pictures - Discover the Wine Labels
Domaine du Mont d'Or - Grains Nobles
Clos Domaines et Châteaux - La noblesse des Vins Suisses
Chasselas - Swiss Wine
Background is defined with CSS :
background-image: url(URL of picture);
background-position: top center;
background-repeat: no-repeat;
The HTML
- I use one div as container, with backgroud, and a div with the text
- overflow: hidden is needed
<div class="divback" >
<div id="divtxt"
style="width: 240px; height: 440px; overflow: hidden; margin-left: 5px;
font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 1.1em; color: red; background:none; ">
... Some Text ...
</div>
</div>
<div id="divtxt"
style="width: 240px; height: 440px; overflow: hidden; margin-left: 5px;
font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 1.1em; color: red; background:none; ">
... Some Text ...
</div>
</div>
The scrolling - onMouseOver
- I create an anchor, using javascript:void(0) for the link, and 2 events : onMouseOver and onMouseOut
- Anchor for Top
<a style="text-decoration: none;"
href="javascript:void(0);" onMouseOver="scrollDivToTop('divtxt'); window.status='Top'; return true;"
onMouseOut="stop(); window.status=' '; return true;"
class="lkarrow">
href="javascript:void(0);" onMouseOver="scrollDivToTop('divtxt'); window.status='Top'; return true;"
onMouseOut="stop(); window.status=' '; return true;"
class="lkarrow">
- Anchor for Down
<a style="text-decoration: none;"
href="javascript:void(0);" onMouseOver="scrollDivToBottom('divtxt'); window.status='Top'; return true;"
onMouseOut="stop(); window.status=' '; return true;"
class="lkarrow">
href="javascript:void(0);" onMouseOver="scrollDivToBottom('divtxt'); window.status='Top'; return true;"
onMouseOut="stop(); window.status=' '; return true;"
class="lkarrow">
The script
- The 3 functions, scrollDivtoTop, scrollDivtoBottom and stop
<script type="text/javascript">
var t;
var doLoop = true;
function scrollDivToTop(divid)
{
var div = document.getElementById(divid);
if (div.scrollTop>0 && doLoop)
{
div.scrollTop-=3;
t = setTimeout("scrollDivToTop('" + divid + "')", 1);
}
else clearTimeout(t);
}
function scrollDivToBottom(divid)
{
var div = document.getElementById(divid);
if (div.scrollTop<999999999 && doLoop)
{
div.scrollTop+=3;
t = setTimeout("scrollDivToBottom('" + divid + "')", 1);
}
else clearTimeout(t);
}
function stop()
{
doLoop = false;
setTimeout('doLoop = true;', 5);
}
</script>
var t;
var doLoop = true;
function scrollDivToTop(divid)
{
var div = document.getElementById(divid);
if (div.scrollTop>0 && doLoop)
{
div.scrollTop-=3;
t = setTimeout("scrollDivToTop('" + divid + "')", 1);
}
else clearTimeout(t);
}
function scrollDivToBottom(divid)
{
var div = document.getElementById(divid);
if (div.scrollTop<999999999 && doLoop)
{
div.scrollTop+=3;
t = setTimeout("scrollDivToBottom('" + divid + "')", 1);
}
else clearTimeout(t);
}
function stop()
{
doLoop = false;
setTimeout('doLoop = true;', 5);
}
</script>
CSS for class divback - define the background
- Using background-image :
.divback
{
background-image: url(http://YOURSITE/YOURBACKGROUND.jpg);
background-position: top center;
background-repeat: no-repeat;
border: solid 2px #7b84af;
width: 470px;
}
{
background-image: url(http://YOURSITE/YOURBACKGROUND.jpg);
background-position: top center;
background-repeat: no-repeat;
border: solid 2px #7b84af;
width: 470px;
}
A pseudo-class for the link (arrow)
- Change the default a:hover :
a.lkarrow:hover
{
background: #d1dae3;
text-decoration: none;
}
{
background: #d1dae3;
text-decoration: none;
}
Loading the style sheet
- Use a link tag :
<link type="text/css" rel="stylesheet"
href="http://YOURSITE/style_for_scrolling.css">
More Informations
- Fixed Menu with scrollTop
- Use background attachment fixed
- Changing opacity and transparency
- Adding titles for pictures using CSS
One Day - One Label - One Wine
