PDA

View Full Version : Side Scroll Script



Unseen Ghost
12-28-2005, 05:00 PM
Hey guys, I was looking at your side scroll javascript code, Here (http://dynamicdrive.com/dynamicindex1/scrollerlink.htm#), and I was wondering if there was a way you could scroll on click.

Like, you click on the arrow and it goes to a certain link.

Thanks for your help.

Unseen Ghost
02-06-2006, 01:12 AM
I'm sorry to double post, but I haven't got a reply in like 2 months and people that posted 3 days ago got a reply. :(

Seems wrong.

jscheuer1
02-06-2006, 06:18 AM
Hey guys, I was looking at your side scroll javascript code, Here (http://dynamicdrive.com/dynamicindex1/scrollerlink.htm#), and I was wondering if there was a way you could scroll on click.

Like, you click on the arrow and it goes to a certain link.

Thanks for your help.

That's not a link to a script called 'Side Scroll Script' but a link to 'Scrollable Menu Links'. So, to begin with, I am wondering what script you are talking about. Also, if it is the 'Scrollable Menu Links', when you say click on the arrow and scroll to a certain link, which arrow and which link do you have in mind?

Unseen Ghost
02-09-2006, 01:01 AM
Okay, my idea is....

When you click on an arrow, it goes to the next link.

jscheuer1
02-09-2006, 08:43 AM
I removed support for NS4, who uses that anymore? Tested in IE6, FF1.0.7 and Opera8.51:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<script type="text/javascript">

/***********************************************
* Scrollable Menu Links- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* To scroll by one link per click
* This notice must stay intact for legal use
***********************************************/

//configure path for left and right arrows
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width (in px):
var menuwidth=300
//configure menu height (in px):
var menuheight=25
//Specify scroll buttons directions ("normal" or "reverse"):
var scrolldir="normal"
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//specify menu content
var menucontents='<a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a href="http://www.javascriptkit.com">JavaScript Kit</a> | <a href="http://www.codingforums.com">CodingForums.com</a> | <a href="http://www.builder.com">Builder.com</a> | <a href="http://freewarejava.com">Freewarejava.com</a>'


////NO NEED TO EDIT BELOW THIS LINE////////////
menucontents='<nobr>'+menucontents.replace(/\/a>([^(<a)]*)<a/g, '/a><span>$1</span><a')+'</nobr>'
var iedom=document.all||document.getElementById
var leftdircode='onclick="moveleft();return false;"'
var rightdircode='onclick="moveright();return false;"'
if (scrolldir=="reverse"){
var tempswap=leftdircode
leftdircode=rightdircode
rightdircode=tempswap
}
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
loadedyes=1
}
window.onload=fillup

var moveL=0, moveS=0
function moveleft(){
if (loadedyes){
if (iedom&&moveL<cross_scroll.getElementsByTagName('a').length-1){
if(parseInt(cross_scroll.style.left)-cross_scroll.getElementsByTagName('a')[moveL].offsetWidth-cross_scroll.getElementsByTagName('a')[moveL].nextSibling.offsetWidth>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-cross_scroll.getElementsByTagName('a')[moveL].offsetWidth-cross_scroll.getElementsByTagName('a')[moveL].nextSibling.offsetWidth+"px"
moveL++
}
else{
moveS=Math.max(moveS,Math.abs(parseInt(cross_scroll.style.left)-(menuwidth-actualwidth)))
cross_scroll.style.left=menuwidth-actualwidth+'px'
}
}
}
}

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0&&moveL>0){
if (parseInt(cross_scroll.style.left)==menuwidth-actualwidth)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+moveS+"px"
else{
moveL--
cross_scroll.style.left=parseInt(cross_scroll.style.left)+cross_scroll.getElementsByTagName('a')[moveL].offsetWidth+cross_scroll.getElementsByTagName('a')[moveL].nextSibling.offsetWidth+"px"
}
}
}
}


if (iedom){
with (document){
write('<table border="0" cellspacing="0" cellpadding="2">')
write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
write('<td width="'+menuwidth+'px" valign="top">')
write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div>')
write('</td>')
write('<td valign="middle"> <a href="#" '+rightdircode+'>')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}

</script>
</body>
</html>

Unseen Ghost
02-09-2006, 02:00 PM
Thank you very much.

Works great.

Thank you for your time.