modifying javascript dhtml: vertical scroller -> horizontal scroller 3

[BelliLint]

I have been using a javascript that satisfies me cross-platform & in most browsers. It allows the user to control a vertically scrolling window. I need to transpose it to work as a horizontal scroll. Please guide me as to how I can do this.

It is broken up into two parts (top & bottom)-

TOP:

//Manual Scroller- © Dynamic Drive 2001
//For full source code, visit [URL unfurl="true"]http://www.dynamicdrive.com[/URL]

//specify speed of scroll (greater=faster)
var speed=3
var fastspeed=10

iens6=document.all||document.getElementById
ns4=document.layers

if (iens6){
document.write('<div id="container" style="position:relative;width:202px;height:250px;overflow:hidden;border:0px ridge white">')
document.write('<div id="content" style="position:absolute;width:202px;left:0px;top:0px">')
}

BOTTOM:

if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+220))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+220))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}

function fastdown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+220))
crossobj.style.top=parseInt(crossobj.style.top)-fastspeed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+220))
crossobj.top-=fastspeed
movedownvar=setTimeout("fastdown()",20)
}

function fastup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+fastspeed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=fastspeed
moveupvar=setTimeout("fastup()",20)
}

function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}

function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}

function movebot(){
stopscroll()
if (iens6)
crossobj.style.top=-contentheight+270+"px"
else if (ns4)
crossobj.top=-contentheight+270
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height

 

[BabyJeffy]

I can't help but wonder whether the original author has already done something similar. Have you attempted to contact them and ask? Just a thought.

I think the code is fairly straightforward to modify... but would encourage you to let us know what you have done yourself to modify it.

Cheers,
Jeff

 

[BelliLint]

I have indeed tried to contact the script's author, with no reply. You say it looks pretty straightforward to modify. I imagine it is too, but I'm not comfortable with javascript. However, I am a programmer and if you could offer some guidance as to which variables need to be considered ('width' instead of 'height', 'right' instead of 'bottom', etc) I would appreciate the help.

Thanks,
Andrea

 

[BabyJeffy]

Looking closely at the code, it needed some adjustment to work. I modified the code to be a little more flexible.

The code above:

<script type="text/javascript">
<!--
//Horizontal Scroller- © Tek-Tips 2005 ([URL unfurl="true"]http://www.tek-tips.com)[/URL]
//Based on:
//Manual Scroller- © Dynamic Drive 2001 ([URL unfurl="true"]http://www.dynamicdrive.com)[/URL]

_width_of_container = 500
_width_of_content = 4100
_scroller_name = "scroller1"

iens6=document.all||document.getElementById
ns4=document.layers

if (iens6){
document.write('<div id="container" style="width:' + _width_of_container + 'px;position:relative;overflow:hidden;height:13px;font-size:13px;">')
document.write('<div id="content" style="left:0;width:' + _width_of_content + 'px;position:absolute;top:0;">')
}
//-->
</script>

Followed by a long line of text... and then this:

<script type="text/javascript">
<!--
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentwidth=crossobj.offsetWidth
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentwidth=crossobj.clip.width
}

function moveright(_speed){
stopscroll()
var _left = parseInt((iens6) ? crossobj.style.left : crossobj.left,10)
if (iens6&&_left>=contentwidth*(-1)+_width_of_container+_speed)
crossobj.style.left=_left-_speed+"px"
else if (ns4&&_left>=contentwidth*(-1)+_width_of_container+_speed)
crossobj.left-=_speed
moverightvar=setTimeout("moveright("+_speed+")",20)
}

function moveleft(_speed){
stopscroll()
var _left = parseInt((iens6) ? crossobj.style.left : crossobj.left,10)
if (iens6&&_left<0)
crossobj.style.left=_left+_speed+"px"
else if (ns4&&_left<0)
crossobj.left+=_speed
moveleftvar=setTimeout("moveleft("+_speed+")",20)
}

function stopscroll(){
if (window.moveleftvar) clearTimeout(moveleftvar)
if (window.moverightvar) clearTimeout(moverightvar)
}

function moveleftmost(){
stopscroll()
if (iens6)
crossobj.style.left=0+"px"
else if (ns4)
crossobj.left=0
}

function moverightmost(){
stopscroll()
if (iens6)
crossobj.style.left=contentwidth*(-1)+_width_of_container
else if (ns4)
crossobj.left=-contentwidth*(-1)+_width_of_container
}

function init_ns(){
document.nscontainer.document.nscontent.visibility="show"
}
if (ns4) window.onload=init_ns
//-->
</script>

Note there are 2 variables near the very top that allow you to set the width of the container div and the width of the underlying content div. This is something you have to just fiddle until you get it right... based on average font size, text zoom etc. If you don't mind it scrolling a little "extra" to the right then make it a little greater than you need.

I used the following to trigger the code using normal anchor tags:

<a href="javascript:moveleftmost()">Leftmost</a> | 
<a href="javascript:moveleft(10)">Fast Left</a> | 
<a href="javascript:moveleft(3)">Move Left</a> | 
<a href="javascript:moveright(3)">Move Right</a> | 
<a href="javascript:moveright(10)">Fast Right</a> | 
<a href="javascript:moverightmost()">Rightmost</a> | 
<a href="javascript:stopscroll()">Stop Scroll</a>

Note that I pass in the speed for the srcoll in the function call. I don't know exactly how you are initiating this yourself... maybe onmouseover events... maybe onclicks... hopefully you can easily adapt that part of the code.

I'm intrigued how you go on this now

Jeff

 

[BelliLint]

That was great Jeff! Thanks for your help. I did something fun with that using layers - check it out:

http://www.earthlyimages.ca

and see the gallery.

Cheers,
Andrea

 

[BabyJeffy]

Wow! That's a really cool effect! I see the idea of using rollovers now for the navigation... very cool. Congratulations on a job well done.

Cheers,
Jeff


[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]