Posted 7 months 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
Posted 7 months 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
Posted 7 months 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.
Posted 7 months 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
Posted 7 months 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!
Posted 7 months 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 :)
Posted 7 months ago #
thanks Carlos! I will try it!
Posted 7 months ago #
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).
You must log in to post.
