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:
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.
Is this correct? window.pageXOffset/pageYOffset = how much page has scrolled in standards compliant browsers window.innerWidth, window.innerHeight = viewport in standards compliant browsers
What browser supports these properties? document.documentElement.scrollWidth document.documentElement.scrollHeight document.documentElement.scrollLeft document.documentElement.scrollTop document.documentElement.clientWidth document.documentElement.clientHeight
And does document.documentElement.scrollWidth and document.documentElement.scrollLeft return the same value?
How would I create and IF .. ELSE statement using the following check: the LMB needs to be pushed down while the mouse moves up? I assume that mouseup() and mousemove() need to be used. but putting them in an IF conditional I am not sure about... not sure how to make the check to ensure both are true.
There are three variations of code below, the desired effect is to have the function fired when the mouse if held down on an element. The first two fire as soon as the page is loaded, and the third one never fires at all
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..
Is it possible to have an iFrame set at 100% so that you will not need to scroll up or down inside the actual page? I have been searching for a while now and one thing to note is that the source file is from another web site (with permission) and is https on an http page. The code works fine but I cant seem to get the 100% height.
In my window user will popup calendar. But if window is not so width my calendar cannot fill on window and user see only part of it. How to do that user will have ability to see it completely on any size of window.
I'm having two problems with my code: 1. How do I make jumping to a certain place on the page using window.scroll more smooth and not just a direct jump? 2. Also, can I do a scroll by percents? I have a horizontally scrolling website that has a picture with a width of 300%. Obviously, anyone with a different sized monitor than I do will jump to the wrong place if I use pixels.
I've been using window.onerror to capture and report JavaScript errors from other users for debugging an application I've written. But I've run into a strange issue with Firefox and window.onerror.
It seems that any code that executes, having originated from an "element.addEventListener", causing an error does not activate "window.onerror". But it does at least show up in Firefox's JavaScript error console. Internet Explorer doesn't appear to suffer from the same issue when it uses it's equivalent "element.attachEvent".
Does anyone know why this is and if there is any workarounds or if it's possibly a bug? Code:
On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this:
igevt=function(evt){checkclosegal(evt)} window.addEventListener('keypress',igevt, false) and checkclosegal: function checkclosegal(evt)
[Code]....
This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index?
On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this:
igevt=function(evt){checkclosegal(evt)} window.addEventListener('keypress',igevt, false) and checkclosegal: function checkclosegal(evt)
[Code]....
This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent).
Well I finally got rid of the iframes and replaced them with scrollable divs. The only problem is the scrollBy does not work on divs. I want the div to scroll 100% of it's height when a button is clicked. This doesn't work eather.
Code: var y=display.clientHeight; alert(display.clientHeight); //alerts 351 display.scrollTop='y';//does nothing //neither does this
I am able to get the height of the browser w/o the scroll bar, but I need a way of getting the height of the browser with the scroll bar. How can I do this with javascript?
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'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.
IE7 / IE8 scroll bar is not recalculating content height, when using .slideToggle(); so content panels when expanded are lost off the bottom of the page - see screenshot. Has anyone else had this problem? What is the fix? I have tested in Chrome, firefox, opera (it even works in IE6) just not IE 7 and 8. I have attached a screenshot. The weird thing is the slider I am using for the areas causing the problem (pictured) I am using because they allow multiple instances of the slider on the page.
There is also an old one on the page also that does work in IE7 & 8 (the page expands as if there was new content in the page).
In order to make my site scalable (down to 1024x768), I need four layers to vertically scroll so that their contents doesn't force the main page to scroll. However, on higher resolutions, there'll be more space below the layers which means I don't necessarily want the layers to scroll if there's enough space to fit the text in.
I've tried CSS - I had to specify a height of 250px (the most I can use before main-page-scrolling takes effect in 1024x768) and set overflow: auto. The problem with this is that this is static formatting - no matter what resolution I use, the layers are always going to scroll because the height has been set to 250px.
So I was wondering if there's a way, either a CSS property/function (or maybe this can only be done in java script) - to make the layers scroll only if there's a risk of the main page scrolling?Or do I need to attack this with a crowbar and have a separate style sheet for every single resolution where I specify the height of the layers for each one?
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.
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..
