How do I detect that Image is outside of (browser)screen and then move it?

Question

I am using this technique to have a popup image of my thumbnails. The only problem is that if the thumbnail is close to one edge of the screen, and the original image is really big, then it gets cut off by the edge of the screen.

I know it requires Javascript, but I'm not entirely sure how to detect that the image is outside of the viewable screen and then make it switch to the other side of the thumbnail.

How can I do this?

Duplicate: http://stackoverflow.com/questions/2079521/how-can-i-get-jquery-to-call-an-event-handler-when-an-image-actually-appears-on-s/2079537#2079537 — Pekka, Feb 04 '10 at 20:29
@Pekka I don't think that will work because the image is only about half off the screen. It looks like the plugin only works if it is fully off the screen? — Atomix, Feb 04 '10 at 20:38
Ah, that makes it more difficult. It's definitely doable using the currrent scroll position and the image's offset position, but I'm not experienced enough in JQuery to write it down off the top of my head. You could take a look at what the plugin does, or somebody may come by here and create a starting point. — Pekka, Feb 04 '10 at 20:45

CogitoErgoSum · Accepted Answer · 2010-02-04T23:17:55.507

You need to do some calculations but it is possible. Using the plugin above do something like this...:

   $('.thumb').mouseover(function () {  
     if( ( $(window).width() - ($(this).siblings('.popup').position().left + $(this).siblings('.popup').width()) ) < 0) {
        //Change the position here..
        alert("Out of browser");
     }

   });

Keep in mind this ONLY tells you that the image is outside of the browser thats it. Additionally, this doesn't take into consideration the margins. You may want to do something more like

   $('.thumb').mouseover(function () {  
     if( ( $(window).width() - ($(this).siblings('.popup').position().left + $(this).siblings('.popup').width() + parseInt($(this).siblings('.popup').css("margin-left") + parseInt($(this).siblings('.popup').css("margin-right")) ) < 0) {
        //Change the position here..
        alert("Out of browser");
     }

   });

Note parseInt is used as it'l return xxpx (xx being the numerical value). parseInt will strip that...There may be a plug in but if you want to do it from scratch this is a good start.

Moving the image itself is another issue I haven't tackled here but I think this should give you a solid start.

How do I detect that Image is outside of (browser)screen and then move it?

1 Answers1