[Javascript] Point me to the path, resize a div to fill window upon resize

[Philip Thompson]

On Mar 12, 2008, at 4:48 PM, Chris Hettinger wrote:

> Good afternoon, I am new to the list.
>
> I am working on a project for a client, for which I will be drawing  
> a page with a Microsoft Virtual Earth map as the main element after  
> the page header. Below the map will be grid of data.
>
> An illustration of what I am looking for can be viewed by visiting www.redfin.com 
> . Complete a real estate search in one of their markets; you will be  
> taken to a results page that fills the browser with a map, a summary  
> box to the right and grid of data below.
>
> I need to recreate one aspect of what they are doing, that is on  
> window resize, I must grow/shrink the map div to fill the browser  
> window.
>
> What I am hoping for is that someone could point me to a good  
> resource article, tutorial size, or bit of pseudo code.
>
> … I’m comfortable digging through doc and language references for  
> more detail. I’ve not know exactly the best keywords to search for  
> find relevant results.
>
> Thanks in advance,
>
> -- 
> Chris Hettinger


I'll start off by saying that I'm no expert by any means - PHP is my  
forte. Now that that's out of the way, I do this exact thing in the  
application I'm working on now. This seems to work in FF2 (haven't  
tested 3), IE 6 and 7 and Safari.

I begin with a page that has a div ("alert") that I initially set  
display:none. Upon an alert being prompted, I call promptAlert, which  
grabs window dimensions and displays whatever message I'm needing to  
display. Example...

[html]
<div id="alert" style="display:none;">
     <div id="alertContent">
         <div id="alertMsg"></div>
         <form name="alertForm" id="alertForm"  
action="javascript:processAlert()">
             ...blah blah blah...
         </form>
     </div>
</div>
[/html]

[CSS]
#alert {
     background: #FFF url('../images/background-line.gif') repeat;
     border: solid 3px red;
     left: 0;
     opacity: .7;
     filter:alpha(opacity=70);
     margin: 0;
     padding: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 1000;
}

#alertContent {
     background: #000;
     border: solid 3px red;
     color: #FFF;
     font-size: 12pt;
     font-weight: bold;
     margin: auto;
     opacity: 1;
     filter:alpha(opacity=100);
     padding: 10px;
     position: relative;
     text-align: left;
     width: 40%;
     z-index: 1001;
}
[/CSS]

[js]
var SHOW_ALERT = true;
var ALERT_MSG = '';

function promptAlert (cancel, fields)
{
     var theWindow = windowDimensions();
     var scrolling = getScrollXY();

     var msg = document.getElementById('alertMsg');
     msg.innerHTML = ALERT_MSG;

     var alertDiv = document.getElementById('alert');
     resizeElement (alertDiv, theWindow['w'] + scrolling['x'],  
theWindow['h'] + scrolling['y']);
     alertDiv.style.position = 'absolute';
     alertDiv.style.display = '';

     opacity ('alert', 0, 70, 0);
     opacity ('body', 100, 50, 300);

     var alertContent = document.getElementById('alertContent');
     var alertDims = elementDimensions('alertContent');
     alertContent.style.top = ((theWindow['h'] / 2) - alertDims['h'])  
+ 'px';

     if (SHOW_ALERT) {
         SHOW_ALERT = false;
         window.onresize = promptAlert;
     }
}

function resizeElement (element, w, h)
{
     if (!element) { return false; }
     element.style.width = w+'px';
     element.style.height = h+'px';
}

function processAlert ()
{
     changeOpacity (100, 'body');
     opacity ('alert', 100, 0, 100);

     if (!SHOW_ALERT) {
         SHOW_ALERT = true;
         window.onresize = null;
         ALERT_MSG = '';
     }

     document.getElementById('alert').style.display = 'none';
     var form = document.alertForm;

     if (form.call_method && document.pressed == 'okAlertBtn') {
         window[form.call_method.value]();
     }

     return;
}
[/js]

The opacity function does a transition of element opacity from the  
specified values - it's just for *looks*. Notice in the last line of  
promptAlert I specify the onresize event: window.onresize =  
promptAlert. Be sure to unset this value when it's no longer needed.  
Otherwise, every time your user resizes, this alert will pop up. I  
unset mine in processAlert by specifying: window.onresize = null.

There is one bug in this which I can't quite figure out. Let's say  
your page scrolls. If you're at the top of the page (not scrolled  
down), then the partially-transparent message that covers the page  
only covers the current viewing area - not the area below. So, if you  
scroll down, then it's not covered by the alert window.

Anyway, I'm sure that was way more than anyone needed. Hope it helps.  
If you need help with the functions for setting the opacity or  
whatever, lemme know.

~Philip