Jump to content

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


Nomax5

Recommended Posts

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
Link to comment
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.
[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]
Link to comment
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
Link to comment
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.
Link to comment
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]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.