Develop Reference

How to get the exact clientX and clientY JavaScript Position into a child div element on a Wordpress Page?

I have a highlight hover map built in JavaScript that shows a div 'info box' when I hover a certain area # https://isidors.com/test/dupex/contact The problem is that my 'info box' div element does not seem to appear at the exact mouse location, as desired, but it is offset with certain values, which I do not understand where they come from. I had to apply some correction to make it show right.
The div element I have put my map in is a child element of other div. Maybe I have somehow to set the clientX and clientY relative to the div element that has the hover map. Here's my JavaScript code:
<script>
$(document).ready(function() {
$('#regiuneest, #regiunecentru, #regiunevest, #regiunenord').hover(function(e) {
$('#info-box').css('display','block');
$('#info-box').html($(this).data('info'));
});
$("g, circle, #info-box").mouseleave(function(e) {
$('#info-box').css('display','none');
});
$('#cod').mousemove(function(e) {
var paraM = e.clientY/4;
$('#info-box').css('top',e.clientY + $(document).scrollTop() - 600);
$('#info-box').css('left',e.clientX - ($('#info-box').width()/2) - 100);
}).mouseover();
var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
$('a').on('click touchend', function() {
var link = $(this).attr('href');
window.open(link,'_blank');
return false;
});
}
});
</script>
When everything(see full code sample without corrections needed to work in WordPress https://codepen.io/SilviuIsidor/pen/EweZwR) is on a single page it works fine. When I put it into a Wordpress page, clientX and clientY for mouse position seem to stop working correctly. How can I fix this?

I have finally found a solution for my problem. I just changed the css position attribute of the map to relative and of the info-box to fixed, and removed the corrections I put.
It works like a charm now. Thanks anyone that looked into this post!

Update position of div while scrolling

For another stack question I have tried to write a short script. It should track the position of a div .list_item while scrolling and apply the .offset().top to another div.
To test if the function is fired I have written a console.log inside my code, which was never seen again. Why does my function do not fire while scrolling?
$(document).ready(function() {
// fire function everytime the window is scrolled
$(window).scroll(function(){
// set element to relate to
var list_items = $('div.list_item');
// get each position
list_items.each(function() {
// store offset().top inside var
var list_item_position = $(this).offset().top;
// select previous dropdown_list item
$(this).prev().find('ul.dropdown_list').css({
// apply offset top
top: list_item_position + "px"
});
});
// write to console to track changes
console.log('positions updated');
}); // .scroll
}); // document.ready
Suggestions appreciated!
JSFIDDLE DEMO

As pointed out by #Carlos Delgado in the comments, $(window).scroll tracks, if the windows is being scrolled, while setting the first line to $('#wrapper').scroll tracks, if the #wrapper is being scrolled, which works perfect.
Thanks for pointing this out and the other helpful comments!

css scrollLeft animate moves body vertically

Hi I am trying to write a function that horizontally scrolls a div to a specific point given a parameter. Everything functions properly except when the document/body is scrolled down and the function is executed by pressing a letter. When this happens the whole document/body is scrolled up to the top. I really can't figure out what I am doing wrong here but I don't want the page to scroll to the top.
an example of the code can be found at http://www.hokosounds.com/testRedesign/store-test.html#
Thanks for the help!

$(document).ready(function(){
$('a').click(function(e, _letter){
e.preventDefault();
var _letter = $(this).html();
scrollToLetter(_letter);
});
scrollToLetter = function(_letter) {
var _distance = $('#'+_letter+'Start').position().left+$('#store-nav-artist-names').scrollLeft();
$('#store-nav-artist-names').animate({
scrollLeft: _distance
}, 800);
};
});

The page will scroll to the top if you don't handle the click event to either return false or event.preventDefault http://api.jquery.com/event.preventDefault/
It will stop the behavior of a link being clicked.

jQuery Resizing Object

I am trying to get this resizing object to work properly.
When MouseDown (holding), object resizes to 80px.
When release, I want the object to resize back to normal.
Problem:
As the object resizes from 100px to 80px on MouseDown, it may happen that the mouse is no more in the object itself, so releasing the mouse won't trigger the "resize back to normal" animation again.
That's why I tried to do a workaround with this:
if (global.mouseup) and ($('#myimage').width('80px'))
Complete code at:
http://jsfiddle.net/G8Ste/568/
Thanks for any help !

Bind a mouseup handler to the document that resizes the img back to normal:
$('#myimage').mousedown(function() {
var img = $(this);
img.stop().animate({
width: ['80px', 'swing'],
height: ['80px', 'swing'],
}, 50, 'swing');
$(document).one("mouseup", function(){
img.css({width:"",height:""});
});
});
Working demo: http://jsfiddle.net/G8Ste/569/
A couple of notes about your code.
You don't have a global variable defined, so you are getting an error there.
Instead of and, you must mean &&.
Edit: You can, of course, use the animation as you have in your original code. Demo here: http://jsfiddle.net/G8Ste/574/. The limitation of that is that you have to duplicate code, specifying the default width and height in the CSS and in the JavaScript. You can resolve that any number of ways, such as using the technique I describe in this answer, or using jQuery-UI's .switchClass() and related methods. Example using jQuery-UI:
$('#myimage').mousedown(function() {
var img = $(this);
img.stop().addClass("small", 50);
$(document).one("mouseup", function(){
img.stop().switchClass("small", "large", 150, function() {
img.removeClass("large", 1000);
});
});
});
Demo: http://jsfiddle.net/G8Ste/576/

image gallery /slide with zoom

I wanted to do something similar to this.
In this case when the user click in the image, this images is showed with 100% of the browser height, and the user can go to the next/previous image. When the user clicks again the image is showed in a bigger size(may be in the real size) and the user can go up and down in the image, but with out scroll, just moving the mouse.
What I want to do is when the user click the first time in the image go right to the last step: The biggest image with up and down synchronized with the mouse movement, and the possibility to go to the next image. In other words a mix with the features of the first and the second step of the original case.
Where I can see a tutorial, or a demo?? or how can I do the this??
Thanks

Basically, there are three parts to what you want to do.
Clicking on the image will show the image with respect to browser height
You can go to the next image while you are in this mode
Click on that image again will go into a supersize mode where your mouse position dictates what part of the image you are looking at
I'm not going to write a whole fiddle to demonstrate this because it's a decent amount of work but I can tell you the basic ideas.
With #1, when you click on the image, you will create a new div with a z-index of some high number (like 9999). The position would be fixed, and you will create
$(window).resize(function() {
var windowheight = $(window).height();
$("#imgdiv").css("height", windowheight);
});
Which will resize the image if the user decides to resize your window, this way it's always taking up the full height of your browser.
With #2, the arrows just create a new img tag. And the idea is something like
function loadnew() {
// create the new image
var newimg = "<img id='newimg'></img>"
$("#imgcontainer").append(newimg);
// make sure it has the same classes as the current img
// so that it's in the same position with an higher z-index
// then load the image
$("#newimg").addClass( "class1 class2" );
$("#newimg").css( "z-index", "+=1" );
$("#newimg").css( "opacity", 0 );
$("#newimg").attr("src", "url/to/img");
// animate the thing and then replace the src of the old one with this new one
$("#newimg").animate( {
opacity: 1;
}, 1000, function() {
$(oldimg).attr("src", $("#newimg").attr("src"));
});
}
Now with #3, you will size the image with respect to the width. The div fixed positioned. So again, you need a
$(window).resize(function() {
var windowwidth= $(window).width();
$("#imgdiv").css("width", windowwidth);
});
to make sure it's always taking up the whole screen. And for the mouse movement, you need to have a mousemove event handler
$("#superimgdiv").mousemove( function(e) {
// need to tell where the mouse is with respect to the window
var height = $(window).height();
var mouseY = e.pageY;
var relativepct = mouseY/height;
// change the position relative to the mouse and the full image height
var imgheight = $("superimg").height();
$("superimgdiv").css("top", -1*relativepct*imgheight);
});
And that's it. Of course I'm leaving out a bunch of details, but this is the general idea. Hopefully this can get you started. Good luck.