We Keep Coding

Determine X coordinate of a mouse click

I'm making custom controls for html5 video. My problem is occurring when I click on the seek bar. The x coordinates are far off. As I understand, I need to account for all the margins and padding down to root element, i.e. myElement<parentOfMyElement<parenOfparentOfMyElement ... and so on. Every one of them has its own styling with padding and margins and whatnot. How to achieve that without going through entire dom tree backwards?
I tried:
if(e.target.id==="progress"){
parent = e.target;
let x = e.pageX - parent.offsetLeft;
console.log(x);
}
if(e.target.parentNode.id==="progress"){
parent = e.target.parentNode;
let x = e.pageX - parent.offsetLeft;
console.log(x);
}
and other variations. I basically need that when I click on the parent element, get x coord in that element, starting with zero when I click the far left, where the arrow on the image points.
PS: If it's fixed value that's being added up to x it wouldn't be a problem, but since resolution gets changed(resize, or in mobile rotate), x coord isn't fixed at any given time even when clicking at exact same spot due to previously mentioned.
Edit as per request:
<div id="progress" onClick={this.trackProgress} className="progress text-center">
<div id="progress-bar-num" className="progress-bar-num">{Math.round(this.state.width.toFixed(2))+"%"}</div>
<div id="progress-bar" onClick={this.trackProgress} className="progress-bar bg-success" style={{width: Math.round(this.state.width.toFixed(2))+"%"}}></div>
</div>
Don't let my markup confuse you, it is done in React. Effect would be the same if it's done in vanilla js.

Your problem is that you're handling the event in a parent of the status bar element, so .offsetX is relative to the x position of parent and not the status bar.
Put the event handler on the status bar element itself and the .offsetX property of the event will work as you expect.

Scale and change an element from an image to a word, depending on scroll position.

I have seen some scrolling effects for example on Google SketchUp's site, their banner is initially "built into the page" and then it seems to pop out and remain stuck at the top after a certain position down (scrolling).
Google Plus seems to have some special effects as well, like changing the banner entirely once the scrolling has reached a certain position.
Attached is what I am trying to accomplish. A square logo is on the right, and then when the page is scrolled down, the logo starts to scale to the same height as the banner/header / fade and then becomes a word rather than the image.
What am I looking at here? jQuery or javascript? How do I track the scrolling and connect the two?

Is it what you want to achieve?
http://jsfiddle.net/agdbd8x6/15/
If so, it is quite easy. If you use jQuery, attach 'scroll' event handler and check current scroll position. Show the image only with zero scroll position:
var img = $('#image');
var txt = $('#text');
$(".container").scroll(function(){
txt.text('Scroll position = ' + $(this).scrollTop());
var showImage = $(this).scrollTop() == 0;
if (showImage){
img.css('display', 'inline');
txt.hide();
}
else{
img.hide();
txt.css('display', 'inline-block');
}
});

jQueryUI draggable element loses containment

I have a little thumbnail that represents all the window. You can move div#maquetaPant and the window should to scroll at the same time you move the little square.
It's easier If you try:
http://www.noteboardapp.com/boarddemo
Drag the little square on the mini map on top right.
The code is here. If I put the function "dragMaqueta" in the stop event, then it works well. But I want it in the drag event to scroll the window at the same time of dragging the square. But if you try you'll see that doesn't work. It seems that window.scrollTo(scrollX,scrollY) moves the square outside the container.
<div id="canvasDiv">
<canvas id="canvas" width="125" height="100"></canvas>
<div id="maquetaPant"></div>
</div>
#maquetaPant
{
position: absolute;
}
$("#maquetaPant").draggable({containment: '#canvasDiv',drag: dragMaqueta});
function dragMaqueta(evt,ui)
{
var scrollX = parseInt(ui.position.left / $('#canvasDiv').width() * $('.Postits').width());
var scrollY = parseInt(ui.position.top / $('#canvasDiv').height() * $('.Postits').height());
window.scrollTo(scrollX,scrollY);
}
Do you know how to solve it?
Thank you!

How to track mouse position from on page load as well as on mouse move?

I am tracking mouse movements using the following JavaScript:
var mouseX = 0;
var mouseY = 0;
document.onmousemove = function (e) {
mouseX = e.clientX;
mouseY = e.clientY;
}
My problem is that if the mouse hasn't been moved since the page had been loaded, the mouseX and mouseY values both equal 0. How can I get the mouse values when the page is loaded as well as when the mouse is moved?

The browser doesn't know where the mouse is until it moves.
It's more complicated than just "get me the cursor position". What if there is no mouse (tablet) or what if the mouse is not over the browser window?
For the same reason, you can't get hover events on an item if the cursor is already hovering when the page loads. It takes a mouse movement for those events to fire.
Go to some site, hover over a link that has a hover effect (like underline), refresh the page (without moving your cursor) and you'll see that even though your cursor is hovering over the link, it doesn't get the hover treatment until you move the cursor.
Unfortunately this is a browser-level issue, not a javascript issue.

You can define mouseover event for the document in order to catch the first mouse interaction on page load.

Picture follow a mouse in a <div>

How can I make a picture follow the mouse in a specific <div>?
I know that I can get the mouse position from e.pageX & e.pageY and with the code document.onmousemove = followmouse;. Run the followmouse function every moment the mouse move in a page and in the followmouse function, set the picture position to the mouse position. For the exact question I asked here (how can I make a picture follow the mouse in a specific <div>), I have this idea:
Get my div top, left, width, and height and do some math and if mouse go out of the div, set visibility:hidden for the picture.
But isn't there any simple way to do this?

Let's assume you have some HTML like this,
<div id="mydiv" style="width: 300px; height: 300px;"></div>
<img id="myimg" style="position: absolute;" alt="" />
then
document.getElementById("mydiv").onmousemove = function(e) {
document.getElementById("myimg").style.top = e.pageY*1 + 5 + "px";
document.getElementById("myimg").style.left = e.pageX*1 + 5 + "px";
}
would move your picture to the mouse only if the mouse is over the div.

So long as the picture is actually contained in the div and you move it relative to its normal position, then I think setting overflow:hidden on the containing div should work. When I say "setting", I don't mean every time the mouse moves outside, but just once in the main CSS.