[piers]

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:

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

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

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:

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

[LSW]

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.

[piers]

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:

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.

This post has been edited by piers: 09 June 2009 - 11:26 AM