height of frame or knowing screen resolution of sc

[garylscott]

I am wanting to set the height of a frame to be relative to the height of the display screen. The following two sets of commands produce the same frame.

app$="<iframe src="+app1$+" frameborder='1' name='frame1' scrolling='yes' align='center' width=98% height=90%>"
HTML app$

app$="<iframe src="+app1$+" frameborder='1' name='frame1' scrolling='yes' align='center' width=98% height=40%>"
HTML app$

I can change the height to a value and change the size, but I'd like it to be relative to the display not absolute.

Is there away to do this like LB has?

Thanks

[kokenge]

Boy, this has always been a issue with web applications.
As you know photos are dynamic if you give a width=??%. As you drag the edge of a window and resize it, the photos maintain their aspect ratio and resize to fit the screen.

Not so with other stuff like <Table> and <iframe>. You can give these a width in percent, but the browsers ignore the height percent. The height has to be in pixels.

I always include some JS to find the width and height. This code will always know the size, but you have to determine how dynamic you want the system to resize your <Iframe>, <table> and <div> and others. If you change the <IFRAME as the size changes, you will be continually sending your stuff too the screen.
The easiest way is to do it when they run your project, and every time they click a button to do something.

This routine will give you the height and width of your window.

html "<INPUT TYPE='HIDDEN' id='wh' name='wh' VALUE='";winWide;"|";winHigh;"'></input>"
'html "<INPUT id='wh' name='wh' VALUE='";winWide;"|";winHigh;"'></input>"
html "<script language='javascript'>
<!--
myWidth = window.innerWidth;
myHeight = window.innerHeight;
document.getElementById('wh').value = myWidth + '|' + myHeight;

window.onresize  = function()
{

var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
// window.alert( 'Width = ' + myWidth + ' Height = ' + myHeight );
document.getElementById('wh').value = myWidth + '|' + myHeight;
}
//--></script>
"

Then use this command to get the width and height

	widHi$ = #request get$("wh")

If you want to see the size change then take the TYPE=HIDDEN off the <Input statement

I have a application running using this if you want to see an example. Go to www.dkokenge.com/design and then click "Design"
This uses HTML5 so you cannot use IE.
If you change the size of the window and then click to see another page it resizes the media stuff.

Hope this helps

PS: I'm in the process of changing this code to change the <Table> I'm using dynamically as the size changes.
Stay tuned..

[StefanPendl]

Jun 3, 2010 17:46:18 GMT -5 kokenge said:

I have a application running using this if you want to see an example. Go to www.dkokenge.com/design and then click "Design"
This uses HTML5 so you cannot use IE.
If you change the size of the window and then click to see another page it resizes the media stuff.

Since you are using Localhost it will not be possible for others to run the application.

The working link is www.dkokenge.com:8008/seaside/go/runbasicpersonal?app=design