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?

Answer 1

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.