PDA

View Full Version : How to create popup div centered on screen, even after scroll.



pepsi_max2k
Mar 16th, 2007, 06:45 PM
Hi, I'm trying to create a popup div that's centered on the screen both vertically and horizontally, even after scrolling down the page.

The best I've managed so far is centering it horizontally, but it's only centered vertically at the top of the screen (oppening the div from lower down the page only opens the div at the top of the page). That's using this css code:


top: 50%;
left: 50%:
margin-top: -HALF_OF_DIV_HEIGHTpx;
margin-left: -HALF_OF_DIV_WIDTHpx;

I've tried a few other things but I can only find references to do it with Javascript, which are generally useless as I can ONLY use code that applies itself to a given css class, I can't add code to the link itself. I found the following on another site, but it doesn't seem to work (if you spot any obvious errors please correct :thumbsup: )



<script type="text/javascript">
var Interval;
var popUp;

function showPopup() {
Interval = window.setInterval("checkScroll()", 500);
popUp.style.display='block';
}

function hidePopup() {
clearInterval(Interval);
popUp.style.display='none';
}

function checkScroll() {
popUp.style.top = Math.round((document.documentElement.clientHeight/2)-(popUp.style.height/2)+document.documentElement.scrollTop)+'px';
popUp.style.left = Math.round((document.documentElement.clientWidth/2)-(popUp.style.width/2))+"px";
}

window.onload = function() {
popUp = document.getElementById('NAME_OF_DIV_ID');
}
</script>

Any ideas how I can get the thing working, either using just css or javascript?

Even better would be oppening something at a location based on the link clicked to open it (ie. you click the link and the div pops up right next to the link, regardless of where links are on page).

Thanks.

karinne
Mar 16th, 2007, 06:54 PM
Something like LightBox (http://www.huddletogether.com/projects/lightbox2/) or LiteBox (http://doknowevil.net/litebox/)

pepsi_max2k
Mar 16th, 2007, 07:26 PM
Something like LightBox (http://www.huddletogether.com/projects/lightbox2/) or LiteBox (http://doknowevil.net/litebox/)

Neither of those would work.

http://www.inaudible.co.uk/crimea/

The div i want to change is oppened by clicking any of the google video bar video images. I can't change any of the link code for the videos, but they all open a div with class=videoPlayer, which I can alter using css.

jlhaslip
Mar 16th, 2007, 08:09 PM
The div i want to change is oppened by clicking any of the google video bar video images. I can't change any of the link code for the videos, but they all open a div with class=videoPlayer, which I can alter using css.

Might've mentioned that in the original posting.

pepsi_max2k
Mar 16th, 2007, 11:07 PM
Might've mentioned that in the original posting.


I've tried a few other things but I can only find references to do it with Javascript, which are generally useless as I can ONLY use code that applies itself to a given css class, I can't add code to the link itself.

:p sorry if it didn't make sense first time round.