...

View Full Version : element to follow scroll position and popup when needed



tylerjca
07-29-2007, 03:40 AM
I would like to know how to make a <div> for example follow the scrolling position, but be set to:


div.mask{
color: #000000;
background-color: #cccccc;
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
}
...
....
.....
<a href="#" onclick="showPopup()">Do it</a>

and then when i need it, it will popup starting at the top left side of the browser window. I know I can set it to show at the top left corner of the page, but that won't move if the user scrolls down the page so they will have to scroll back up to see the element.

I'm sure i will probably need javascript for this. can anyone help me out?

Thanks in advance! :)

rwedge
07-29-2007, 07:44 AM
Here's a basic example using scrollTop
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
* { margin: 0;padding: 0; }
body { background: #ffffff; color: #000000;}
a:link { color: #ff0000; }
a:visited { color: #0000ff; }
a:active { color: #ff00ff; }
div.mask{
color: #000000;
background-color: #cccccc;
position: absolute;
width: 100%;
height: 100%;
display: none;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function showPopup() {
var d=document;
var y=d.documentElement.scrollTop ? d.documentElement.scrollTop:d.body.scrollTop;
d.getElementById('mask').style.top=y+'px';
d.getElementById('mask').style.display='block';
d.getElementById('sy').innerHTML=y; // just to show it
}
/*]]>*/
</script>
</head>
<body>

<div id="mask" class="mask" onclick="this.style.display='none'"> </div>

<div id="spacer1" style="height: 500px;width: 10px;border: 1px dotted #ff0000;"> </div>

<a href="#" onclick="showPopup(); return false">Do it</a> <span id="sy"></span>

<div id="spacer2" style="height: 500px;width: 10px;border: 1px dotted #ff0000;"> </div>


</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum