CSS Scroller

[redice]

hi,

Is it possible to create a manual scroller with images using CSS?

Redice

[Vallim]

Hi Redice,

You can use the following Css and script to make an image scroll.

Css

<style type="text/css">
#marqueecontainer
{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid black;
padding: 2px;
padding-left: 4px;
}

</style>

Script

<script type="text/javascript">
var delayTime=1000
var marqueeSpeed=3
var pauseTime=1
var copySpeed=marqueeSpeed
var pauseSpeed=(pauseTime==0)? copySpeed: 0
var actualHeight=''

function ScrollMarquee()
{
if (parseInt(crossMarquee.style.top)>(actualHeight*(-1)+8))
crossMarquee.style.top=parseInt(crossMarquee.style.top)-copySpeed+"px"
else
crossMarquee.style.top=parseInt(marqueeheight)+8+"px"
}

function InitializeMarquee()
{
crossMarquee=document.getElementById("vmarquee")
crossMarquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualHeight=crossMarquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1)
{
crossMarquee.style.height=marqueeheight+"px"
crossMarquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("ScrollMarquee()",30)', delayTime)
}

if (window.addEventListener)
window.addEventListener("load", InitializeMarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", InitializeMarquee)
else if (document.getElementById)
window.onload=InitializeMarquee


</script>

You can place the image needed to scroll inside a div tag as shown,

<div id="marqueecontainer" onMouseover="copySpeed=pauseSpeed" onMouseout="copySpeed=marqueeSpeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<img src="Rose3.jpg" height="100px" style="width: 84px" />
</div>
</div>

This makes the images scrolling.

Let me know if you have any doubts.

Regards,
Valli

[redice]

Hey Valli,

Thanks alot, this is great. But this is an automatic scroller. I needed one where the user scrolls manually, similar to the flash ones with a neat scroller and nt the ugly one for windows.
Any Ideas?

Ravi