Percentage Height and Width

**hurry** · 01-26-2008, 11:25 AM

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?

**jscheuer1** · 01-26-2008, 04:40 PM

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.

**hurry** · 01-27-2008, 01:32 PM

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?

**jscheuer1** · 01-27-2008, 04:42 PM

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.

**hurry** · 01-28-2008, 05:25 AM

Thanks a lot John.

Thread: Percentage Height and Width

Thread Tools

Search Thread

Percentage Height and Width

Bookmarks

Bookmarks

Posting Permissions