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

[Nomax5]

Hi

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
Example

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?

Cheers

Roy

[nogray]

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.
[code]
<style>
    .list {width:100px;
        height:100px;
        overflow:auto;
        float:left;
        padding:3px;}
</style>
<div class="list" dir="rtl">
List 1<br />
Black<br />
Red<br />
Angry <br />
Happy<br />
Vulgar<br />
</div>

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

[Nomax5]

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

[Nomax5]

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

[nogray]

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.

[Nomax5]

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]