Detect the nearest divs to the center screen when scrolling jquery - javascript

I want to detect which div is nearest to the screen center, while scrolling horizontally. Once detected, I want to do something such as trigger an event.
var screenW = ($(window).width() /2);
$('div.fistSlider').bind('mousemove', function(e){
var xN = e.pageX + 16;
$('div#divContainer').scrollLeft(xN);
});
When the div nearest to red line (the center of screen), should do some event.

The answer here is to check for the offset of each div.
$(document).scroll(function(){
$('div').each(function(){
var centerLine = $(window).width()/2;
var divStart = $(this).offset().left;
var divEnd = divStart + $(this).width();
if(divStart < centerLine && divEnd > centerLine){
//do the thing
} else {
//undo the thing
};
});
});

Related

Check if mouse has left specific portion of window

Is it possible to know if mouse has left specific portion of the window? The values are given below:
var cursorX;
var cursorY;
document.onmousemove = function(e){
cursorX = e.pageX;
cursorY = e.pageY;
}
document.addEventListener('mouseout', function(e) {
var dims = elem.getBoundingClientRect();
var top = window.scrollY + dims.top;
var left = dims.left;
var width = dims.width;
var bottom = dims.height;
if (what condition should be here) {
console.log('yes mouse has left that portion')
document.getElementById('div-in-the-end-of-body').style .display = 'none';
}
});
For example values of dims in console log are ClientRect {top: 155.375, right: 621, bottom: 540.375, left: 313, width: 308…}
Here is visual of what I'm trying to achieve.
Edit: That div at the end of the body has absolute position and it hovers on the images. If I hover at that div images consider mouse has left it and hides the div. This is the reason I want to do it this way.
Edit # 2: Here is the solution
elem.onmouseout=function(){
var dims = this.getBoundingClientRect();
var top = window.scrollY + dims.top;
var left = dims.left;
var width = dims.width;
var bottom = dims.height;
if(top > 10 || left > 10 || width > 10 || bottom > 10){
document.getElementById('div-in-the-end-of-body').style .display = 'none';
}
}
Have a look at the mouseout event. Alternatively, you could capture mouse events as soon as your mouse has entered your specific region.
You can bind event listeners to the "regions" you want to check. As your regions are objects in javascript, there are event listeners built in or you can using obj.call to call functions not belong to the object you created. For instance,
let rects[] // this is your list of regions
for (let rect of rects) {
rect.onMouseMove((e) => {
// do something when mouse cursor is moving
})
rect.onMouseEnter((e) => {
// do somthing when mouse cursor enters the area
})
rect.onMouseLeave((e) => {
// do something when mouse cursor exits the area
})
}
Ok, I've figured out the solution. Here is working code for those who might need.
elem.onmouseout=function(){
var dims = this.getBoundingClientRect();
var top = window.scrollY + dims.top;
var left = dims.left;
var width = dims.width;
var bottom = dims.height;
if(top > 10 || left > 10 || width > 10 || bottom > 10){
console.log('yay!! ship has left the dock')
}
}

Getting absolute position of an element in javascript

I am trying to create an overlay effect on mouseover of all elements. I wrote this js code, it works for most of the scenarios and fails under some conditions.
JS Code
$(function() {
var overlay = $("<div id='overlay'></div>").css({position:"absolute","display":"none","background":"red"});
$("body").append(overlay);
$("body").on("mouseover", function(e) {
var t = e.target;
var offset = $(t).offset();
var top = offset.top;
var left = offset.left;
var scrollx = $(window).scrollTop();
var scrolly = $(window).scrollLeft();
top -= scrolly;
left -= scrollx;
console.log(overlay); overlay.css({"top":top,"left":left,"width":"50px","height":"2px"});
overlay.show();
});
});
JS Fiddle
https://fiddle.jshell.net/go2j4fk7/12/show/light/
Failure Conditions
Trying to mouseover element inside an iframe. I use $("iframe").contents().mouseover() to bind event.
If parent element has scroll
If element is in fixed position.
How to create an overlay for any element?

Refresh position left element when browser resize

I have the following JavaScript code.
var x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width();
$(window).scroll(function(){
var scroll = $(this).scrollTop();
if(scroll >= x){
$('.sidebar').addClass('active1');
$('.active1').css({left:offsetY});
}else{
$('.sidebar').removeClass('active1');
$('.active1').css({left:0});
}
});
$(window).resize(function(){
x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width();
});
It works fine, but when I resize the browser window, then the problems begin with the positioning element
I have no idea what you are trying to achieve but I'm guessing that you need to reposition the .sidebar1 and .active1 elements when the window resizes. By that I mean, on the resize handler, do exactly the same you are doing on the scroll handler...
$(window).scroll(updatePosition);
$(window).resize(updatePosition);
function updatePosition(){
x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width(),
scroll = $(this).scrollTop();
if(scroll >= x){
$('.sidebar').addClass('active1');
$('.active1').css({left:offsetY});
}else{
$('.sidebar').removeClass('active1');
$('.active1').css({left:0});
}
}
You need to put your conditions in both events, it has problems if you just put in .scroll event only because it doesn't respond in .resize() event, also if you make a separate function that will be reusable:
function scrlResize(){
x = $('.sidebar').offset().top,
offsetY = $('.left-columns').offset().left + $('.left-columns').width(),
scroll = $(this).scrollTop();
if(scroll >= x){
$('.sidebar').addClass('active1');
$('.active1').css({left:offsetY});
}else{
$('.sidebar').removeClass('active1');
$('.active1').css({left:0});
}
}
$(window).scroll(scrlResize);
$(window).resize(scrlResize);

scroll page content to custom position on mouse scroll

I want scroll page content on mouse scroll.
I have 5 images in page, at a time i want to show one image per screen.
If i scroll down second image showed be shown, if i scroll up previous image should be shown. Like wise until the last image.I have tried an example but have no idea how achieve this.
JavaScript:
var winHeight = $(window).height();
var prevHeight = 0;
var scrollCount = 0;
var docHeight = $(document).height();
$(document).ready(function(){
$(window).scroll(function(e){
console.log("in scroll top");
var top = $(window).scrollTop();
console.log("top - "+top);
if(top !=0 && top != docHeight){
if(top > prevHeight){
scrollCount = scrollCount+1;
}else{
scrollCount = scrollCount-1;
}
console.log("scroll count="+scrollCount);
$(window).scrollTop(winHeight*scrollCount);
prevHeight = top;
if(scrollCount < 0){
scrollCount = 0;
}
e.preventDefault();
}
});
My example is here http://jsbin.com/iwOsiFIY/1/
Just set the margins to what you want them to be for each image in CSS. Or a workaround is adding a bunch of "p" tags in HTML without actually adding a paragraph, The first way is the best. You might also need some JavaScript for resizing.

Javascript/jquery, get all divs location at (x,y). Forwarding touches? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to get a list of all elements that resides at the clicked point?
I know I can get the element with the highest z-index by using document.elementFromPoint(x,y).
The problem is I need to get every div that contains the touch event's location.
How can I propagate touches to elements underneath?
I have seen some hacky solutions that show/hide elements while re-generating the event, or pointer-events style with css, however I cannot use these and they may cause flickering...
The following diagram illustrates what I need to do:
If the purple, green, and blue boxes represent the div elements, and the red dot is the touch location, I need a function that would return "div3, div2, div1".
No flickering with this code:
$("body").click(function(e){
var x = e.pageX, y = e.pageY;
var res = [];
var ele = document.elementFromPoint(x,y);
while(ele && ele.tagName != "BODY" && ele.tagName != "HTML"){
res.push(ele);
ele.style.display = "none";
ele = document.elementFromPoint(x,y);
}
for(var i = 0; i < res.length; i++){
res[i].style.display = "";
}
console.log(res);
});​
What about doing:
$(document).click(function(e) {
var pageX = e.pageX;
var pageY = e.pageY;
$('*').each(function(index) {
var offset = $(this).offset();
var left = offset.left;
var right = offset.right;
var width = $(this).width();
var height = $(this).height();
if(pageX > left && pageX < left + width) {
if(pageY > top && pageY < top + height) {
//Handle the div
}
}
});
});

Categories