Scroll A Div With Mouse Wheel?

Oct 27, 2009

I have been searching google for a solution to this, but I am having trouble finding something that works.

I simply want to be able to scroll the contents of a div (with no scrollbar) using the mouse wheel. The div should only scroll if the cursor is over the div when the wheel is moved.

Does anyone know where to find a good working solution to this?

View 3 Replies


ADVERTISEMENT

Memory Leak - When Use Mouse Wheel In Firefox To Scroll Contents Of The DIV - Memory Usage In Firefox Goes Through The Roof

Mar 26, 2009

First the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function TextScroll(scrollname, div_name, up_name, down_name, top_name){
[Code]...

When I use mouse wheel in Firefox to scroll contents of the DIV, memory usage in Firefox goes through the roof. Code above is a fully working page, if anyone would like to see what's up, just load it up, and start moving your mouse wheel in the area with text. You don't actually have to scroll the text, just moving the wheel back and forth in that DIV will do. Memory usage will start going up quite fast, and after you stop moving the wheel, it will finally come down a bit after a short while. I've highlighted in red the line where mousewheel event is registered for Firefox. I'm not sure if it's really a problem, but since Opera and IE don't have any strange memory usage, and Firefox does, maybe I did something wrong. In everyday use it shouldn't matter [don't expect to have kilometers of content to scroll], but anyway, it is a bit unsettling.

View 2 Replies View Related

Getting Mouse Wheel Focus Even When The Mouse Isn't Inside The Overflowed Div?

Jul 8, 2010

I am finishing up my website, right now I am using Flexcroll for the scrollbar in my main content window. Problem is, I want people to be able to use the mouse wheel to scroll that content window regardless of the mouse position.

My website is www. paulfenton .tk/wordpress if you want to see it.

I was wondering if anyone knew a way I can keep the mouse wheel focus on that internal div so I can scroll up and down at all times.

View 3 Replies View Related

Possible To Disable Mouse-wheel?

Jan 7, 2010

I have a website that contains a large div inside a smaller div, only to be scrolled via javascript. The problem is when you mouseover the smaller (container) div and you scroll the mousewheel down, everything scrolls down.

View 6 Replies View Related

JQuery :: Detecting The Mouse Wheel?

Sep 5, 2011

I'm trying to detect when the mouse wheel is scrolled, with div overflow: hidden. Only detect if the mouse wheel was scrolled or not.

View 2 Replies View Related

JQuery :: Detect Mouse Wheel Movement?

Mar 28, 2011

i am looking for all the things we can detect a mouse doing :)

I reach here:[URL]

Unfortunatly I have no idea on how to detect the movement of the mouse wheel.

View 4 Replies View Related

Disable Mouse-wheel Embedded Pdf Document

Apr 27, 2011

I am not an expert in javascripting, so forgive me. What i am trying to do is disable embedded pdf documents from being scrolled up and down with the middle mousewheel button on the mouse.I am using embedded PDF files as a way to easily display reports through a browser (FireFox). The actual PDF is about 10 pages long, but the HTML page is coded with the embed tag and uses the Open Parameters to display just a few aspects of the PDF, in an easy to read format. The annoying part is that the embedded PDF sections can accidentally be scrolled with the mousewheel, which ruins the look of the report in the browser. Is there a way to disable this?

As you can see in the first div, i was trying to use javascript to disable the mouse wheel, which did not work. Since each div is a snapshot of the embedded pdf file, is there a javascript that can disable the mousewheel scroll for each section by placing it in the body tag?

View 5 Replies View Related

How To Catch Mouse Wheel On Click Event?

Dec 20, 2007

<a href="http://www.google.com" onclick="alert('test alert')">test</a>

isn't work if user clicks on it in firefox to open it in another tab, actually it isn't work in IE and Opera either, how I can cath this wheel button click and hanle it???

View 2 Replies View Related

Mouse Wheel Listener Blocks Scrolling

Jun 1, 2011

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<img width=100 height=9000>
<script>
document.onmousewheel = function()
{
[Code]...

First of all, my code only needs to be compatible with IE8 (it's for a limited group of people). My code is intended to detect the rotation direction of the mouse wheel. It fortunately accomplishes that task perfectly fine. But unfortunately it also blocks the mouse wheel default behavior, which is not my intention. How should I change the code so it does not block normal scrolling of the page with the mouse wheel?

View 1 Replies View Related

Cross Browser Mouse Wheel Event Handler

Oct 8, 2005

I'm trying to write a cross-browser (IE and firefox) event handler for
the mousewheel. Basically my web app is an image viewer, so if you
scroll "down" with the wheel the next image should be displayed and if
you scroll "up" the previous image should be displayed.

So far I have:

function handleMouseWheel(e)
{
if (!e) e = window.event;

if ( e.wheelDelta <= 0 || e.detail > 0) { changeImage(1); }
else { changeImage(-1); }
}

This code works in IE and in Firefox to the desired effect. The
problem I am having is with registering the event handler.

The following works for IE:
document.onmousewheel = handleMouseWheel;

And the following works for Firefox:
window.addEventListener("DOMMouseScroll", handleMouseWheel, false);

But when I add the firefox event handler to my code, IE chokes with an
error "Object doesn't support this property or method".

What do I need to do to "hide" the firefox event handler code from IE?

View 1 Replies View Related

Jquery :: Possible To Have Mouse-wheel Call Event On Slider?

Dec 6, 2009

I have a jQuery UI slider plugin working to scroll some content. I would like to add a mousewheel event. I have this installed and have it working with a small hack. My questions is, is it possible to have the mousewheel call the event on the slider? This way, when you move it with the mousewheel, it just moves the slider which will scroll the content.

View 3 Replies View Related

How To Stop Default Mouse Wheel Behaviour In Firefox

May 5, 2006

i have placed some image indide a i frame which i created dynamically .when i do mouse wheel above it it goes up nad dow i want to stop and happened only in firefox.

View 1 Replies View Related

Prevent History Scroll (shift Key + Mouse Scroll) In IE

Jan 3, 2007

Is there a way in which we can disable the history scroll functionality in IE? Basically disable the SHIFT key + Mouse Scroll combination.

View 1 Replies View Related

Scroll With Mouse Movement

May 24, 2004

I have wrote this for a friend in another forum, But I thought it might be useful, at least for start for similar apllication.

Tho code scrolles the page if mouse moves in the 1/3 zones (left, right, up, down) of the page (clientWidth/Height). It might be modify (a better ideea, since I don't like scrolled full pages - at least the X-scrolled) for scrollable frames, iframes or layers). I would be grateful if any comments will simplify he code or will help me to build a similar application based on simple position of the mouse (not only on mousemove).

<html>
<head>
<script>
function setUp() {
if( typeof( window.innerWidth ) == 'number' ) {
/* Non-IE */
winW = window.innerWidth;
winH = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
/* IE 6+ in 'standards compliant mode' */
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
/*IE 4 compatible*/
winW = document.body.clientWidth;
winH = document.body.clientHeight;
}
setL = winW/3;// zone left first 1/3 from client width
setR = winW*2/3;// zone right third 1/3 from client width
setU = winH/3;// zone up first 1/3 from client height
setD = winH*2/3;// zone down third 1/3 from client width
pix=4// scroll speed control pixels/mousemove
}
function checkS(e){
// capture the mouse position
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)
{
posx = e.clientX;
posy = e.clientY;
}
// initialize the scrollBy parameters
x=0;
y=0;
// set the new scrollBy parameters
if(posx<setL){
x=-pix;
}
if(posx>setR){
x=pix;
}
if(posy<setU){
y=-pix;
}
if(posy>setD){
y=pix;
}
// scroll
window.scrollBy(x,y);
}
</script>
</head>
<body onload="setUp()" onmousemove="checkS(event)">
<table width="1200" height="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle" bgcolor="#CCCCCC">blabla</td>
</tr>
</table>
</body>
</html>

View 3 Replies View Related

Scroll DIV When Mouse Button Is Down?

Oct 4, 2010

I've a DIV which contains an IMG. This image is wider than the div, so a scrollbar appears on page. What I want to do, is click on the div(image) and move the mouse, and scroll the div as I move the mouse.I've tried using event ondrag in the div, and inside I can move the scroll with scrollTop and/or scrollLeft. My problem is that I haven't been able to make a good algorithm. I've tried to add clientY to scrollTop, and many other combinations but can't make it work. I have a lot of other javascript functionality in the page that is working.

View 6 Replies View Related

Scroll Div Left And Right Depending On Where The Mouse Is?

Aug 16, 2011

i have a container div with many other nested divs inside e.g.

<div id="thisOne">
div>Div 1</div>
<div>Div 2</div>

[code]....

View 1 Replies View Related

Way To Refresh A Function Upon Mouse Scroll

Jan 25, 2010

I have a home grown lightbox effect as my client cannot have community code such as JQuery, mootools etc running on their site (don't ask me....). All is working fine, the background darken mask with the box itself with the content. The only problem I'm having is what happens when the user scrolls.

As the mask is calculated upon clicking a link to display the lightbox, the method calculates the current screen area and uses that to create the height and width of the mask. But obviously if you scroll, you leave the mask behindat the top of the screen covering the calculated area. Is there a way to access the onscroll event to say rerun the specific function that calculates the mask area when the user scrolls so the mask stays constantly covering the available screen area? I suppose this is similar to those scripts where a div remains in view when the user scrolls - presumably something along those lines?

I found and tried a script to do with captured delta movement of the mousewheel but that disconnect the mouse wheel from the scrolling of the scroll bar and associated it only with the script in hand - I would like the browser to still scroll and my function to be fired on each scroll event.

View 1 Replies View Related

JQuery :: Hide Scrollbar And Still Be Able To Scroll With Mouse?

Jul 28, 2011

I know how to hide the scroll bar but not how to enable scrolling.

I did google a bit and found some solution that did not work for me. (currently using crome on mac) code...

Does anyone know a good way of doing that?

View 1 Replies View Related

Scroll-like Div That Follow The Height Or Y Axis Value Of Mouse

Nov 7, 2011

I was wondering how and I tried creating a div that is a child of a div with its same width, but the length of the entire page.So in a way it is like a scroll-bar except the user can not move down the page by holding the smaller inner div (square). The small square just moves down its container as the mouse moves down to The bottom of the page.but since The square inner div is in a container, with the same with, it can not and will not be able to move horizontally.

View 7 Replies View Related

ComboBox1 With Item Collection / Mouse Or Scroll Down Click

Oct 2, 2009

I have small webBrowser1 and I have the 3 Buttons(Back, Forward,Go) also I have the ComboBox1 with the Items Collection of different website url using MSVB 2008 in C++.My question:

1) How could I make my mouse click on each url with timer between the first url and the second and so on and let's say time between the 1st url and scroll down to the second with timer of 3 second .

2) How to make also the mouse click on certain button on that website what is the command code for that.

View 1 Replies View Related

AddEventListener For IE - Scroll When The Mouse Is Held Down Within 1/3 Of The Page Height Of The Window Edge

Aug 18, 2009

I'm creating a script which causes the page to scroll when the mouse is held down within 1/3 of the page height of the window edge. An example can be found at [URL], and is working fine in Firefox, Safari and Chrome, but not in IE. I'm 90% certain this is due to the browser's non-handling of addEventListener, but I'm not sure how to fix this...I've tried the following so far:

[Code]...

View 1 Replies View Related

Slide Right/left Within A Horizontal Scroll Window For As Long As The Mouse-down Action Is Triggered

Jun 28, 2011

How is it possible to slide right/left within a horizontal scroll window for as long as the mouse-down action is triggered (preferably with jQuery)? Couldn't find any examples // functions to do that..

View 1 Replies View Related

A Wheel For In-Progress Page Loading

Oct 14, 2010

I'm trying to find a javascript based spinning wheel for page loading. I'm hoping that it would be something that would hide the content until the content is finished loading.

View 6 Replies View Related

Application To Scroll The Table Header From The Same Amount Of Pixels And In The Same Direction When User Scroll Horizontal Bar In Div1

Feb 24, 2009

i have 1 div with scrollbars and another div with a table inside. when user scroll horizontal bar in div1 i want application to scroll the table header from the same amount of pixels and in the same direction. i did not find anything under jQuery about that.. :-(

1. how can i detect in which direction the scroll is done (to the right, or to the left) ?
2. how can i determine how many pixels this scrolling is about ?
3. how to scroll the table header (table tag or th tag) from the same amount of point ?

i found just scrollLeft for now and i'm not successful to use it

View 1 Replies View Related

Make An Image/text To Scroll As The User Scroll The Page Also?

Sep 25, 2009

how to make an image/text to scroll as the user scroll the page also? for example if the user scrolls down image/text also scrolls down and when the user scrolls up image/text also scrolls up..

View 6 Replies View Related

Make A Div Tag And Its Contents Scroll Down The Page Automatically When You Scroll?

Jun 13, 2006

Does anyone know of a script that makes a div tag and its contents scroll down the page automatically when you scroll?

View 2 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved