WordPress.org

Ready to get started?Download WordPress

Forums

Scrollable div (8 posts)

  1. ltcommander
    Member
    Posted 1 year ago #

    Hi,

    My website is at http://www.hikeinhongkong.com. I have two boxes at the top where I have listed the 4 recent comments and top 4 posts. However, what I am trying to achieve is a scrollable div box where if a viewer puts the mouse on an arrow mark it auto scrolls and lists many more comments, posts and so forth. So, it's not limited to only 4 pieces because of space constraints.

    An illustration to what I am describing is here

    What's the most easy way to achieve this?

    Thanks so much.

    Vince

  2. Carlos Moreira
    Member
    Posted 1 year ago #

    hello!

    I searched a bit, and I didn't find any plugin that does exactly what you need.. the closest was this paid one: Content Scroller Widget.

    I can imagine it doing it with a bit of css and javascript. A very simple example would be this: http://www.htmlite.com/faq015.php

  3. ltcommander
    Member
    Posted 1 year ago #

    Thanks Carlos. I came across that but the problem is that you can't change the color of the scrollbar, etc, etc using that approach. The standard scroll bar looks ugly while customizations to the scroll bar (color, etc) seem possible only in IE.

  4. Carlos Moreira
    Member
    Posted 1 year ago #

    you are right, you would have to combine it with some javascript to customize the appearance, like this:
    http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

  5. ltcommander
    Member
    Posted 1 year ago #

    Thanks Carlos!! Looks great! I am not that technically strong with PHP/JS but how do I get this to work on a DIV tag, do you know?

    I can link those files to <head></head> (header.php). What I don't get is how to apply it to a DIV.

    The original example simply has a class

    <div class="scroll" ...>

    but with JS I am not sure how to get the Div to work.

    Thanks so much!

  6. Carlos Moreira
    Member
    Posted 1 year ago #

    check the source code from the link i sent you and try to mimic the code there.

    basically, you can do this:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="scripts/jScrollPane.js"></script>
    <!--script type="text/javascript" src="../dist/jScrollPane.min.js"></script-->
    <script type="text/javascript">
    $(function()
    {
    $('#pane1').jScrollPane();
    }
    );
    </script>

    you'll have to include the js files provided somewhere so the include links above work.

    And then, the div should also have:

    <div id="pane1" class="scroll"> ..

    Do some trial and error, you should get there :)

  7. ltcommander
    Member
    Posted 1 year ago #

    thanks Carlos! I will try it!

  8. Reading quickly, but instead of inserting that code using that method, consider using wp_enqueue_script instead.

    That way the scripts will be queued up in a way that may not trip over other js scripts being loaded (like jquery).

Topic Closed

This topic has been closed to new replies.

About this Topic