Solved

Scroll div with jquery

Posted on 2011-03-22
4
842 Views
Last Modified: 2012-05-11
Hello,

I have a div with a class of .list.

It is on a nav bar on the right and a couple of the items have a on hover script to show the sub category. Two of the subcategories go farther than the window.

Can you let me know if you know of a jquery solution to this, it would be great if I could get the .list div to scroll up to show more items if the cursor goes 50 or so pixels higher then the bottom of the window.

Thanks!
0
Comment
Question by:movieprodw
  • 2
  • 2
4 Comments
 
LVL 8

Expert Comment

by:imantas
ID: 35194346
To enable scrolling inside element just add a style "overflow: auto" to the element, but its height must be limited, ie height attribute set to a fixed value.
0
 
LVL 1

Author Comment

by:movieprodw
ID: 35194351
Yeah I would like to try to do this with jquery so it just scrolls by the mouse being near the bottom of the page
0
 
LVL 8

Accepted Solution

by:
imantas earned 500 total points
ID: 35194410
Attach mouseover, mousemove handlers, calculate if mouse is at the bottom, then do
var scrollInterval = setInterval(function() { $("elementId").scrollTop++; }, 100);

Open in new window


Just don't forget to catch mouseout or mosemove when it leaves the bottom part and stop scrolling:
clearInterval(scrollInterval)

Open in new window


But as I've mentioned above, element has to have some content hidden and scrollable.
0
 
LVL 1

Author Closing Comment

by:movieprodw
ID: 35398640
as
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now