I was wondering if there is a way to capture some kind of mouse event or another event when the mouse leaves body crossing top border?
Well I have this campaign at my site when the user leaves body element and cookie is not set I show them this popup for one time only. But this event triggers for all sides of body.
tr = trigger event on leave
I woule like:
tr
+----------+
| |
no-tr| |no-tr
| |
+----------+
no-tr
But i have
tr
+----------+
| |
tr| |tr
| |
+----------+
tr
I have something like this:
$("body").one("mouseleave", initPopup)
My question is if there is a way to trigger this event only when the user leaves body by top border, but not for other borders?
You could use e.offsetY and check if it is less than 0. The offset is calculated from the upper left corner of the element with Y increasing downwards. If e.offsetY is less than 0 it means the event was triggered when the mouse moved above the element with the eventhandler attached.
If the page is scrolled you need to take the scrollTop value into account as the offsetY will have the offset position from the elements top corner even if that is scrolled off the top of the screen.
Since the event will be fired even if the mouse moved out on the other side you can't use .one() but instead you could add a condition to check if the event has been triggered from a "mouse leave" on the top.
DEMO
triggered = false;
$("body").on("mouseleave", function (e) {
if (e.offsetY - $(window).scrollTop() < 0 && !triggered) {
triggered = true;
alert("leave");
}
});
You can try this with jquery:
$('#element').mouseout(function(e) {
if (e.offsetY < 0) {
// your event
}
});
EDIT: edited answer to no-tr on bottom edge. Didn't notice that in question!
Related
I have big parent div and narrow child div in the center of it.
When I scroll mouse wheel over child, it scrolls as it should,
but I want to be able to scroll that child element even if mouse is not on it, but somewhere on parent, and mouse wheel is scrolled.
I'm passing event from parent to child like this:
parent.addEventListener('mousewheel', parentMouseWheel);
function parentMouseWheel(e) {
if (e.target.id === 'parentId') { //to prevent double events when mouse is over child
if (e.wheelDelta > 0) child.scrollTop = child.scrollTop - 120;
else child.scrollTop = child.scrollTop + 120;
}
}
this works, but the problem is, there is no smooth scrolling like there is when I scroll mouse wheel over child (probably because of forcing/passing like this).
So, is there any other way to pass mouse wheel event to child, that will also trigger smooth scrolling?
I'm styling my extension options page, if that means anything...
I'm working on a web application where the user needs to look at a grid of months and select whether documentation exists for a list of objects.
For the sake of user experience, I want to provide the ease of "painting" the grid. So say if the user knows the documentation exists for the whole year, she can just drag her finger across that row and every <td> in that row will have a class applied to it.
From what I can tell from Chrome Dev tools, I can get a lot of events firing when I attach a touchmove listener to each <td>, but the event's target is always the element the touch event started on and never on any other element.
Is there any way to have each <td> respond when a user drags his finger over a table?
Unfortunately the event target is set on the touchstart event so, as you drag your finger across the screen, the same event target is used as the origin of each touchmove event.
The only way around this I can think of would be to use the touchmove event to obtain the position of the touch and then figure out which table cell that would coincide with. If all your table cells are the same dimensions within a given table, taking the position obtained from the touchmove event and dividing it by the width and height of the table would give you the answer. Here's a quick snippet to get you started (this example assumes the table's position is at the very top left of the viewport):
var _columnWidth = 40;
var _rowHeight = 20;
var touchListener = function (e) {
var touch = e.touches[0];
var x = touch.pageX;
var y = touch.pageY;
var xIndex = Math.floor(_someTable.width / x / _columnWidth);
var yIndex = Math.floor(_someTable.height / y / _rowHeight);
};
_someTable.addEventListener('touchmove', touchListener, false);
So, if the width of the table is 80 and the height of the table is 100, and the x and y coordinates is 42 and 67 respectively, then xIndex would yield 1 and yIndex would yield 3 (meaning the second cell from the left and the forth cell from the top using zero-based indices).
Now this is a light example and won't magically solve your problem, but it's a good place to start. Hope this helps!
Simple, I just would like to have it so when a user is dragging an item and they reach the very bottom or top of the viewport (10px or so), the page (about 3000px long) gently scrolls down or up, until they move their cursor (and thus the item being dragged) out of the region.
An item is an li tag which uses jquery to make the list items draggable. To be specific:
../jquery-ui-1.8.14.custom.min.js
http://code.jquery.com/jquery-1.6.2.min.js
I currently use window.scrollBy(x=0,y=3) to scroll the page and have the variables of:
e.pageY ... provides absolute Y-coordinates of cursor on page (not relative to screen)
$.scrollTop() ... provides offset from top of page (when scroll bar is all the way up, it is 0)
$.height()... provides the height of viewable area in the user's browser/viewport
body.offsetHeight ... height of the entire page
How can I achieve this and which event best accommodates this (currently its in mouseover)?
My ideas:
use a an if/else to check if it is in top region or bottom, scroll up if e.pageY is showing it is in the top, down if e.page& is in bottom, and then calling the $('li').mouseover() event to iterate through...
Use a do while loop... this has worked moderately well actually, but is hard to stop from scrolling to far. But I am not sure how to control the iterations....
My latest attempt:
('li').mouseover(function(e) {
totalHeight = document.body.offsetHeight;
cursor.y = e.pageY;
var papaWindow = window;
var $pxFromTop = $(papaWindow).scrollTop();
var $userScreenHeight = $(papaWindow).height();
var iterate = 0;
do {
papaWindow.scrollBy(0, 2);
iterate++;
console.log(cursor.y, $pxFromTop, $userScreenHeight);
}
while (iterate < 20);
});
Works pretty well now, user just needs to "jiggle" the mouse when dragging items sometimes to keep scrolling, but for scrolling just with mouse position its pretty solid. Here is what I finally ended up using:
$("li").mouseover(function(e) {
e = e || window.event; var cursor = { y: 0 }; cursor.y = e.pageY; //Cursor YPos
var papaWindow = parent.window;
var $pxFromTop = $(papaWindow).scrollTop();
var $userScreenHeight = $(papaWindow).height();
if (cursor.y > (($userScreenHeight + $pxFromTop) / 1.25)) {
if ($pxFromTop < ($userScreenHeight * 3.2)) {
papaWindow.scrollBy(0, ($userScreenHeight / 30));
}
}
else if (cursor.y < (($userScreenHeight + $pxFromTop) * .75)) {
papaWindow.scrollBy(0, -($userScreenHeight / 30));
}
}); //End mouseover()
This won't work as the event only fires while you're mouse is over the li.
('li').mouseover(function(e) { });
You need to be able to tell the position of the mouse relative to the viewport when an item is being dragged. When the users starts to drag an item attach an 'mousemove' event to the body and then in that check the mouse position and scroll when necessary.
$("body").on("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});
Dont forget to remove your event when the user stops dragging.
$("body").off("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});
This may not be exactly what you want, but it might help. It will auto-scroll when the mouse is over the 'border of the screen' (a user defined region). Say you have a 40px wide bar on the right of the screen, if the mouse reaches the first 1px, it will start scrolling. Each px you move into it, the speed will increase. It even has a nice easing animation.
http://www.smoothdivscroll.com/v1-2.htm
I get a weekly newsletter (email) from CodeProject, and it had some stuff that certainly looks like it will solve my problem... hopefully this can help others:
http://johnpolacek.github.com/scrollorama/ -- JQuery based and animates the scroll
https://github.com/IanLunn/jQuery-Parallax -- JQuery based, similar to above
http:// remysharp. com/2009/01/26/element-in-view-event-plugin/ -- JQuery, detects whether an element is currently in view of the user (super helpful for this issue!)
Also the site in #2 had some interesting code:
var windowHeight = $window.height();
var navHeight = $('#nav').height() / 2;
var windowCenter = (windowHeight / 2);
var newtop = windowCenter - navHeight;
//ToDo: Find a way to use these vars and my original ones to determine scroll regions
I'm displaying some HTML content in my iPhone app using a UIWebView. I have an image link, and I want it to change when the user touches it - at the moment the user puts a finger on the screen, rather than waiting until they lift their finger back off.
What CSS or JavaScript concept could accomplish this? I've looked at the hover and active states in CSS, but they don't seem to be what I'm after: hover relates to touch-up rather than touch-down, while active seems to have no effect at all.
You could try this.
I think it should be what you are looking for!
http://articles.sitepoint.com/article/iphone-development-12-tips/2
8: Touch Events
Of course, you use your iPhone with a
finger instead of a mouse; rather than
clicking, you tap. What’s more, you
can use several fingers to touch and
tap. On the iPhone, mouse events are
replaced by touch events. They are:
touchstart
touchend
touchmove
touchcancel (when the system cancels the touch)
When you subscribe to any of those
events, your event listener will
receive an event object. The event
object has some important properties,
such as:
touches — a collection of touch objects, one for each finger that
touches the screen. The touch objects
have, for example, pageX and pageY
properties containing the coordinates
of the touch within the page.
targetTouches — works like touches, but only registers touches on
a target element as opposed to the
whole page.
The next example is a simple
implementation of drag and drop. Let’s
put a box on a blank page and drag it
around. All you need to do is
subscribe to the touchmove event and
update the position of the box as the
finger moves around, like so:
window.addEventListener('load', function() {
var b = document.getElementById('box'),
xbox = b.offsetWidth / 2, // half the box width
ybox = b.offsetHeight / 2, // half the box height
bstyle = b.style; // cached access to the style object
b.addEventListener('touchmove', function(event) {
event.preventDefault(); // the default behaviour is scrolling
bstyle.left = event.targetTouches[0].pageX - xbox + 'px';
bstyle.top = event.targetTouches[0].pageY - ybox + 'px';
}, false);
}, false);
The touchmove event listener first cancels the default behavior of the finger move—otherwise Safari will scroll the page. The collection event.targetTouches contains a list of data for each finger currently on the target div element.
We only care about one finger, so we use event.targetTouches[0]. Then pageX gives us the X coordinate of the finger. From this value we subtract half the width of the div so that the finger stays in the center of the box.
Hope it helps!
Try the Javascript "onMouseDown", hopefully the mobile Safari will fire the event.
Link
When the mouse starts hovering over an element because of scrolling (either by wheel, or by keyboard scrolling), it does not trigger a mouseover event on the elements it is hovering (Chrome 6 on OSX). What would be an elegant way to trigger the mouseover event for the correct elements when scrolling?
Honestly, this is gonna be a pain. You'll have to
determine the size and position of every element that should get a mouseover handler.
add a scroll listener to the window.
In the handler, get the mouse cursor position and pageOffset.
Find out which element(s) the cursor is in.
manually call the actual mouseover handler
(Find out which elements the cursor has left, if you want some mouseout behaviour too)
You may need to re-calculate the elements' positions and sizes if they are dynamic. (move 1. beneath 3.)
While this should work fine with block-level elements, I have absolutely no idea on a solution for inline elements.
This is much more simple in the modern day web using document.elementsFromPoint:
Add a scroll listener to the window.
In the handler, call document.elementsFromPoint.
Manually call the actual pointerover handler for those elements. Keep track of these elements.
(optionally) Manually call the actual pointermove handler for those elements.
Check the list of elements from the previous time around. Manually call the actual pointerleave handler for elements no longer being hovered.
Here's some psuedo-code:
let prevHoveredEls = [];
document.addEventListener("scroll", (e) => {
let hoveredEls = document.elementsFromPoint(e.pageX, e.pageY);
hoveredEls = hoveredEls.filter(
(el) => el.classList.contains("elements-cared-about")
);
const notHoveredEls = prevHoveredEls.filter(
(el) => !prevHoveredEls.includes(el)
);
hoveredEls.forEach((el) => {
const bcr = el.getBoundingClientRect();
el.handlePointerEnter({
layerX: e.pageX - bcr.left,
layerY: e.pageY - bcr.top,
});
});
notHoveredEls.forEach((el) => {
const bcr = el.getBoundingClientRect();
el.handlePointerLeave({
layerX: e.pageX - bcr.left,
layerY: e.pageY - bcr.top,
});
});
prevHoveredEls = hoveredEls;
});
Try some hack like myDiv.style.opacity = 1+Math.random(); on scroll ;)