Develop Reference

Detecting mouse position in viewport (not in document)

I want to create a page that scrolls horizontally when user moves his mouse near left/right edge of the screen. My current code is:
$(window).mousemove(function(e) {
var mousePosition = e.pageX,
bodyWidth = config.windowWidth - 300;
if(mousePosition >= bodyWidth) {
$('body, html').animate({
scrollLeft: '+=50'
}, 100, function() {
console.log($('body, html').scrollLeft())
});
}
if(mousePosition < bodyWidth) {
$('body, html').stop()
}
});
It works great, but only until you get a little farther. Then it gets mousePosition from documents point of view, not viewport's. How can I fix this?

event.clientX/Y -> viewport
event.pageX/Y -> document

Updating position on drag

I'm trying to create a crude crop tool with JavaScript/jQuery. I have a HTML element with fixed dimensions and overflow:hidden that I’m using as my canvas. The user should be able to drag an image inside this element, to position the image to their liking within the crop boundaries.
I’m having a little trouble with calculating the correct offset.
I’ve set up a jsFiddle here: http://jsfiddle.net/YtyFH/
The part I’m having trouble with is:
if (drag) {
$img.css({
top: e.offsetY - this.offsetTop,
left: e.pageX - this.offsetLeft
});
}
Currently, when the user begins to drag inside the canvas, the edge of the image snaps to the cursor position. I’d like the image to begin moving from where it already is.

This is a possible fix. See the Updated Fiddle
var $img = $this.find('img');
var offset = {
left : $img.css('left') == 'auto' ? e.pageX : e.pageX - parseInt($img.css('left')),
top : $img.css('top') == 'auto' ? e.pageY : e.pageY - parseInt($img.css('top'))
}
$this.on('mousemove', function (e) {
if (drag) {
$img.css({
top: e.pageY - offset.top,
left: e.pageX - offset.left
});
}
})

jQuery - Display image next to mouse cursor only when certain HTML attribute is met

I currently have an image displaying when the mouse hovers over a div...
but i only what the image to display next to the mouse if a "div" has a HTML property of "align="center" and if it doesn't then i don't want the image to display?
I think i'm quiet close but i can't figure out how to call the var "divalign" attribute, spent all last night on it :S
$(document).ready(function() {
var $img = $("#MainImage");
$img.hide();
var divalign = $("div").attr("align="center");
$('div').mousemove(function(e) {
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}).mouseleave(function() {
$img.fadeOut(250);
});
});
Thanks in advance.

$('div').mousemove(function(e) {
if ($(this).attr('align') === 'center') {
// only show if the align attribute has value center
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}
}).mouseleave(function() {
$img.fadeOut(250);
});

You have error in this line
var divalign = $("div").attr("align="center");
Change that to
var divalign = $("div").attr("align","center");

It would be cleaner, if you could give these DIVs a class name (ex: class="alignCenter"), then register the event handler on those divs.
$('div.alignCenter').on('mousemove', function(e) {
..........................
});

Try this:
$('div[align="center"]').mousemove(function(e) {
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}
}).mouseleave(function() {
$img.fadeOut(250);
});

Animating an Image to Position of Mouse Click

I am attempting to use JQuery to animate an image to the point where I click my mouse on a div.
The div of the html has an id of "stage" and the image has an id of "player". I have successfully gotten the header to update when the user clicks on the stage, but once I add in the other JQuery to have the image move to my mouseclick on the stage, neither works.
Perhaps its something obvious since I'm new at JQuery but hopefully someone can spot my error.
Here's my code for the JQuery:
$(document).ready(function(){
//alert('It works');
$('#stage').click(function() {
$('#header').html('Image is moving!');
});
$('#stage').click(function(e){
$('#player').animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
});
In summary, when someone clicks in the stage div the header above it should change, and the image should move to where the person clicked on the stage.

Two things:
$('#player').animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
Has syntax errors. It should be:
$('#player').animate({
top: e.pageY,
left: e.pageX
}, 800);
Notice I left off 'px' since it isn't necessary.
You can see it working here: http://jsfiddle.net/VBzUw/

How to force positioned elements to stay withing viewable browser area?

I have a script which inserts "popup" elements into the DOM. It sets their top and left css properties relative to mouse coordinates on a click event. It works great except that the height of these "popup" elements are variable and some of them extend beyond the viewable area of the browser window. I would like to avoid this.
Here's what I have so far
<script type="text/javascript">
$(function () {
$("area").click(function (e) {
e.preventDefault();
var offset = $(this).offset();
var relativeX = e.pageX - offset.left;
var relativeY = e.pageY - offset.top;
// 'responseText' is the "popup" HTML fragment
$.get($(this).attr("href"), function (responseText) {
$(responseText).css({
top: relativeY,
left: relativeX
}).appendTo("#territories");
// Need to be able to determine
// viewable area width and height
// so that I can check if the "popup"
// extends beyond.
$(".popup .close").click(function () {
$(this).closest(".popup").remove();
});
});
});
});
</script>

You would compare the window width/height to the window's scrollTop, scrollLeft, etc.
Here are some methods for you to take a look at:
$(window).width()
$(window).height()
$(window).scrollTop()
$(window).scrollLeft()
$(window).scrollWidth()
$(window).scrollHeight()
Take a look at the jQuery documentation on these methods. Depending on exactly the behavior you want, you'll need to compare the width and position of your popup with the currently visible area of the window, determined with the scroll dimensions.
http://api.jquery.com/scrollTop/ .. etc

I figured out a solution. I added the following code in the place of my 4 line comment in the original question.
var diffY = (popup.offset().top + popup.outerHeight(true)) - $(window).height();
if (diffY > 0) {
popup.css({ top: relativeY - diffY });
}
var diffX = (popup.offset().left + popup.outerWidth(true)) - $(window).width();
if (diffX > 0) {
popup.css({ left: relativeX - diffX });
}
#liquidleaf pointed me in the right direction, so +1 and thanks for that.