Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Dynamically resize div with css?

    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) but - I'm not sure if this can be achieved with CSS or not...

    So far then...

    I'm using the setMovie function to embed a Quicktime called when clicking on a thumbnail using onClick,

    And it embeds 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 embedded Quicktimes are given the parameters of 'height' 100%, 'width' 100% and 'scale' aspect.

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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    To centre your vodeo, you could use the dead centre approach, though resizing with % may not possible in that case.

    The page has no fixed size (I think) and I don't want any scroll bars anywhere if possible.
    Without a scroll bar, #credit_tray is completely invisible in 1024x800 resolution
    Last edited by abduraooft; 06-09-2009 at 12:37 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks for your response abduraouft - the 'dead centre approach' is a great tip and I'll be trying it out...

    I don't use a credit tray per se but I do have a horizontal scroller which is styled:

    Code:
        #scroller {
    	position:absolute;
    	width:auto;
    	height:47px;
    	z-index:1;
    	bottom: 0px;
    	white-space: nowrap;
    
    }
    Hopefully that should stay at the bottom of the browser in any resolution, right?

    Still, I need to figure out how to scale the centered div....


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •