JavaScript Forum

**piers2009** · 04:59 AM

Ok...

I'm trying to figure out how to resize a div to a set percentage of the users browser - regardless of how they resize it. And I want to do it dynamically (in that it resizes as the user resizes their browser).

So far then...

I'm using the setMovie function to embed a quicktime called when clicking on a thumbnail using onClick, as in:

Code:

onClick="setMovie('Quicktimes/mov1.mov')"

The code I'm using to embed is:

Code:

<script>
function setMovie( url )
{
  $('movieHost').innerHTML = '';
  var elEmbed = document.createElement( 'embed' );
  elEmbed.src = url;
  elEmbed.setAttribute("width", "100%");
  elEmbed.setAttribute("height","100%");
  elEmbed.setAttribute("scale","aspect");
  $('movieHost').appendChild( elEmbed );
}

new Ajax.Request( 'Quicktimes/movies.xml', { 
  method: 'get',
  onSuccess: function( transport ) {
    var movieTags = transport.responseXML.getElementsByTagName( 'movie' );

    $('movieList').innerHTML = '';

    var bFirst = true;
    for( var b = 0; b < movieTags.length; b++ ) {
      var url = movieTags[b].getAttribute('url');
      var title = movieTags[b].getAttribute('title');
      if ( bFirst )
      {
        setMovie( url );
        bFirst = false;
      }
      var html = '<a href="javascript:void setMovie(\''+url+'\');">';
      html += title+'</a><br/>';
      $('movieList').innerHTML += html;
    }
  }
} );
</script>

(Part of the preceding code I intend to wrangle into showing a title of what's playing, I hope)

It's based on the Prototype framework with the prototype script referenced at the bottom of the doc:

Code:

<script src="javascript/prototype.js" type="text/javascript"></script>
</body>
</html>

And (miraculously)... it works - embedding the quicktime movies nicely into:

Code:

<!-- HTML for the Quicktime plugins -->
<div id="vContainer">
<div id="movieHost"></div>
</div>

But I've tried everything I could find, and i can't get anything to work scaling it as the user resizes their browser.

The 'movieHost' div has no CSS styling but it is wrapped in the 'vContainer' div with the CSS styling:

Code:

#vContainer {
	position:absolute;
	width:640px;
	height:480px;
	z-index:3;
	margin-left: 20%;
	margin-right: auto;
	margin-top: 10%;
	margin-bottom: auto;
}

The page has no fixed size (I think) and I don't want any scroll bars anywhere if possible. The document is:

Code:

 <!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">

Currently the page has a horizontal scrolling thumbnail absolutely positioned at the bottom of the browser and a logo absolutely positioned in the top right. I'm trying to make the quicktimes embed in the center of the browser (and resize dynamically).

Basically something similar to:

http://believemedia.wiredrive.com/l/...6bf9c4f5ed5e29

Though not as sophisticated, perhaps - and no need for the expanding/collapsing credit tray....

Any suggestions...?