Scrolling content with scrollTop. Usea fixed div, and scroll text and picture hover the background of the div. CSS tutorial for beginners. Tips and Tricks for Webmasters.
Running ...


A fixed div block and scrolling text


  • Use these arrows to scroll the text
UpDown


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.

Wine Pictures - Discover the Wine Labels

Wine Labels

Domaine du Mont d'Or - Grains Nobles

Domaine du Mont d'Or - Vignoble d'exception

Clos Domaines et Châteaux - La noblesse des Vins Suisses

Clos Domaines et Châteaux - La noblesse des vins suisses

Chasselas - Swiss Wine

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>


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">


  • 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">


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>



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;

}


A pseudo-class for the link (arrow)


  • Change the default a:hover :


a.lkarrow:hover
{
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



One Day - One Label - One Wine