Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > how ta make a vertical thumbnail scroller horizontal

Reply
Thread Tools

how ta make a vertical thumbnail scroller horizontal

 
 
lolo
Guest
Posts: n/a
 
      01-02-2007
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?

 
Reply With Quote
 
 
 
 
Frederik Vanderstraeten
Guest
Posts: n/a
 
      01-04-2007
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.
 
Reply With Quote
 
 
 
 
Dan
Guest
Posts: n/a
 
      01-14-2007

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

--
Da
Visit http://www.hostingforum.ca toda

 
Reply With Quote
 
Charlie
Guest
Posts: n/a
 
      01-15-2007
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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
left - right horizontal scroller marco Javascript 8 06-20-2006 09:43 AM
Displaying a Thumbnail vs. creating a thumbnail David Lozzi ASP .Net 1 02-01-2006 10:34 PM
horizontal news scroller? Alex D. ASP .Net 3 08-30-2005 02:30 PM
horizontal scroller with images Ian Hurst (Troyka) HTML 8 02-28-2004 03:11 PM



Advertisments