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.
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>
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?
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.
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.
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.
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:
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..
I was curious if anyone could show me how to create a button that will run a certain script ie: press button named "reveal" -> scroll box is created with other buttons inside it that do other functions.
I'm looking for a javascript/css code that can do the following, for a click button:
- When mouse is not over the click-button, a text should be displayed at the right of the button, in a bordered textbox - 85% transparency (hardly visible)
(- when mouse hovers over the button, the button image changes to a different one <- I know how to do this)
- When the button is clicked the text shows up normaly (0% transparency)
- When clicking again the button OR anywhere else on the page, the text goes back to 85% transparency.
The idea is that I've got a bunch of images, and I want one thing to fire when left-clicking them and a different thing when right-clicking. For the purpose of this thread I've replaced the 'things' with alerts.this is the part that gets added to the images (called 'plaatje'):plaatje.onclick = klik;
this is the function that gets executed when clicked. function klik(event) { var fotoID = event.target.id;
This simple example shows where my problem is. It works fine when all mouse buttons are released, and also if a button is pressed outside the image. But if a button is pressed inside the picture it'll not call onmouseout when the mouse is brought outside the picture. The worst is it'll never call it, leaving the button stuck pressed forever until mouse is moved over it again.
I just noticed if I place the picture inside an A tag it does work fine then, but I don't need an A element here. Moreover, this fix appears to work only for IE6, IE4 still doesn't work properly. I'm asking if there's some other way to correct this. I'm also making this compatible with Netscape 4.5, and the presence of an A element changes the event.target.
The fact is I can't seem to disable the default drag'n drop of IE with pictures. Netscape 4.5 appears to work perfectly. By placing onmousemove="return false;" in BODY I aboid the cursor change in IE but nothing else.
I recently added a section to my website that uses the Scrollable JQuery tool to load images from my Flickr account. When I initially load the page the "next" button requires two clicks before it will advance to the next set of images. This only happens on the first attempt following the page load. When I look at the code it appears that Scrollable fires an event on the first click that removes the "disabled" class on the "prev" anchor tag. It appears to skip the slider event that scrolls the images. You can view the issue here: [URL].
I need a way to scroll to the end of the fileupload filename once that file has been selected with the browse button. So instead of seeing c:FolderNamefoldername, the user will see foldernamefilename.fileextension in that box.
I have a jquery statement that enables or disables a button depending on whether a checkbox has been selected in a grid. This works fine in firefox but in IE the button is still displayed as disabled after checking the box. When you move the mouse pointer over the button is instantly becomes enabled. Showing an alert dialogue also makes the button display as enabled. Is there anyway to force IE to refresh the button display after running the statement?
I have the below Java on a the mouse up event of a button in Adobe Professional 8.0. I would like to make the last part of the subject line either bold or all caps. Is there a way to do this? var cSubLine = "500 Order for " + this.getField("CustomerName").value + " " + this.getField("Unit_Down").value;
I'm trying to integrate a scroll button that scrolls down an unordered list by a certain amount when clicked. To be more specific, I already have the list in a scrollable box, but I need to know how to make a div or image that when clicked, executes the function that scrolls the list down.
<!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.
