Jump to content


Dynamically scale div according to user window resize?

  • Please log in to reply
2 replies to this topic

#1 piers


    New member

  • New Members
  • 2 posts

Posted 09 June 2009 - 05:06 AM


I'm a total amateur 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:


The code I'm using to embed is:

function setMovie( url )
  $('movieHost').innerHTML = '';
  var elEmbed = document.createElement( 'embed' );
  elEmbed.src = url;
  elEmbed.setAttribute("width", "100%");
  $('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>';
      $('movieList').innerHTML += html;
} );

(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:

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

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

<!-- HTML for the Quicktime plugins -->
<div id="vContainer">
<div id="movieHost"></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:

#vContainer {
    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:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<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:


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

I'm assuming that I need some js that varies the 'height' and 'width' of the vContainer div based on browser size... Any suggestions would be much appreciated...!
  • 0

#2 LSW


    Cybersecurity Advocate

  • Moderators
  • 8,079 posts
  • LocationAlaska

Posted 09 June 2009 - 10:09 AM

Give the div a CSS flexible deffinition. Div {height:100%, width: 100%} or use width :auto; if it is to resize to the content.

Remeber the mobile market is growing and almost none of them support JS.
  • 0
Thank You, Migwetth, Gunalche’esh, Ha’w'aa, Danke

“In the 19th Century there was only Army and Navy.
In the 20th Century we got air power as the third dimension of war.
In the 21st Century, Cyber is the 4th dimension of war.
It is another form of weapon and for unlimited range in a very high speed with a very low signature.”
-- Maj. Gen. Amos Yadkin, Commander of Israeli Defense Intelligence, 2006 - 2010

#3 piers


    New member

  • New Members
  • 2 posts

Posted 09 June 2009 - 11:25 AM

Thanks, LSW... the problem is that the quicktime file either has a set height and width already, or is set to scale to it's container. Since the container div is not contained within a set dimension, the '100%' value doesn't mean much unless I can make it some %age of the users browser window height/width, right?

I have a code snippet:

function getObj(name){
    if (document.getElementById){
        this.obj = document.getElementById(name);
        this.style = document.getElementById(name).style;
    else if (document.all){
        this.obj = document.all[name];
        this.style = document.all[name].style;
function getWinSize(){
   var iWidth = 0, iHeight = 0;
   if (document.documentElement && document.documentElement.clientHeight){
       iWidth = parseInt(window.innerWidth,10);
       iHeight = parseInt(window.innerHeight,10);
   else if (document.body){
       iWidth = parseInt(document.body.offsetWidth,10);
       iHeight = parseInt(document.body.offsetHeight,10);
   return {width:iWidth, height:iHeight};
function resize_id(obj) {                           
    var oContent = new getObj(obj);
    var oWinSize = getWinSize();
    if ((oWinSize.height - parseInt(oContent.obj.offsetTop,10))>0)
        oContent.style.height = (oWinSize.height - parseInt(oContent.obj.offsetTop,10));
window.onresize = function() { resize_id('vContainer'); }

But I can't get it to work.....

btw.. I'll probably get around to an iPhone redirect site at some point since it requires .m4v Quicktimes anyway.

Edited by piers, 09 June 2009 - 11:26 AM.

  • 0

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

★★★★★ 5 Star Rated Web Developer Course - check it out now!