Scrollable div

  • Hi,

    My website is at https://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

Viewing 7 replies - 1 through 7 (of 7 total)

  • 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: https://www.htmlite.com/faq015.php

    Thread Starter ltcommander

    (@ltcommander)

    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.

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

    Thread Starter ltcommander

    (@ltcommander)

    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!

    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="https://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 ??

    Thread Starter ltcommander

    (@ltcommander)

    thanks Carlos! I will try it!

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    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).

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Scrollable div’ is closed to new replies.