Edit Question - KnowledgeHub

Title Body

I am creating an image hover effect but I am having problem with it. When I hover over certain images, the scrollbars appear which I want to avoid but don't know how to do so. I believe it has to do with viewport and calculations but am not sure how that is done. Example Here JSBin Code Here is the code: $('.simplehover').each(function(){ var $this = $(this); var isrc = $this[0].src, dv = null; $this.mouseenter(function(e){ dv = $('<div />') .attr('class', '__shidivbox__') .css({ display: 'none', zIndex : 9999, position: 'absolute', top: e.pageY + 20, left: e.pageX + 20 }) .html('<img alt="" src="' + isrc + '" />') .appendTo(document.body); dv.fadeIn('fast'); }) .mouseleave(function(){ dv.fadeOut('fast'); }); }); Can anyone please help me how do I make it so that hovered image appears at such place that scrollbars dont appear? (Of course we can't avoid scrollbar if image size is very very big) I just want to show original image on zoom while avoiding scrollbars as much as possible. Please note that I am planning to convert it into jQuery plugin and therefore I can't force users of plugin to have overflow set to hidden . The solution has do with viewport , left , top , scroll width and height , window width/height properties that I can incorporate into plugin later on. Update: I have c

Tags (comma-separated) Cancel