Results 1 to 5 of 5

Thread: Percentage Height and Width

  1. #1
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Percentage Height and Width

    1) Script Title: DHTML Window widget (v1.1)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ndow/index.htm

    3) Describe problem:

    Code:
    var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://google.com", "Google Web site", "width=700px,height=450px,resize=1,scrolling=1,center=1", "recal")
    I want to specify the width and height in % instead of px in the above code. I tried to put 95% instead of 700px but the popup becomes very small. Please help. Is there any way to make this possible?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,199 Times in 3,161 Posts
    Blog Entries
    12

    Default

    The script relies upon pixel units to get everything lined up correctly in all cases. To do so, it strips all but the number from the width and height values and then later adds 'px' back on. While the number is in its raw state, it also checks to see that certain minimum dimensions are met.

    Now, this much precision may or may not be required for the iframe presentation method of this script. What you could try is changing this bit of code:

    Code:
    setSize:function(t, w, h){ //set window size (min is 150px wide by 100px tall)
    	t.style.width=Math.max(parseInt(w), 150)+"px"
    	t.contentarea.style.height=Math.max(parseInt(h), 100)+"px"
    },
    to:

    Code:
    setSize:function(t, w, h){ //set window size (min is 150px wide by 100px tall)
    	t.style.width=w+"%"
    	t.contentarea.style.height=h+"%"
    },
    But I must stress that, since the script's author seemed to feel that giving the designer this much control might mess things up, it might.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John. I changed the code. I specified 95% for height and 95% for the width. The width in % works perfectly but the height remains the same, around 200 to 300px irrespective of what I set as %. Even 100% height does not make any change. Is there any other place I have to change to fix this height problem?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,199 Times in 3,161 Posts
    Blog Entries
    12

    Default

    Probably not as one would expect. Height given in % must have a container besides the <html> or <body> elements for this to have any real meaning on a page with a valid URL DOCTYPE.

    So, what is your height to be a percentage of? Whatever you answer to that, it probably has several ways of being calculated, depending upon the browser. You might opt for keeping the height proportional to the width of the object you are creating, which would be simpler to calculate across browsers.

    So, something like:

    Code:
    setSize:function(t, w, h){ //set window size (min is 150px wide by 100px tall)
    	t.style.width=w+"%"
    	t.contentarea.style.height=Math.floor(t.offsetWidth*.8)+"px"
    },
    Which should (if all goes as planned) give you a height 80% of the width.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot John.

Bookmarks

Posting Permissions

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