Develop Reference

How to show point icon on image at specific point in <img> tag in html5 like google maps

we have an image tag and when the user clicks at a specific point on the image , i want to show a point icon at that position like the google maps is showing on the maps.

You could for instance do something like this:
Javascript
var $clickable = $('#clickable');
$clickable.on('click', function(e) {
var $pointer;
$clickable.append('<div class="pointer" />');
$pointer = $clickable.find('.pointer');
$pointer.css({
top: event.pageY - $clickable.offset().top,
left: event.pageX - $clickable.offset().left
})
e.preventDefault();
})
Please take a look at https://jsfiddle.net/xonqq259/1/ for a working example.
You need a relative wrapper and add a pointer element with absolute positioning.

Center an element in middle on screen for an horizontal scroll list

I'm attempting to have the element clicked being positioned automatically at the center of the screen. The list is having a horizontal scroll with some overflow-x : scroll which is hiding what's outside of the div(screen).
I can't find out what coordinates to pass to scrollLeft().
$('#timepicker li').on('click',function(){
var maxScrollLeft= $("#timepicker").scrollLeft('#timepicker').prop('scrollWidth') - $("#timepicker").width();
$('#timepicker').animate({
scrollLeft:
});
});
Please see my codepen: codepen
thank you.

Its a little tricky, but here's the solution.
var left = $(this).offset().left
var width = $("#timepicker").width();
var diff = left - width/2
$("#timepicker").scrollLeft($("#timepicker").scrollLeft()+diff)
Basically what i've done is get the present left position of the clicked element and divide it with half of the width of the container. This gives the difference which the scroller has to move in order to take the elment to the middle. Hope you understood the logic.
Here's the codepen attached
http://codepen.io/prajnavantha/pen/eNwWgx
You can copy paste this in the code pen click handler and see it working.

try this
$('#timepicker li').on('click',function(){
var pos=$(this).position().left; //get left position of li
var currentscroll=$("#timepicker").scrollLeft(); // get current scroll position
var divwidth=$("#timepicker").width(); //get div width
pos=(pos+currentscroll)-(divwidth/2); // for center position if you want adjust then change this
$('#timepicker').animate({
scrollLeft: pos
});
});

Position tooltip above mouse when room in viewport, otherwise below mouse

I am creating a tooltip and am having some problems with positioning it.
The tooltip is set to position: absolute, and I have a handler for mouse events that modifies it's top and left CSS depending on the pageX and pageY.
Now, I know I can just set the top to pageY and left to pageX. That will make the tooltip pop up to the bottom-right. I'm trying to orient it where it pops up on the top-right when there is room, but if it would be out of the viewport on the Y-axis, drop to the bottom-right position again.
At the moment, I'm stuck trying to get the tooltip to show to the top-right of the mouse. I don't even know where to begin detecting if it would be in the viewport. Can anyone point me in the right direction?
$('p').on('mouseenter', function(e) {
$(tt).css('top', e.pageY - $(tt).css('height'));
$(tt).css('left', e.pageX);
$(tt).appendTo('body');
}).on('mousemove', function(e) {
$(tt).css('top', e.pageY - $(tt).css('height'));
$(tt).css('left', e.pageX);
}).on('mouseleave', function(e) {
$(tt).detach();
});
Example on JSFiddle

There are many different ways to handle tooltips, especially when using jQuery. This method probably would not have been my first choice. However, the following changes should work how you intended.
var tt = document.createElement('div');
tt.id = "tt";
$('p').on('mouseenter', function(e) {
var curPos = $( this ).offset().top - $( window ).scrollTop();
var inView = (curPos < 250) ? 0 : 250;
$(tt).css('top', e.pageY - inView);
$(tt).css('left', e.pageX);
$(tt).append($( this ).attr("data-myId"));
$(tt).appendTo('body');
}).on('mousemove', function(e) {
$(tt).css('top', e.pageY - $(tt).css('height'));
$(tt).css('left', e.pageX);
}).on('mouseleave', function(e) {
$(tt).empty($( this ).attr("data-myId"));
$(tt).detach();
});
Full changes in JSFiddle.
I am taking advantage of jQuery's offset() and scrollTop() methods to estimate the position of the current element within the viewable area of the document.
According to jQuery's API documentation, the .offset() method
allows us to retrieve the current position of an element relative to
the document. The documentation also states that the vertical
scroll position (.scrollTop()) is the same as the number of pixels that are hidden
from view above the scrollable area.
We use both of these methods to our advantage and subtract the number of pixels above the scrollable area from the current position of the element relative to the document. One important thing to note is that the offset method returns an object with the properties top and left.
var curPos = $( this ).offset().top - $( window ).scrollTop();
Since you had the #tt id set to a static 250px height, we can check if the current element position relative to the viewable portion of the window is less than 250. If it is, then we subtract nothing and let the tool tip sit below the mouse position. If it is greater than 250 then we subtract 250px and the tool tip will be above the current mouse position.
I am not sure how you were intending to pull in the content for the tool tips, but I also added $(tt).append($( this ).attr("data-myId")); to use the data-myId value as the tool tip content and $(tt).empty($( this ).attr("data-myId")); to clear it on mouseleave. I hope this helps!

Hover event on div under absolute positioned div

Is possible to obtain hover event on element, which is under absolute positioned div? That absolute positioned div is child of body element, but that under isn't, so they are not in relationship parent/child. I do drag and drop of that absolute div and i want highlight area, where user can drop, when mouse it's under that area.
enter code here
http://jsfiddle.net/Rv8kp/

Short answer would be no, you cant. But.. there is a workaround
You can add mousemove event handler for the whole document. Inside the handler you check if mouse position is in the area of the element you need to hover.
var $pos = $("#pos");
var top = $pos.offset().top;
var left = $pos.offset().left;
var bottom = top + $pos.height();
var right = left + $pos.width();
$(document).mousemove(function (e) {
if (e.pageY >= top && e.pageY <= bottom && e.pageX >= left && e.pageX <= right)
$pos.addClass("hover");
else
$pos.removeClass("hover");
});
you can view full working example here

Getting mouse position inside parent div with javascript/jQuery [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery get mouse position within an element
I have a page and inside that page I have a div.
If the user clicks inside that div it'll store the X/Y co-ordinates of where they clicked inside that div.
E.g. if I clicked in the top left corner of the div (no matter where the div was placed on the page) it'd return approximately 0, 0.
Is this even possible? and if so, could you tell me how - or even point me in the right direction?

Use pageX property of the event to get the x coordinate relative to the page and pageY to get the y coordinate, then substract the element's coordinates to get the position relative to the element.
$( '#target' ).on( 'click', function( e ) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
});​
Demo: http://jsfiddle.net/WhrFt/
Official tutorial on jquery.com: http://docs.jquery.com/Tutorials:Mouse_Position