diff options
| author | MatthewM <mcm@they-got.us> | 2012-12-23 14:56:02 -0500 |
|---|---|---|
| committer | MatthewM <mcm@they-got.us> | 2012-12-23 14:56:02 -0500 |
| commit | 8c72892de1b99bf355700cc98d0de7e18983c7be (patch) | |
| tree | a66a24ea47e80cf759a69f358570faf2d6089db6 | |
| parent | 503bda5b2879309586f32ce39c57e2aafd6ca9e1 (diff) | |
Made the overlay resize and the alert box reposition when the window is resized
| -rw-r--r-- | modules/extra/webcpanel/templates/default/header.html | 43 |
1 files changed, 35 insertions, 8 deletions
diff --git a/modules/extra/webcpanel/templates/default/header.html b/modules/extra/webcpanel/templates/default/header.html index fc13a97d2..b9b70cf33 100644 --- a/modules/extra/webcpanel/templates/default/header.html +++ b/modules/extra/webcpanel/templates/default/header.html @@ -2,17 +2,26 @@ <html> <head> <link href="/static/style.css" media="screen" rel="stylesheet" type="text/css" /> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <title>{TITLE}</title> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> {IF EXISTS CMDR} <script type="text/javascript"> - var t=5000; // Time in ms to display an overlay if one will be displayed + var tSec=5; //Time in seconds to keep the overlay open + var t=(tSec*1000); //Convert the time to ms so we can use it $(document).ready(function() \{ /*Modal*/ var id = "#dialog"; - + + var mHeight; + var mWidth; + var oHeight = $(id).height(); + var oWidth = $(id).height(); + + var top; + var left; + showModal(); $('.close').click(function (e) \{ @@ -32,8 +41,8 @@ \} function showModal() \{ - var mHeight = $(document).height(); - var mWidth = $(window).width(); + mHeight = $(document).height(); + mWidth = $(window).width(); var alertMsg = '<br/>{CMDR}<br/>'; @@ -42,8 +51,9 @@ $('#mask').fadeTo('fast',0.75); $('#dialogMsg').html(alertMsg); - var top = mHeight/2-$(id).height()/2; - var left= mWidth/2-$(id).width()/2; + + top = mHeight/2-oHeight/2; + left = mWidth/2-oHeight/2; $(id).css('top', top); $(id).css('left', left); @@ -52,7 +62,24 @@ $(id).fadeIn(500); setTimeout(hideModal, t); - \} + \} + + $(window).resize(function() \{ + if ($('#mask').not(':hidden')) \{ + mHeight = $(document).height(); + mWidth = $(window).width(); + + /* Might as well only change the postion of box if the window is large enough */ + if ((mHeight > oHeight) && (mWidth > oWidth)) \{ + top = mHeight/2-oHeight/2; + left = mWidth/2-oHeight/2; + $('#mask').css(\{'width': mWidth, 'height': mHeight\}); + $(id).css('top', top); + $(id).css('left', left); + \} + + \} + \}) \}); </script> |