Develop Reference

onmousemove returns different value over elements with z-index

I am trying to display a heatmap of where the user moved their mouse on a screen (using a Chrome extension). I'm using a library called heatmap.js to handle this.
More specifically, I am using this as an example -- https://www.patrick-wied.at/static/heatmapjs/example-mousemove-heatmap.html
My problem is that the site I wish to display this heatmap on is making heavy use of z-index. The issue with this is that when you mouseover an element with a z-index other then auto, the value returned by onmousemove is not what one would expect -- instead of the value of the mouse on the screen, some other value relative to the top left of the screen is returned.
You can see this in action here -- https://jsfiddle.net/rj870o6c/
To counteract this, I tried adding an overlay div on top of the entire page with a z-index of 9999. This works, but then I lose the ability to interact with the page below, and of course, I can not use pointer-events: none; since I need to capture the value of the mouse.
You can see this in action here (try clicking the link in the yellow box, it won't work) -- https://jsfiddle.net/ktwbbpbn/
Is there a way to get the real value of the mouse pointer when hovering over elements that have a z-index?
Any help would be greatly appreciated.

So it turns out that the issue was that I was using layerX and layerY for grabbing the position of the mouse. That's a bad idea for my use case because that only returns data relative to the current layer (https://developer.mozilla.org/en/docs/Web/API/UIEvent/layerX). The answer is to use pageX and pageY instead. See this for more info.
For anyone who might find this useful, here's a JSFiddle with everything working as expected -- https://jsfiddle.net/h1us1syr/

javascript tooltip showing behind css image

I'm pulling an event list calendar in to my site from a third party provider. It's pulled in using a simple javascript call, and has been placed inside a div on my site. When hovering over an event, you get a tooltip popup that shows more information about it (all driven by javascript). I'm using CSS to put an image as the background for the div, but the tooltip popups are appearing behind the CSS sourced image. I've attempted to set a z-index of 0 for the main div that pulls the background image, and then nest a second div for my javascript with a z-index of 1, but it's not doing anything.
I don't have access to edit any of the javascript for the third party calendar system, so the fix has to be accomplished with whatever I can do on my own site. Unfortunately I wouldn't consider myself a pro at web development, so there may well be a very simply answer I'm not finding, but right now I'm stumped.
Any suggestions? Thanks!

It looks like you're trying to set a z-index for an element whose parent element already has z-index. That's not possible. If you want to set a different z-index on the tooltip element it has to be outside of the first div.

It would be really helpful if you could show us some code.
The main reason why z-index doesn't work could be that you forgot to set position. Z-index only works on positioned elements (position: absolute, position: relative or position: fixed).
The second reason could be the one that #kremalicious mentioned. Setting higher z-index to the child element.

HTML/CSS/JS Visible Element with no "Presence"

is it possible to have a visible html element but one which lacks presence on the page?
Let me give you an example of what I mean. Lets say I have a picture gallery and a light box. Usually lightboxes grey out the background so you can focus on the image. All i want is the greyed out overlay but i dont want it to be interactive. So if you were to click on it, you would click on the element behind it. So lets say I have a paragraph and in that paragraph i have a link and covering the paragraph is a overlay at 50% opacity, if i were to hover over the link, the link would react asif the overlay was not there.
I hope I have explained this well enough
AFAIK there is no easy way to do this and the only alternative would be to get the mouse coordinates and relay them somehow :/ is ther anyway what I want is possible?
Thanks

This can be done with pointer-events: none in certain browsers, but unfortunately not any version of IE.

It is not possible to have an overlay be transparent in the sense you want it to be. What you could try to do is the opposite; put the 'overlay' layer behind the rest of your page and then change the opacity of your entire page to 50%. Visually this will not make any difference, but it will remove the bubbly effect of JS clicking.

You can take an element out of the document flow with CSS but when that happens the element still receives click events as long as it is visible.
You could probably attach a click event to the overlay and then use the mouse coordinates with document.elementFromPoint or by manually looping through all the elements you want to be interactive and checking their coordinates on the page. The problem with this approach is that NoScript or a number of other products might detect this as ClickJacking, which it essentially is even though you are using it for a benign purpose.

I don't see why this isn't possible. opacity is about 5 css properties for cross-browser. I am not sure what exactly you mean by an overlay (same thing as a layer or z-index?) or are you talking about the possibility of using a css
for all p tags, then it's p:hover in css, but for a specific p tag, then you use an #id with :hover pseudo-class like this:
#myptag:hover {
background-color: #f3c9d5;
background-image:url(/images/mybgimg.jpg);
color:blue;
cursor:pointer;
}
for opacity, use a number in windows.index from 0 to 100:
//this function modifies the opacity of an element at a
//specific id like el1 or el2 using imageNumber as the index.
//you also specify an opacityInteger, which is an non-negative
//integer number in the range 0..100
//works on chrome, safari, ie, and firefox, all the major browsers.
function processimage(imageNumber, opacityInteger) {
var opacityFloat=opacityInteger/100.0;
//set image style, if we can - I hear it's readonly...
//filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0
document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")";
document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString();
document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString();
}
well, I just realized this is only marginally helpful. while it may get your toward your goal, you may still have to set a css z-index:1; on a layerto get an actual overlay. what I just gave you was an UNDERLAY or simply setting a given p tag's color or background image to another thing. I don't know if that's desirable to you or not. I have found overlays to be extremely difficult to manage, because the page layout engine treats all the layers as if they were the same layer tags-flow-wise and you have to use absolute positioning to force them to stick in a position you want them in. plus it messes up your main page using layers.

Google Maps: Relative to Fixed Positioning

The effect I'm looking for is that I have a div that is floating right with a Google map inside it and when the user scrolls down, I want it to be fixed at top:0px. This is basically what Yelp has for the map on their search page. There's been a few questions that are similar that ask about using JQuery to change the class of a div to fixed once the user scrollsdown but with Google Maps, I can't seem to get the effect to work.
The main reason is that Google Maps is using some sort of javascript that is loading after my own javascript that override the position to absolute and I can't change it through Jquery's css method or anything. So I've added a wrapper that is floating but adds a fixed class upon scrolldown. It fixes to the top of 0px fine but because it was floating, once the position become's fixed it jumps to the left and clobbers my other content.
I found a tutorial online, but it might be deprecated now? It wasn't working.

I had the same problem. All you have to do is create a DIV inside another.
Like this:
<div id="outDIV" style="position:fixed; top:0">
<div id="inDIV" style="width:100%; height:100%">
[map content goes here]
</div>
</div>

I know this is way old, but maybe someone else coming along can get some info out of this one.
Yes, you can add another element encasing the map element, but if you want to get around that you can set a listener for a tilesloaded event and then undo what google's done.
In api v3, you can do it like so:
google.maps.event.addListener(myMap, 'tilesloaded', function(){
document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever';
});
I'm sure there are issues that go with setting a position to a map beyond what google likes, but if you want to keep the number of elements in your document to a minimum (you should really want to), this would be the way to do it.
(edit: adding quotes)

You just needed to pick apart the specifics of what Yelp was doing a little more, I think... their column is floated as well (examine their markup... it's #searchLayoutMapResults), but then inside that, the div #searchLayoutMapResults is the one that gets position: fixed added to it (via the className fixed), so it doesn't change the position of the floated column. So you probably just want an additional wrapper on the map, and add the fixed positioning to that instead of your floated container.
(the markup I found was based on this page)

how to crop html page, not image

I need to select a part of html page and get coordinates of selection, not image - i want to realize this like image cropping (square selection area), how can i do it?
in more detail i want next:
in browser on html page i'm click button, then all page are disabled and become darkgrey color, but small window is showing in real page color, i can manipulate this window: make it larger or smaller - in result i'm need coordinates of this window.

Set up some mouse event handlers on the target element (e.g. the document, a table, etc...)
On mousedown, create a div with a 0,0 size at the point of the click.
On mousemove, resize the div to extend to the new coordinates, using the original x,y from the mousedown event as the origin
On mouseup, do whatever you want with the div coordinates (the "selection") you've just created.
You can use a css class on this overlay div to give it a dashed or dotted border such that it mimics OS selection boxes.
Edit: That just allows you to specify the coordinates of the selection. If you're actually looking to scrape a cropped image of the html page as it is rendered on the user's computer, you'll need some kind of client browser plugin to do that.

This is not possible unless it's a canvas element. You would need a client side addon to render the image for you.
If you just want the coordinates of their selection, you could overlay a transparent element (a canvas, or div) over the whole page. Then use the mousedown and mouseup events to capture the coordinates of the mouse, and optionally draw some sort of transparent square so they know what they're selecting.

I'm not perfectly sure what you want to accomplish, but perhaps you are trying to display only a portion of a larger part of your page.
In that case, I think you are looking for the css overflow property, which can be set to 'hidden', in order to only display a part of for instance a picture.
More information on the overflow property.

Try Firefox's Web Developer Toolbar plugin. It has an option that allows you to view coordinates.

If I understood you well then this is my way:
Just render the page in a <div> (You can put it either directly in html or through <iframe>) then set the some css to the <div> to something like {overflow: hidden; width: 100px; height: 70px}.
To control the offset you need to insert inner <div> and wrap the content of the first one in it, and set the css values to something like {margin-left: -50px; margin-top: -40px;} and you're done.