Jump to content


This topic is now archived and is closed to further replies.


2 scroll lists side by side how would you do this?

Recommended Posts


I’m really stuck with this:

I want to create like a name generation idea thing by having a list of verbs and a list of nouns in 2 lists that scroll independently

List 1 List 2
Black Devil
Red Fish
Angry Nanny
Happy Dog
Vulgar Jungle

What I would like to do is have the nouns and verb pretty close together and to be able to scroll each list so scrolling list 1 down 2 may look like this

List 1 List 2
...... Devil
...... Lemon
Black Nanny
Red Dog
Angry Jungle

The problem is I don’t know where to start
I’ve fiddled with css but a scroll bar ends up between the lists

I’m looking for ideas mainly how would you approach this?



Share this post

Link to post
Share on other sites
Pretty interesting problem....

Here is a little trick that works in IE and FF, doesn't work in Opera. I used the dir="rtl" in the first div so the scroll bar will move to the left side of the div. This way it's not between the two lists.
    .list {width:100px;
<div class="list" dir="rtl">
List 1<br />
Black<br />
Red<br />
Angry <br />
Happy<br />
Vulgar<br />

<div class="list">
List 2<br />
Devil<br />
Fish<br />
Nanny<br />
Dog<br />
Jungle<br />

Share this post

Link to post
Share on other sites
Nogray That is absolutely fantastic just what I needed it’s perfect !!

It’s people like you that make this website so great !

Thank you so much

Share this post

Link to post
Share on other sites
Actually lol… Now I’ve increased the font size and made another slight problem

Is there a way to set the amount it scrolls
So it scrolls in steps of so many pixels
So the words line up.
I’ve been looking around a solution… if I find one I’ll post it here

Share this post

Link to post
Share on other sites
If you want to make it scrolls in steps, you gotta make your own scroll bar using javascript.

It'll be a bit complicated and you gotta test it from IE and FF (work differently).

Here is a simple logic that might work

in your list, each item should be an element with and id (like <div id="right_1">Text</div><div id="right_2">Text</div>etc...)

create two images to represent the scroll arrows.

When the top arrow is clicked, you'll need to check how many clicks it's been (keep a counter in javascript) and than scroll into view the corresponding element from that click to the top.

You can use scrollIntoView() function to scroll the element [a href=\"http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/scrollintoview.asp\" target=\"_blank\"]http://msdn.microsoft.com/library/default....ollintoview.asp[/a]

do the same with the bottom arrow, but you'll need to scroll the previous element into view.

Share this post

Link to post
Share on other sites
Thanks once again... I'll have to fiddle with javascript meanwhile it's not so bad.

works well with mousewheel
[a href=\"http://www.playname.com/index.php?option=com_content&task=view&id=13&Itemid=30\" target=\"_blank\"]http://www.playname.com/index.php?option=c...id=13&Itemid=30[/a]

Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.