Jump to content


Photo

Dynamically scale div according to user window resize?


  • Please log in to reply
2 replies to this topic

#1 piers

piers

    New member

  • New Members
  • 2 posts

Posted 09 June 2009 - 05:06 AM

Ok...

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:

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

The code I'm using to embed is:

<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>';
      $('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:

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

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

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

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

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

http://believemedia....76bf9c4f5ed5e29

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

LSW

    Knight of the Square Cubicle

  • Moderators
  • 8,046 posts
  • LocationJuneau AK

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
 

"There are 3 types of people: Those who can count and those who cannot."

 


#3 piers

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:

<script>
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'); }
    </script>

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