Javascript on top-of-window mouseover? - javascript

I'm seeking an onmouseover event to detect when the mouse hovers the top of the window. I'm only able to find onmouseover events for the whole page. How do I restrict it to just the very top of the window?
There's no "element" on the page I'm trying to attach the event to, as some have suggested. This should work with any webpage - I do not have any control over the HTML on the page.
Need only support modern browsers, simplest method possible, no jQuery.

The onmouseover can be added to any HTML element, that is any div, p, span, img, ul, anything. Do you have an element that covers the portion of the page you are interested in? Then just add the event to that element.
If the area where you want to catch the mouse movement doesn't correspond to an actual element, you can do it by adding the eventlistener to the body and the check where the pointer is:
document.body.addEventListener("mousemove", function(event) {
//Check if we are in the top area of the page.
if(event.pageY < 300) {
//Do something here.
}
});
If you want it to use the top of the page area of the browser as opposed to the page itself (so that scrolling does not affect where the cut off is on the screen) just use clientY instead of pageY.
JSFiddle for pageY.
JSFiddle for clientY.

alerts when mouse is at top of page: demo on jsfiddle: DEMO
JS:
(function (){//alert at top
function getPosition(e){
if (e.pageY < 75) alert('top');//switch to clientY for top of screen
}
document.addEventListener('mousemove', getPosition, false);})();
EDIT:
use: clientY for top of view screen, as page may be longer, this stays with screen
use: pageY for top of your website only

Maybe works...
$('body').on('mouseover', function () { // bind change event to select
if (event.pageY < 10)
alert(event.pageY)
});

Related

javascript addEventListener "wheel" for element still scrolls window

I have the following javascript code, which triggers when a user wants to view a large image:
var divOverlay = document.getElementById ("overlay");
divOverlay.style.visibility = "visible";
divOverlay.addEventListener ("wheel", zoom); // respond to mouse wheel
The function zoom() is working fine. It handles events from the mouse wheel and zooms in or out for the image, contained in "overlay".
The problem is that the mouse wheel events are also causing scrolling of the whole browser window. I want the mouse wheel events to go only to "overlay".
I have tried adding this:
origOnWheel = window.onwheel;
window.onwheel = function() { return false; }
followed, later, with restoring window.onWheel when the user is done. That partially works: it prevents the window from scrolling then the user is zooming "overlay". However, when the user finishes (and window.onWheel is restored), the main browser window no longer scrolls with the mouse wheel.
It will be a bit hard to give a complete (working) example without a working jsfiddle, but here are the guidelines:
Inside the zoom function - when you want to prevent the regular scroll of the page - you should use event.preventDefault()
You will need to decide if you want to disable the default scroll - basically this will be based on the height of the image vs. the height of the window (window.innerHeight). In case the height of the image is larger - you should not use the event.preventDefault() or do the prevent default and set the window.scrollTo(x, y) where the y should be the height of image - the height of the window (this will scroll to the bottom of the image).

Vertical scroll on mobile - hammer.js element in page

There are a million similar questions but I can't find an answer that works for me.
Here is the situation:
I have an HTML page, and within that page is an element that I am using hammer.js on.
Need to be able to scroll like this:
--->
While also being able to pinch-to-zoom (and subsequently pan on that zoomed element) on the seating chart element above.
The element itself works perfectly. I'm using doubletap, pinch, pinchend, pan, and panend on it.
Now, in the event that the element is totally zoomed out (I'm keeping track of the scale for this reason), I would like the entire page to scroll when using it on a mobile browser (aka the finger will be dragging the page up).
I have tried almost everything under the sun at this point. I can't seem to get it to manually scroll to a specific position (I have tried setting window.scrollTop and using window.scrollTo() with no results).
If someone could point me in the right direction, I'll worship you and your family for the next...say....13 days. Heck, maybe even 14.
TL;DR
- Have we pinch zoomed on the element? If so, handle panning around that element with glee!
- Are we fully zoomed out / pinched out on the element? If so, mobile users should be able to scroll the page like normal!
Thanks
Chris
You may try window.scrollTo to "simulate" normal scroll. Like so:
var currentScroll = 0;
var currentScale = 1; //"fully zoomed out" state
hammer.on("panstart", function (ev) {
currentScroll = window.scrollY;
});
hammer.on("pan", function(ev) {
if (currentScale == 1) {
//abort pan and scroll window instead
window.scrollTo(0, currentScroll + ev.deltaY * -1);
return;
}
//do stuff with pan here...
});

FadeIn Div at Mouse Cursor on Keypress [Javascript/JQuery]

I'm trying to make a dynamic javascript menu (contained in a div) appear at a visitor's mouse coordinates when they press ctrl+m on their keyboard (m signifying menu, and ctrl+m not being bound in most browsers as far as I'm aware). This way, wherever they are on my site and wherever their mouse is, they can pull up the menu by just pressing that combination and return to wherever they wish to go. At the same time, having the menu not shown until they press the key allows me to control the design experience completely without having to worry about a nav menu.
I've pulled together two different pieces of code I found on here in an attempt to do this myself, but I'm running into an unexpected issue.
I'm not sure how to denote the ctrl+m key combination in the event handler.
I'm getting a couple of errors on the code checker that I'm not sure how to fix myself.
I'm not sure how to make it so that the menu appears on ctrl+m, and stays there until ctrl+m is pressed again (a toggle switch).
I'm still learning how Javascript works.
Here's the link to the progress I've made so far: http://jsfiddle.net/nrz4Z/
In your example, you're binding the mousemove handler inside the keypress handler. You need to do them separately:
var mouseX;
var mouseY;
$(document).ready(function () {
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(document).keypress(function (event) {
if (event.which == 109) {
$('#examples').css({
'top': mouseY,
'left': mouseX
}).fadeIn('slow');
};
});
});
That should allow you to get the position at which to show the menu.
Firstly the use of keypress is not a good idea - web is something that is on an unknowable amount of browsers and devices and plugins and you don't know what shortcuts are bound to especially ones using modifiers with a single key (in this case cmd+m or ctrl+m is an OS shortcut to minimise the window on many OSes. ctrl exists as cmd in os x and not at all on phones.)
To detect multiple key presses check here: Can jQuery .keypress() detect more than one key at the same time?
Next you can detect mouse movements and store them in a variable for use anywhere: How to get mouse position in jQuery without mouse-events?
Your menu should then be at the bottom of the DOM with only body as it's parent:
<nav>
<p>My Menu</p>
<nav>
</body>
Your nav should have whatever styling it needs in the css, as well as:
nav {
position: absolute;
display: none;
/*z-index: 700; nav is at bottom of dom so it will go above anything without a z-index but you may want it to go over other things */
}
When you have detected your key-presses you should do:
$('nav').css({top: mouseYCoord, left: mouseYCoord}).show();
Obviously give your menu a more useful name and don't select upon all 'nav' tags.

Switch tabs based on mouse scroll

I would like to have a widget on a webpage containing a number of tabs. When the user scrolls the page and the widget comes in to view and he keeps scrolling down, the tabs should be activated one by one (without the page scrolling further down). Once the last tab is showing, the page should resume scrolling as usual. Is this doable using JS/jQuery?
UPDATE:
Since this seems too broad a question:
The problem is, I don't know how to use the scroll offset and prevent the page from scrolling down until I decide it can resume its normal behavior
UPDATE 2
I created This fiddle,
$(document).ready(function(){
$('#tabbed').mouseover(function(){
$(this).focus();
}).scroll(function(){
console.log("scrolling tabs");
});
$(window).scroll(function(evt){
var scrollPos = $(this).scrollTop()
console.log(scrollPos);
// BULLETPROOF WAY TO DETECT IF THE MOUSE IS OVER THE
// SCROLLABLE DIV AND GIVE IT FOCUS HERE?
});
});
it contains a long page and a scrollable div among its contents. The only problem is that the div starts catching scroll events only if I move my mouse. If I could find a bulletproof way to activate the scrolling div whenever the mouse is over it I'm there. Any ideas?
You can't prevent scrolling with javascript. Using iframes and divs with scroll will only work if the mouse is over them.
You can cancel the mouse wheel and keys events related to the scrolling, however the user will be able to scroll using the scrollbar (more here).
Another approach is leaving an empty area and fixing your widget inside this area, like in this working example
$(window).bind('scroll', function()
{
var scroll = $(window).scrollTop(),
innerHeight = window.innerHeight || $(window).height(),
fooScroll = $('#fooScroll'),
emptyArea = $('#emptyArea'),
offset = emptyArea.offset(),
fixedClass = 'fixed';
if(scroll > offset.top)
{
if(scroll < offset.top + emptyArea.height() - fooScroll.height())
{
fooScroll.addClass(fixedClass);
fooScroll.css("top", 0);
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", emptyArea.height() - fooScroll.height());
}
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", 0);
}
});
Then you can change the tabs while the page is scrolling.
You should be able to do this. You can use the jQuery scroll event to run your own code whenever the user scrolls up or down. Also, so long as you call e.preventDefault() whenever the scroll event is fired, you can prevent the whole window from scrolling up or down.

Trigger JQuery function when passed half way down the page

Is there a way to tell if you have scrolled passed the center of the web page or in other words, when you have scrolled passed exactly half of the web page and your scrollbar is situated in the lower half of the browser window?
I want to be able to trigger this:
$('.pineapple-man').show(); when I have scrolled down passed half of the page?
Is this possible at all?
Your help would be so kind!
You can get the pixel amount of an element has been scrolled by using .scrollTop(). To listen to scroll events use .scroll().
When you want to identify the halfway, use height of the scroll:
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('.pineapple-man').show();
}
});
If you are scrolling some other element than the whole window/body, please feel free to change the selectors.
To make the showing one-timer, add the removal of scroll event listener, by adding the following after the .show() call:
$(window).unbind('scroll');
I guess you want to do something like this:
if($(document).scrollTop() > $(document).height()/2){
$('.pineapple-man').show();
}
where scrollTop() gets the current horizontal position and height() defines the document height.
See the scroll event and the scrollTop method.
you can use the focus event if you scroll down to it (just like jQuery uses for their comments)
jQuery('selector').focus(function() {
jQuery('.page').show();
});

Categories