how ta make a vertical thumbnail scroller horizontal

L

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?
 
F

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?
Click to expand...

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.
 
D

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 looke
interesting and I semi-accomplished horizontal scrolling by making th
follwing changes.

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

in the startScroll function, change "scrollBy(12,0)" t
"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 /> tag
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 thumbnail
vertically (the next thumbnail is displayed below the previous one
not beside it). I am thouroughly embarrased to report that the onl
way i can get around this is to use a table... So I drop a tabl
opener and closer in with the iframe's body tags then surround eac
thumbnail with column tags (<tr>thumb</td>).
If anyone knows CSS to make images display horizontally inline within
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
 
C

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
How to make a div select work? 5
Thumbnail Viewer adjusting 11
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Sticky Header - How Do I Make It Hide/Show on Scroll? 0
Closing an overlay outside the overlay as well 1
Please Help? 0
Image not changing between "mute" & "un-mute" images. 5

Members online

No members online now.
Total: 51 (members: 0, guests: 51)
Robots: 299

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,736
Latest member
AdolphBig6

Latest Threads

Top