We Keep Coding

Click not registering on Image element

I'm trying to get a click to register on my image tag to get the coordinates of the image click to position an svg element on top of it. As far as I understand, the way I have my code should account for bubbling events, but I'm not 100% certain. Can someone help me understand what I'm doing wrong, information I might be missing from it? As of now, nothing runs.
$(".playing-field").on("click", "#picture", function(e) {
var offset = $("#picture").offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
console.log(relativeX, relativeY);
});
I forgot to add HTML before...
<div class="playing-field">
<img id="picture" src="assets/images/image.jpg">
<svg class="speechbubbles" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">
</div>
I tried the code in Jsfiddle without my CSS, and it works, but when I do add the CSS, it doesn't. I'm not that familiar with CSS rules, so can someone tell me why it would interfere with the clicking of the image?
.playing-field {
position: relative;
height: 500px;
width: 100%;
}
#picture{
position: absolute;
}
.speechbubbles{
position: absolute;
}

You code runs very well.
Try This https://jsfiddle.net/2bm4zjdz/1
$(".playing-field").on("click", "#picture", function(e) {
var offset = $("#picture").offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert( 'x : ' + relativeX + ' y :' + relativeY);
});

Looking around it seems that offset doesn't work in chrome so you will need to use position like so
$(function () {
$('#picture').click(function (e) {
var offset = $(this).position();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert('x :' + relativeX + ' y :' + relativeY);;
});
});

How to remove the delay in jQuery .hover() method

I tried to make my nav element change color as the document scrolls, I also want to make the hover state change color dynamically. But there's a delay, I have to wait for a fraction of seconds before I can hover and change the color. Can I remove the delay? Or better, when I am hovering on a menu, can I make the hovered color change by scrolling? I feel like I'm so close to the solution yet I can't find it.
Here are the jQuery codes:
$(document).ready(function () {
$(document).scroll(function () {
var h = $(window).scrollTop() / $(document).height() * 360;
if (h <= 180) {
hhover = h + 180;
} else {
hhover = h - 180;
}
$("a").css({
"color":"hsl(" + h + ",100%,50%)","transition":"0.2s ease"});
$("a").hover(
function () {
$(this).css(
"color", "hsl(" + hhover + ",100%,50%)");
},
function () {
$(this).css(
"color", "hsl(" + h + ",100%,50%)");
});
});
});
Please find my jsFiddle below:
https://jsfiddle.net/dtZDZ/1036/
Thank you!

In your CSS code:
.nav-links a:hover {
color: hsl(180,100%,50%);
transition: ease;
}

Delete all CSS transition definitions from javascript code and from styles.

repeat call of javascript function is creating conflict

I am using the following JS function to have hover tooltip effect. The function works excellent. Problem happens after loading certain area with ajax. I need to call this function to work on the data collected through ajax (Jquery). That is OK as well. Problem is while I close the area called through ajax, I see unexpected behavior at the base page. The previous tooltip effects now show bubble within self (image is given below).
Any idea how to prevent this conflict?
function tooltip(){
$('.master_tooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
}

Call that function only once, otherwise the event handlers will be bound multiple times for the already existing elements.
What you need to do is rewrite it so it delegates the mouse events and works with dynamically inserted elements, like this
function tooltip(){
$(document).on({
mouseenter : function() {
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title)
.appendTo('body')
.fadeIn('slow');
},
mouseleave : function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
},
mouseover : function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
}
}, '.master_tooltip');
}

Centering Special Javascript Popup, How?

I have this javascript code, lib.js. It manages my every java popup in my site. How ever it is not set to be appear absolutely centered in page, I have tried several css codes for its div. But it did not work. I also tried the famous /2 code but it didnt work or I might have added it to wrong place.
Below is my lib.js:
var currentTime = new Date();
var topP = 0;
$(document, window).keypress(function(e){
if (e.keyCode == 27){
$(".yekbox").fadeOut();
$("#yekbox_overlay").hide();
}
});
$(document).ready(function() {
$(".showme").unbind().hover(
function(e) {
$(".tooltip").remove();
this.t = $(this).next(".description").html();
$(this).append( '<div class="tooltip">' + this.t + '</div>' );
},
function() {
//this.title = this.t;
$(".tooltip").remove();
}
).mousemove(
function(e) {
$(".tooltip").css({
"top" : e.pageY + 20,
"left" : e.pageX + 20
});
}
);
topP = $(this).scrollTop();
//$(".yekbox").css("top", $(window).height()-250 + "px");
//$(".yekbox").css("left", $(window).width()-(440*2) + "px");
$("#yekbox_overlay").css("height", $(window).height());
$(window, document).resize(function(){
topP = $(this).scrollTop();
$(".yekbox").css("marginTop", topP-250 + "px");
if ($(window).width() > 900 ) $(".yekbox").css("left", $(window).width()-(440*2) + "px");
$(".yekbox").css("marginLeft", "auto");
$(".yekbox").css("marginRight", "auto");
$("#yekbox_overlay").css("height", $(window).height());
});
$(window).scroll(function () {
topP = $(this).scrollTop();
$(".yekbox:visible").css("marginTop", topP-250 + "px");
$("#yekbox_overlay:visible").css("height", $(window).height());
});
$(window).bind("scroll",function () {
topP = $(this).scrollTop();
$(".yekbox:visible").css("marginTop", topP-250 + "px");
$("#yekbox_overlay:visible").css("height", $(window).height());
});
$("#yekbox_overlay").click(function(){
$(".yekbox").fadeOut();
$(this).hide();
return false;
});

The JS and HTML code above doesn't help in anything.
In general, if you want a block to be centered to the parent, it should have
A fixed width
margin: auto
If you want a block absolutely centered (position absolute or fixed)
$('#mypopup').css('left', ($(window).width() - $('#mypopup').width()) / 2)

Disabling default tooltip

Here's a tooltip script, http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/. It works great in all the browsers but the default tooltip isn't disabled in IE.
How can i update the following script to disable the default tooltip?
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
});
});
</script>

I don't see any reason to add the title attribute back in to the element on blur. You have it stored in the jQuery metadata. My guess is that is why IE is still showing it. Remove the line
$(this).attr('title', $(this).data('tipText'));
and see if that fixes it.
EDIT: That missed some requirements. This is untested, but might work:
$(document).ready(function() {
$('.masterTooltip').each(function() {
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
}).hover(function(){
$('<p class="tooltip"></p>')
.text($(this).data('tipText'))
.appendTo('body')
.fadeIn('slow');
}, function() {
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 10;
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
Note that this is sub-optimal, as it calls $(this) twice in the each block, but that should be easy enough to fix.

I have simple solution to disable the default tooltip which is shown in left/right bottom side of the IE or other browser. [If your default tooltip is same as I mentioned]
Just write a simple javascript function
function GoToLink()
{
location.href = "mypage.htm";
}
call this function in tag like
<a id="204" name="wow" class="SettPage" href="" onclick="GoToLink()">