how to make a vertical thumbnail scroller horizontal

lolo

hello. happy new year.

I'm trying to build a website for my wife and she is adament on having
a horizontal thumbnail scrolling div. great. I have a good vertical
scrolling thing, but can't figure out how to make it scroll
horizontally. It's probably real simple and I just can't figure it
out....

Here is the code I have so far:

<html>
<head>
</head>
<body>
<script language='javascript' type='text/javascript'>

var scrolling;

function startScroll(theframe)
{
scrolling=setInterval('window.' + theframe +
'.scrollBy(0,12);', 100);
}

function stopScroll()
{
clearInterval(scrolling);
}

function back(theframe)
{
scrolling=setInterval('window.' + theframe +
'.scrollBy(0,-12);', 100);
}

</script>

<a href='javscript:void(0);' onmouseover='back("this_iframe")'
onmouseout='stopScroll()'>Scroll Up</a><br />
<iframe src='' name='this_iframe' id='this_iframe'
style='width: 50px; height: 50px;' frameborder='0' scrolling='no'
/></iframe><br />
<a href='javascript:void(0);'
onmouseover='startScroll("this_iframe")'
onmouseout='stopScroll()'>Scroll Down</a><br />

<script language='JavaScript' type='text/javascript'>
frames['this_iframe'].document.open();
frames['this_iframe'].document.write("<html><head><body>");
frames['this_iframe'].document.write("<img src='image1.jpg'
style='width: 25px; height: 25px;' /><br />");
frames['this_iframe'].document.write("<img src='image2.jpg'
style='width: 25px; height: 25px;' /><br />");
frames['this_iframe'].document.write("</body></html>");
frames['this_iframe'].document.close();
</script>

</body>
</html>

I ain't no programmer, although I'm learnin, so don't rip me a new one
if it's easy, pleeeeeas?

Jan 2 '07 #1

Subscribe Post Reply

5339

Frederik Vanderstraeten

lolo schreef:

hello. happy new year.

I'm trying to build a website for my wife and she is adament on having
a horizontal thumbnail scrolling div. great. I have a good vertical
scrolling thing, but can't figure out how to make it scroll
horizontally. It's probably real simple and I just can't figure it
out....

Here is the code I have so far:

<html>
<head>
</head>
<body>
<script language='javascript' type='text/javascript'>

var scrolling;

function startScroll(theframe)
{
scrolling=setInterval('window.' + theframe +
'.scrollBy(0,12);', 100);
}

function stopScroll()
{
clearInterval(scrolling);
}

function back(theframe)
{
scrolling=setInterval('window.' + theframe +
'.scrollBy(0,-12);', 100);
}

</script>

<a href='javscript:void(0);' onmouseover='back("this_iframe")'
onmouseout='stopScroll()'>Scroll Up</a><br />
<iframe src='' name='this_iframe' id='this_iframe'
style='width: 50px; height: 50px;' frameborder='0' scrolling='no'
/></iframe><br />
<a href='javascript:void(0);'
onmouseover='startScroll("this_iframe")'
onmouseout='stopScroll()'>Scroll Down</a><br />

<script language='JavaScript' type='text/javascript'>
frames['this_iframe'].document.open();
frames['this_iframe'].document.write("<html><head><body>");
frames['this_iframe'].document.write("<img src='image1.jpg'
style='width: 25px; height: 25px;' /><br />");
frames['this_iframe'].document.write("<img src='image2.jpg'
style='width: 25px; height: 25px;' /><br />");
frames['this_iframe'].document.write("</body></html>");
frames['this_iframe'].document.close();
</script>

</body>
</html>

I ain't no programmer, although I'm learnin, so don't rip me a new one
if it's easy, pleeeeeas?

1. Probably place the thumbnails side-by-side by removing the <br />
newlines.
2. Change scrollBy(0,12) to scrollBy(12,0) and scrollBy(0,-12) to
scrollBy(-12,0). (The first value is the horizontal scroll, the second
value is the vertical scroll.)
3. Probably change the words Scroll Up and Scroll Down to Scroll Left
and Scroll Right.
4. Let me know if anything doesn't work, I didn't test this.

Jan 4 '07 #2

Dan

Wives!

I am looking for the same thing. Not for my wife though (thank God)

I've been trying to do it with a div but your iframe technique looked
interesting and I semi-accomplished horizontal scrolling by making the
follwing changes.

First of all you have to reverse the co-ordinates in both scrollBy()
calls;

in the startScroll function, change "scrollBy(12,0)" to
"scrollBy(0,12)"

and

in the back function change, "scrollBy(-12,0);" to "scrollBy(0,-12);"

Then where the pictures are being added, I removed the <br /tags
after every thumbnail.

Now here's where it all goes sour. Even though I removed the <br />
tags after each thumbnail, the iframe still displays the thumbnails
vertically (the next thumbnail is displayed below the previous one -
not beside it). I am thouroughly embarrased to report that the only
way i can get around this is to use a table... So I drop a table
opener and closer in with the iframe's body tags then surround each
thumbnail with column tags (<tr>thumb</td>).
If anyone knows CSS to make images display horizontally inline within a
narrow div or iframe, please step forward...

Here is my version:

<html>
<head>
</head>
<body>
<script language='javascript' type='text/javascript'>

var scrolling;

function startScroll(theframe){
scrolling=setInterval('window.' + theframe + '.scrollBy(12,0);', 100);
}

function stopScroll(){
clearInterval(scrolling);
}

function back(theframe){
scrolling=setInterval('window.' + theframe + '.scrollBy(-12,0);',
100);
}

</script>

<a href='javscript:void(0);' onmouseover='back("this_iframe")'
onmouseout='stopScroll()'>Scroll Up</a>
<br />
<iframe src='' name='this_iframe' id='this_iframe' style='width: 50px;
height: 50px;' frameborder='0' scrolling='no'/>
</iframe><br />
<a href='javascript:void(0);' onmouseover='startScroll("this_iframe")'
onmouseout='stopScroll()'>Scroll Down</a><br />

<script language='JavaScript' type='text/javascript'>
frames['this_iframe'].document.open();
frames['this_iframe'].document.write("<html><head><body><TABLE><TR>");
frames['this_iframe'].document.write("<TD><img src='image1.jpg'
style='width: 25px; height: 25px;'></TD>");
frames['this_iframe'].document.write("<TD><img src='image2.jpg'
style='width: 25px; height: 25px;'></TD>");
frames['this_iframe'].document.write("</TR></TABLE></body></html>");
frames['this_iframe'].document.close();
</script>

</body>
</html>
--
Dan
Visit http://www.hostingforum.ca today

Jan 14 '07 #3

Charlie

The problem with horizontal strips is that the browser will fold the
thumbnail images as soon as they fill the horizontal width. I found
that I could defeat that behavior using the "white-space" style. I
created a div and gave it the class "imageStrip" and then used this
style:

..imageString { white-space: nowrap; overflow: auto; width: 95%; }

Then I added the thumbnail images to the div. The "white-space: nowrap"
style prevented them from wrapping and the "overflow: auto" style
generated a scrollbar when needed.

My own wife suggest this and I looked up the documentation for the
"white-space" style and told her that it would not work because the
documentation I read clearly stated that the *text* would not wrap.
But, it does work both on Firefox and IE. Of course, as someone
mentioned, you can also do this with a table. This seems a litle
cleaner.

Jan 15 '07 #4

how to make a vertical thumbnail scroller horizontal

Similar topics