179
rated 0 times
[
182]
[
3]
/ answers: 1 / hits: 33841
/ 12 Years ago, tue, may 8, 2012, 12:00:00
Hi,
I have done a popup which is by default hidden and opened whenever a click is triggered on window. Popup must be shown at wherever the event is triggered.But there are some constraints:
Popup must be shown at current visible window.Meaning,If I clicked at right most part of the window then,popup must be shown to right side of the clicked position to avoid scrolling.
If window has scrolling, irrespective of scrolling it should be shown at visible part of the window.
Everything is working fine in my present code except in the case,if window has scrolling.
If scroll down and click on the middle of the window, popup is displayed at out of the window current display area.........................
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<script type=text/javascript src=http://code.jquery.com/jquery-1.7.1.js></script>
<script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js></script>
<style>
div{
border:1px solid;
background:#ff9999;
width:500px;
height:500px;
display:none;
position:absolute;
}
</style>
<script>
var mouseX,mouseY,windowWidth,windowHeight;
var popupLeft,popupTop;
$(document).ready(function(){
$(document).mousemove(function(e){
mouseX = e.pageX;
mouseY = e.pageY;
//To Get the relative position
if( this.offsetLeft !=undefined)
mouseX = e.pageX - this.offsetLeft;
if( this.offsetTop != undefined)
mouseY = e.pageY; - this.offsetTop;
if(mouseX < 0)
mouseX =0;
if(mouseY < 0)
mouseY = 0;
windowWidth = $(window).width();
windowHeight = $(window).height();
});
$('html').click(function(){
$('div').show();
var popupWidth = $('div').outerWidth();
var popupHeight = $('div').outerHeight();
if(mouseX+popupWidth > windowWidth)
popupLeft = mouseX-popupWidth;
else
popupLeft = mouseX;
if(mouseY+popupHeight > windowHeight)
popupTop = mouseY-popupHeight;
else
popupTop = mouseY;
if(popupLeft < 0)
popupLeft = 0;
if(popupTop < 0)
popupTop = 0;
$('div').offset({top:popupTop,left:popupLeft});
});
});
</script>
</head>
<body>
<br/><br/><br/> <br/><br/><br/><br/> <br/><br/> <br/> <br/> <br/> <br/> <br/> <br/>
<br/><br/> <br/> <br/> <br/> <br/><br/><br/> <br/><br/> <br/> <br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<div>
s dflasld fsadf
sdfas dfsadf
</div>
</body>
</html>
Can you please check it.......
More From » jquery
