Solved

Scroll div with jquery

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

757 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

21 Experts available now in Live!

Get 1:1 Help Now