Solved

Scroll div with jquery

Posted on 2011-03-22
4
839 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

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…
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
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…

863 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

26 Experts available now in Live!

Get 1:1 Help Now