Jump to content

How to make a function run only in a certain area (div)


Nine
 Share

Recommended Posts

My first jQuery attempt :-), I have a working function now, however it should only work when the mouse hovers over the image.

 

I tried something with the hover function, but that does not work properly. Something strange is happening (I displayed the mouse coordinates to see what is happening). http://jsfiddle.net/the1sjLm/5/

<head><script src="jquery-1.11.1.js"></script><script type="text/javascript">$(document).mousemove(function(event) {    var relativeX           =   Math.ceil(event.pageX/123);    var currentStep         =   relativeX*-230;        $(".model").hover(function(){      $(".model").css("background-position", 0+" "+(currentStep)+"px");    //just to check what is happeninga    $("span").text("X: " + event.pageX + ", Y: " + event.pageY)  });});</script><style type="text/css">.model {    width: 300px;    height: 230px;    background-image: url('sprite.png');    background-position:0 3000px;}</style></head><body><div class="model" style=""></div><p>Data <span></span></p></body>
Edited by Nine
Link to comment
Share on other sites

What is happening, and what do you expect to happen? One thing is that you should not set up that event handler inside another event handler. Each time the mouse moves on the page you define another hover handler for the image. Only define that handler once.

Link to comment
Share on other sites

I don't know what you're trying to achieve, but if you want to open/close the window (on the pic) when the mouse moving on the image.. this will do:

 

* change the cursor css to pointer to make it more 'make sense'.

* move the mouse horizontally on the image

$(".model").mousemove(function(){               var relativeX       	=   Math.ceil(event.pageX/123);var currentStep     	=   relativeX*-230;$(".model").css("background-position", 0+" "+(currentStep)+"px");$("span").text("X: " + event.pageX + ", Y: " + event.pageY);    });
Link to comment
Share on other sites

What I am trying to achieve is that the blinds are turning based on the mouse pointer. it should look like they are following the mouse.

I rendered 13 images in which the blinds have a different angle very time so it looks that they are turning around when shown in the right order.

Based on the mouse position one of the 13 images is shown. I only want that the image is changing when the mouse is in the area of the image, now the width of the whole screen is used and I want only to use the part where the image is located.

 

Does that explains a bit more? I will look into the code above, see if I can use it for what I want to achieve.

Link to comment
Share on other sites

The hover event only fires once, when you start hovering over the object. It does not keep firing as you move around. The mousemove event does keep firing, though. So your animation code needs to go in the mousemove event. You can use the mouseover and mouseout events to figure out whether to animate during mousemove.So, when you move the mouse over the image the mouseover event will fire, and inside that event you set a flag like do_animate=true. The mousemove event should check if do_animate is true (meaning that the mouse is over the image), and, if so, do the animation sequence. The mouseout event for the image will set do_animate back to false so that once the mouse leaves the image it will stop animating.http://www.quirksmode.org/js/events_mouse.htmlI'm not sure how jQuery corresponds with mouseover and mouseout, those events are built-in. Maybe jQuery has a wrapper for them.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...