Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to change this vertical scroller into a horizontal one?

Status
Not open for further replies.
vanbeugen

vanbeugen

IS-IT--Management
Feb 4, 2005
62
NL
In the html below I use a script for a vertical scroller. The links move the scroller up and down to the correct part of the text. Now I would like to change the scrolling to the horizontal direction, moving to the left or the right to the correct part. Would such a thing be possible?

This is the script for the vertical scroller I have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<script language="JavaScript" type="text/javascript">
<!--
function move_up1(){
document.getElementById('layertext2').scrollTop=0;
}

var timer;
var speed=20;

function Scroll(lnk){
clearTimeout(timer);
p=document.getElementById('layertext2');
c=document.getElementById('layertext2').getElementsByTagName('a')[lnk];

if (c.offsetTop<p.scrollTop-speed){
p.scrollTop=p.scrollTop-speed;
timer=setTimeout('Scroll('+lnk+')',1);
}

else if (c.offsetTop>p.scrollTop+speed){
p.scrollTop=p.scrollTop+speed;
timer=setTimeout('Scroll('+lnk+')',1);
}

else{
p.scrollTop=c.offsetTop;
clearTimeout(timer);
}

if (p.scrollTop+p.offsetHeight==p.scrollHeight){
clearTimeout(timer);
}

}
//-->
</script>


</head>

<body>

<div id="layertext2" style="position: relative; z-index: 15; top: 300px; left: 0px; height: 150px; overflow-x: none; overflow-y: auto;">

<a name="top"></a><a name="orange"></a><br>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><img src="dotwhite.gif" width="1" height="1"><h3>Welcome Days</h3>
<div class="tekst">
<img width="33%" src=" alt="kleuren bezieling en emotionele intelligentie" title="" style="float:left; margin-right:20; margin-bottom:10; margin-top: 5;">
Orange1<br>
Orange2<br>
Orange3<br>
Orange4<br>
Orange5<br>

<br>

<br><a name="geld"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Spelen met geld</h3>
<div class="tekst">
ABN1<br>
ABN2<br>
ABN3<br>
ABN4<br>
ABN5<br>
<br><a name="ocw"></a><br>
</div>

<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Spelen met situaties</h3>
<div class="tekst">
Min1<br>
Min2<br>
Min3<br>
Min4<br>
Min5<br>
<br><a name="zand"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Spelen met zand</h3>
<div class="tekst">
Met WHZ1<br>
Met WHZ2<br>
Met WHZ3<br>
Met WHZ4<br>
Met WHZ5<br>
<br><a name="kleur"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Spelen met Kleur</h3>
<div class="tekst">
Politie1<br>
Politie2<br>
Politie3<br>
Politie4<br>
Politie5<br>
<br><a name="bernheze"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Bernhezer Zesstrijd</h3>
<div class="tekst">
Rabo1<br>
Rabo2<br>
Rabo3<br>
Rabo4<br>
<br><a name="ah"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Creatief Denken en Doen</h3>
<div class="tekst">
Albert1<br>
Albert2<br>
Albert3<br>
Albert4<br>
Albert5<br>
Albert6<br>

<br><a name="parade"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Parade Festival "Rite de Passage"</h3>

</div>




<div id="layermenu1" style="position: absolute; z-index: 35; top: 20px; left: 20px;">
<div class="tekst"><b>Make your choice:</b><br><br></div>
<a href='javascript:Scroll(0)' class="link5" onfocus="this.blur();">Orange</a><br>
<a href='javascript:Scroll(3)' class="link5" onfocus="this.blur();">ING</a><br>
<a href='javascript:Scroll(6)' class="link5" onfocus="this.blur();">Min</a><br>
<img src="dotwhite.gif" width="1" height="1"><a href='javascript:Scroll(9)' class="link5" onfocus="this.blur();">WHZ </a><br>
<a href='javascript:Scroll(12)' class="link5" onfocus="this.blur();">Politie</a><br>
<a href='javascript:Scroll(14)' class="link5"onfocus="this.blur();">Rabo</a><br>
<a href='javascript:Scroll(16)' class="link5" onfocus="this.blur();">Albert Heijn</a><br>
</div>
</body>
</html>
 
Sort by date Sort by votes
I do not have time to look over the code and tell you exactly what to change but what you need to focus on is this:
Make certain your style allows for the horizontal scrollbar and that the height of the content is not going to cause the vertical scroll bar.
You use scrollTop offsetTop and scrollHeight for determining scroll position, these have to be changed to the horizontal equivalents (I think scrollLeft and scrollWidth).
Look into those changes and that is a big start in changing to horizontal.


Stamp out, eliminate and abolish redundancy!
 
Upvote 0 Downvote
Why don't you modify it yourself? I don't see any copyright comments in the code so surely you were the one that wrote it to get it to work vertically. It can't be that hard for you to modify it to get it to work horizontally.....

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
Hi,

Thanks for your reactions, but to be honest, I would not really know where to start. I tried to change scrollTop and scrollHeight into scrollLeft and scrollWidth, but that doesn't seem to work as I do it. If zone one could help me further I would be very grateful.
 
Upvote 0 Downvote
You have to change:
scrollTop - scrollLeft
scrollTop-speed - scrollLeft-speed
scrollHeight - scrollWidth
offsetTop - offsetLeft

You have to set your style properties to allow the scrollbar for the x axis.

You also have to re-design your content.
Right now you have content that is only so wide but very tall so it has to scroll up-down. You need to design it so that all the content is a fixed number of pixels high and all on the same horizontal level so that you have width to scroll.
Then you need to change your arrow image to one that points to the side instead of up.

Your best bet is to go find a horizontal scrolling script and modify it to fit your needs.

Stamp out, eliminate and abolish redundancy!
 
Upvote 0 Downvote
Hi Niteowl,

thanks for your attention. I changed the code as I understand that I should (scrollTop -> scrollLeft, scrollTop-speed -> scrollLeft-speed, scrollHeight -> scrollWidth and offsetTop -> offsetLeft.
Further I changed overflow-x: auto and overflow-y: none
But now I don't know how to get further. I hope you can help me further with it. This is the new code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<script language="JavaScript" type="text/javascript">
<!--
function move_up1(){
document.getElementById('layertext2').scrollLeft=0;
}

var timer;
var speed=20;

function Scroll(lnk){
clearTimeout(timer);
p=document.getElementById('layertext2');
c=document.getElementById('layertext2').getElementsByTagName('a')[lnk];

if (c.offsetLeft<p.scrollLeft-speed){
p.scrollLeft=p.scrollLeft-speed;
timer=setTimeout('Scroll('+lnk+')',1);
}

else if (c.offsetLeft>p.scrollLeft+speed){
p.scrollLeft=p.scrollLeft+speed;
timer=setTimeout('Scroll('+lnk+')',1);
}

else{
p.scrollLeft=c.offsetLeft;
clearTimeout(timer);
}

if (p.scrollLeft+p.offsetWidth==p.scrollWidth){
clearTimeout(timer);
}

}
//-->
</script>


</head>

<body>

<div id="layertext2" style="position: relative; z-index: 15; top: 300px; left: 0px; height: 150px; overflow-x: auto; overflow-y: none;">

<a name="top"></a><a name="orange"></a><br>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><img src="dotwhite.gif" width="1" height="1"><h3>Welcome Days</h3>
<div class="tekst">
<img width="33%" src=" title="" style="float:left; margin-right:20; margin-bottom:10; margin-top: 5;">
Orange1<br>
Orange2<br>
Orange3<br>
Orange4<br>
Orange5<br>

<br>

<br><a name="geld"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Spelen met geld</h3>
<div class="tekst">
ABN1<br>
ABN2<br>
ABN3<br>
ABN4<br>
ABN5<br>
<br><a name="ocw"></a><br>
</div>

<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Spelen met situaties</h3>
<div class="tekst">
Min1<br>
Min2<br>
Min3<br>
Min4<br>
Min5<br>
<br><a name="zand"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Spelen met zand</h3>
<div class="tekst">
Met WHZ1<br>
Met WHZ2<br>
Met WHZ3<br>
Met WHZ4<br>
Met WHZ5<br>
<br><a name="kleur"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Spelen met Kleur</h3>
<div class="tekst">
Politie1<br>
Politie2<br>
Politie3<br>
Politie4<br>
Politie5<br>
<br><a name="bernheze"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Bernhezer Zesstrijd</h3>
<div class="tekst">
Rabo1<br>
Rabo2<br>
Rabo3<br>
Rabo4<br>
<br><a name="ah"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Creatief Denken en Doen</h3>
<div class="tekst">
Albert1<br>
Albert2<br>
Albert3<br>
Albert4<br>
Albert5<br>
Albert6<br>

<br><a name="parade"></a><br>
</div>
<a href='javascript:Scroll(0)' onfocus="this.blur();"><img src=" width="16" height="16" border="0" align="right"></a><h3>Parade Festival "Rite de Passage"</h3>

</div>




<div id="layermenu1" style="position: absolute; z-index: 35; top: 20px; left: 20px;">
<div class="tekst"><b>Make your choice:</b><br><br></div>
<a href='javascript:Scroll(0)' class="link5" onfocus="this.blur();">Orange</a><br>
<a href='javascript:Scroll(3)' class="link5" onfocus="this.blur();">ING</a><br>
<a href='javascript:Scroll(6)' class="link5" onfocus="this.blur();">Min</a><br>
<img src="dotwhite.gif" width="1" height="1"><a href='javascript:Scroll(9)' class="link5" onfocus="this.blur();">WHZ </a><br>
<a href='javascript:Scroll(12)' class="link5" onfocus="this.blur();">Politie</a><br>
<a href='javascript:Scroll(14)' class="link5"onfocus="this.blur();">Rabo</a><br>
<a href='javascript:Scroll(16)' class="link5" onfocus="this.blur();">Albert Heijn</a><br>
</div>
</body>
</html>
 
Upvote 0 Downvote
Did you try turning your monitor on its side?
 
Upvote 0 Downvote
The script to scroll the data is easy after you actually get a horizontally scrolling window setup.
It is going to require a lot of thought on how you setup your data so that it displays horizontally.
Get yourself a working horizontally scrolling box first and the rest will be easy to help you with.

You might even consider using DHTML to scroll your data rather than a div with overflow settings.
Search on horizontal scrolling or horizontal scrollbar scripts so you can get an example of setting up the container and data the way you need it.


Stamp out, eliminate and abolish redundancy!
 
Upvote 0 Downvote
Ho NiteOwl,

Thanks for all your attention. I've a horizontal scroll script, hope that's ok:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns="<head>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<link href=" rel="stylesheet" type="text/css">

<script type="text/javascript">
<!--
var w=235;
var h=295;
var l=screen.width-(w+15);
var features='left='+l+',top=0,width='+w+',height='+h+',resizable=yes';

function pop(url) {
window.open(url,'',features);
}
//-->
</script>

<style type="text/css">
/*<![CDATA[*/

body {
background: #ffffff;

}
#middle {
position:absolute;
left: 0px;
top: 95px;
width: 3050px;
height: 350px;
overflow: hidden;
}
#container {
width: 5788px; /*total images width */
display: none;
position: absolute;
top: 0px;
border: solid 0px #6699cc;

#idinspi {
color: #4c5ea1;
}
#idteamb {
color: #4c5ea1;
}

#idwzw {
color: #4c5ea1;
}
}

.images {
float:left;
border:none;
}

.kop { color: #4c5ea1; font-weight: 700; font-size: 13px; font-family: Arial; text-align: left; width: 100%; text-decoration: none }

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

//* preload rollover
var roll = new Image()
roll.src = 'spiraalmetman3opt.jpg'

var x = 550;
var w = 5788; /*total images width */
var i = 0;
var speed = 12;

/*-----------------------------------------------------------------------------
Scroller functions
-----------------------------------------------------------------------------*/

function imageScroll() {
var Scontainer = document.getElementById("container").style;
Scontainer.display = "block";
Scontainer.left = (x - i) + "px";
i++;
if (i == 5300) location = 'overzicht-trainingen-workshops-events.html'
if(i >(x + w)) {
i = 0;
}
scroller=setTimeout("imageScroll()",speed);
}
onload = imageScroll;

function stopScroll(el) {
clearTimeout(scroller);
}

/*-----------------------------------------------------------------------------
Image swap

- No 2nd arg = "swap back"
-----------------------------------------------------------------------------*/

function swap(img,src)
{
if(src){
img.oSrc = img.src;
img.src = src;
}
else
img.src = img.oSrc;
}

/*-----------------------------------------------------------------------------
Mouse events
-----------------------------------------------------------------------------*/

function img_mouseover(img, src)
{
stopScroll();
swap(img,src);
img.onmouseout = img_mouseout;
}

function img_mouseout()
{
imageScroll();
swap(this);
}

//]]>
</script>

<script type="text/javascript">
<!--
function changeColor(id,col,col1) {

document.getElementById(id).style.color=col;

document.onmouseout=function() {
document.getElementById(id).style.color=col1;
}
}
//-->
</script>

<script language="JAVASCRIPT"><!--
function swapLayers()
{
if(document.getElementById("layer1").style.visibility == "hidden")
{
document.getElementById("layer1").style.visibility = "visible";
document.getElementById("layer2").style.visibility = "hidden";
}
else
{
document.getElementById("layer1").style.visibility = "hidden";
document.getElementById("layer2").style.visibility = "visible";
}
}
// -->
</script>

</head>

<body>
<div id ="middle">
<div id = "container">

<table>
<tr>
<td><div class="kop"><img border="0" src = "dotwhite.gif" height="0" width="32">
<a href="wie-zijn-wij.html" id="idwzw" class="kop" target="_self" onmouseover = "changeColor('idwzw','#ffae06','#4c5ea1'); stopScroll(this); return false;" onmouseout = "img_mouseout()" alt = ""/>Wie zijn wij?</a>
<img border="0" src = " height="0" width="88">
<a href="inspiratie-trainingen.html" id="idinspi" class="kop" target="_self" onmouseover = "changeColor('idinspi','#ffae06','#4c5ea1'); stopScroll(this); return false;" onmouseout = "img_mouseout()" alt = ""/>Inspiratie Trainingen</a>
<img border="0" src = " height="0" width="83">
<a href="teambuilding-trainingen.html" id="idteamb" class="kop" target="_self" onmouseover = "changeColor('idteamb','#ffae06','#4c5ea1'); stopScroll(this); return false;" onmouseout = "img_mouseout()" alt = ""/>Teambuilding</a>
</div>
</td>
</tr>
<tr>
<td>
<a href="wie-zijn-wij.html" target="_self" onmouseover="changeColor('idwzw','#ffae06','#4c5ea1')"><img class = "images" border="0" src = " onmouseover = "stopScroll(this);return false;" onmouseout = "img_mouseout()" alt = ""/></a>
<img class = "images" border="0" src = " height="0" width="40" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/>
<a href="inspiratie-trainingen.html" target="_self" onmouseover="changeColor('idinspi','#ffae06','#4c5ea1')"><img class = "images" border="0" src = " onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/></a>
<img class = "images" border="0" src = " height="0" width="40" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/>
<a href="teambuilding-trainingen.html" target="_self"onmouseover="changeColor('idteamb','#ffae06','#4c5ea1')"><img class = "images" border="0" src = " onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/></a>
<img class = "images" border="0" src = " height="0" width="40" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

</div>
</div>

</body>
</html>

Hope we can go further with this!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
702
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
829
lexer
lexer
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top