Jquery pop out script

Hey guys, I recently got back into the web design scene and alot has changed since I left..

Iv been designing a personal portfolio for myself over the past weeks.. everything seems to be going fairly well so far I think and iv made some great progress.

Although getting my website compatible with internet explorer has been an absaloute pain !

When using Google chrome or Firefox everything is perfect...


OK so this takes me to my problem.. im using a Jquery pop out script which iv modified slightly to be able to use for multiple pop ups...



/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(id){
target = id;
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.8"
});
$("#backgroundPopup").fadeIn("slow");
$("#popup" + id).fadeIn("slow");
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popup" + target).fadeOut("slow");
popupStatus = 0;
}
}

//centering popup
function centerPopup(id){
target = id;
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popup" + id).height();
var popupWidth = $("#popup" + id).width();
//centering
$("#popup" + target).css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
"height": windowHeight
});

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP
//Click the button event!
$("#contact").click(function(){
//centering with css
centerPopup('Contact');
//load popup
loadPopup('Contact');
});

$("#portfolio").click(function(){
//centering with css
centerPopup('Portfolio');
//load popup
loadPopup('Portfolio');
});

//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});

//Press Escape event!
$(document).keyup(function(event){
if(event.which == 27){
disablePopup();
}
});

});




Although the centering part of the code doesnt work with internet explorer..

Preview (http://teknologix.net) my site here for a better understanding.

Im hoping someone out there holds the answer ! Cause iv been tearing out my hair trying to figure it out..



Thank you for reading.

Restore the doctype on your page, and try removing the width from body - you're setting it on #container anyway, and IE is calculating the width of #popupPortfolio based on 80% of body, rather than 80% of the viewport.

Restore the doctype on your page, and try removing the width from body - you're setting it on #container anyway, and IE is calculating the width of #popupPortfolio based on 80% of body, rather than 80% of the viewport.

Thanks for the reply, #popupPortfolio is fine.. I took your advice and removed the width from my body tag...

When you say restore the doctype what do you mean exactly ?

Earlier you had the doctype commented out - looks like you've removed the commenting now.

Earlier you had the doctype commented out - looks like you've removed the commenting now.

Oh.. Im not too sure what I did.. although it seems to be working !

Thank you very much for your help.. im guessing it was the doctype.. who would of thought.


Iv got a wierd issue now.. the height of my popups are small.. Any ideas ?