Dynamically resizing an iframe issue

[DL]

Hi,

The following code works fine:
var fs = document.getElementById('txt').style;
fs.height = (+fs.height.replace('px','') + 100) + 'px';
// it works.

/* suppose, the extra 100 pix is enough
but problem is, what is the user's monitor is much bigger or smaller
hence, a dynamic value such as percentage would suit the situation
better, to this end, I attempted the following
*/

fs.height = (+fs.height.replace('px','') + 40%);
// say, we want to increase height by 40%
// it does not work. How to fix it?

The above script references the following HTML code
<form>
<iframe id="txt" name="txt"/>
</form>

Many thanks.

 

[Evertjan.]

DL wrote on 05 apr 2010 in comp.lang.javascript:

fs.height = (+fs.height.replace('px','') + 40%);

What a nonsense idea!

40% is not a nummeric value.

And if it were, adding a percentage to a value
does not mean a percentage of that same value,
which is only implied in sloppy human languages.

Do not use () where not needed!

Try:

fs.height = fs.height.replace(/px/,'') * 1.4 + 'px';

* forces automatic conversion of the string to a numeric value.

+ '..' forces the resulting numeric value back to a string.

Even better try something like offsetHeight,
when the height was not litterally defined before [in some browsers].

 

[Jukka K. Korpela]

The following code works fine:
var fs = document.getElementById('txt').style;
fs.height = (+fs.height.replace('px','') + 100) + 'px';

Under some circumstances. It depends on the document it is being applied to.
In particular, it postulates that there as an element with id="txt" and that
its height has been set in CSS using the px unit. (It won't work if the
height has only been set using an HTML attribute.)

In the absence of content and URL, I'm not sure what you are aiming at. Why
would you dynamically change the height, causing a reflow of the document?

fs.height = (+fs.height.replace('px','') + 40%);
// say, we want to increase height by 40%
// it does not work. How to fix it?

If you run the code through the JavaScript lint at
http://www.javascriptlint.com/online_lint.php
you'll see it cannot work - a syntax error is indicated as you cannot use
the % sign in JavaScript that way.

This would work (for same values of "work" as your code that works with
pixels);

fs.height = (+fs.height.replace('px','')*1.4) + 'px';

That is, to add 40% to a number, you simply multiply it by 1.4.

The above script references the following HTML code
<form>
<iframe id="txt" name="txt"/>
</form>

More context would be needed. The HTML markup above is invalid and does not
work properly on web browsers. In particular, use of "self-closing" tags
<... /> is not recommended and should not be expected to work except for
elements with EMPTY declared content.

 

[Lasse Reichstein Nielsen]

The following code works fine:
var fs = document.getElementById('txt').style;
fs.height = (+fs.height.replace('px','') + 100) + 'px';
// it works.

Might work, but I recommend using
fs.height = (parseInt(fs.height, 10) + 100) + "px";
No need to remove the "px" before interpreting the rest as a
number if there is already a function that only parses until
the "px".
(Yes, it doesn't handle errors the same, but the original didn't
handle errors at all anyway).

/* suppose, the extra 100 pix is enough
but problem is, what is the user's monitor is much bigger or smaller
hence, a dynamic value such as percentage would suit the situation
better, to this end, I attempted the following
*/

fs.height = (+fs.height.replace('px','') + 40%);

Fails because "40 %" isn't a valid expression ("%" being the modulus
operator here missing its second argument).

// say, we want to increase height by 40%
// it does not work. How to fix it?

fs.height = (parseInt(fs.height,10) * 1.40) + "px";

/L

 

[DL]

Might work, but I recommend using
   fs.height = (parseInt(fs.height, 10) + 100) + "px";
No need to remove the "px" before interpreting the rest as a
number if there is already a function that only parses until
the "px".
(Yes, it doesn't handle errors the same, but the original didn't
handle errors at all anyway).





Fails because "40 %" isn't a valid expression ("%" being the modulus
operator here missing its second argument).


 fs.height = (parseInt(fs.height,10) * 1.40) + "px";

/L

Thank you all.

Now, I'd to try a different approach, that is, using 87.5%
of screen width and height for an iframe with an HTML page.

Here's the code (simplified HTML code just to get the point acrss):

<html>
<head/>
<body>
<iframe id="txt" name="txt" src="blabla.html"
style='width='+screen.width-
(screen.width*0.125)+';height='+screen.height-(screen.height*0.125)+';
tabindex="2"></iframe>

<!--
Problem:
width and height not recognized and the iframe uses default width and
height.

Question:
what did I mess up in escaping the single quotes etc?

Many thanks.
-->

</body>
</html>

 

[Jukka K. Korpela]

Now, I'd to try a different approach, that is, using 87.5%
of screen width and height for an iframe with an HTML page.

Sorry, that does not make sense.

If I'm viewing your page, say, on my 1680px wide screen using a 400px wide
browser window, what would happen if you managed to set your iframe width to
87.5% of screen width?

It would make sense to set the width as a percentage of available width, but
you don't need JavaScript for that: just set the width as a percentage in
HTML or in CSS.

 

[DL]

Sorry, that does not make sense.

If I'm viewing your page, say, on my 1680px wide screen using a 400px wide
browser window, what would happen if you managed to set your iframe widthto
87.5% of screen width?

It would make sense to set the width as a percentage of available width, but
you don't need JavaScript for that: just set the width as a percentage in
HTML or in CSS.

Jukka,

The page has other elements, for instance, it sort of looks like this:

top layer:
text formatting button 1, button 2, button 3...

middle layer:
the iframe: text input area, its width/height is the Very Subject
we're dealing here

bottom layer:
functional buttons such as Save, Cancel etc.

Am I any good in describing it better?

Thanks.

Don

 

[SAM]

Le 4/5/10 6:03 AM, DL a écrit :

Hi,

The following code works fine:
var fs = document.getElementById('txt').style;
fs.height = (+fs.height.replace('px','') + 100) + 'px';
// it works.

/* suppose, the extra 100 pix is enough
but problem is, what is the user's monitor is much bigger or smaller
hence, a dynamic value such as percentage would suit the situation
better, to this end, I attempted the following
*/

fs.height = (+fs.height.replace('px','') + 40%);

% in JS means modulo ... !

maybe :

fs.height = (fs.height.replace('px','') * 1.4) + 'px';

fs.height = parseInt(fs.height) * 1.4 + 'px';

no ?

// say, we want to increase height by 40%
// it does not work. How to fix it?

The above script references the following HTML code

why isn't there a css rule ?

<form>

And the form is supposed to submit the iframe ?

 

[SAM]

Le 4/5/10 4:14 PM, DL a écrit :

Now, I'd to try a different approach, that is, using 87.5%
of screen width and height for an iframe with an HTML page.

not of "screen"
but navigator's window area to display web pages
(the viewport ?)

In the head :

<style type="text/css">
html, body { height: 100%; margin: 0;}
iframe { height: 82.5%; width: 73.5%; border: 2px solid }
</style>

not tested in IE

 

[SAM]

Le 4/5/10 6:44 PM, DL a écrit :

Jukka,

The page has other elements, for instance, it sort of looks like this:

and then ?

You can't set css rules for them ?

div { position relative; margin: 0; }
#top_layer { height: 11% }
#middle_layer { height: 80%; padding: 0 }
#bottom_layer { height: 9% }
#middle_layer iframe { height: 100%; width: 100% }
#top_layer .button { height: 90%; margin: 4%; }

top layer:
text formatting button 1, button 2, button 3...

middle layer:
the iframe: text input area, its width/height is the Very Subject
we're dealing here

bottom layer:
functional buttons such as Save, Cancel etc.

Am I any good in describing it better?

in what you want to get

 

[DL]

Le 4/5/10 6:44 PM, DL a écrit :


and then ?

You can't set css rules for them ?

div { position relative; margin: 0; }
#top_layer { height: 11% }
#middle_layer { height: 80%; padding: 0 }
#bottom_layer { height: 9% }
#middle_layer iframe { height: 100%; width: 100% }
#top_layer .button { height: 90%; margin: 4%; }





in what you want to get

Ahe, just take another look at the actual code, it's messy in style, I
use HTML Table, the top and middle elements shares the same TR while
the bottom element has another TR. Just tried to style as an
attribute such as <TR Style="height:80%:> and leave out the Style
attribute for the iframe to no avail, that is, the iframe opts to the
default (tiny) size.

Thanks.

Don

 

[SAM]

Le 4/6/10 6:50 AM, DL a écrit :

Ahe, just take another look at the actual code, it's messy in style, I
use HTML Table, the top and middle elements shares the same TR while
the bottom element has another TR. Just tried to style as an
attribute such as <TR Style="height:80%:> and leave out the Style
attribute for the iframe to no avail, that is, the iframe opts to the
default (tiny) size.

if you use tables for formatting the display,
we can no more do anything for you!



What's working for me (except that menu's buttons submit the form):

DOCTYPE : HTML 4.01 Transitional

<style type="text/css">
html, body { height: 100%; margin: 0;}
form { display: block; height: 100% }
td { position: relative; text-align: center }
iframe { height: 82.5%; width: 87.5%; border: 2px solid }
</style>

<form action="foo.php">
<table height="100%" width="100%" border=1>
<tr>
<td height="90%">
<p><button>home page</button> <button>contact</button></p>
<iframe src="blah.htm">that's an iframe you can't see</iframe>
</td>
</tr><tr>
<td>
<input type="reset"> <input type="submit" value="save">
</td>
</tr>
</table>
</form>



Tested with IE.6 (xp2) and Fx.3 (Mac)

 

[DL]

Le 4/6/10 6:50 AM, DL a écrit :





if you use tables for formatting the display,
we can no more do anything for you!

What's working for me (except that menu's buttons submit the form):

DOCTYPE : HTML 4.01 Transitional

<style type="text/css">
html,  body { height: 100%; margin: 0;}
form { display: block; height: 100% }
td { position: relative; text-align: center }
iframe { height: 82.5%; width: 87.5%; border: 2px solid }
</style>

<form action="foo.php">
<table height="100%" width="100%" border=1>
   <tr>
     <td height="90%">
       <p><button>home page</button> <button>contact</button></p>
       <iframe src="blah.htm">that's an iframe you can't see</iframe>
     </td>
   </tr><tr>
     <td>
       <input type="reset"> <input type="submit" value="save">
     </td>
   </tr>
</table>
</form>

Tested with IE.6 (xp2) and Fx.3 (Mac)

Sam, you're a genius! We're almost there...
Currently the code looks like this:
....
iframe { height:82.5%; width:99.5%; border: 2px solid }
....

<Table summary="notes entry page" valign="top" height="100%"
width="100">

[1] TR with no attributes
[2] TR height="92%" the iframe
[3] TR height="2.5%" the tag field
[4] TR height="2.5%" the Save and reset

Issue:
too much space between the iframe and the tag beneath it.
See this URL for a screen capture,
http://www.knowledgenotebook.com/Download/gap_above_tag_SAM.PNG

I've attempted to use valign='top' for the TR3 and TR4 to no avail.
Tested with same results of IE7 and FF3.5.

Many thanks.

Don

 

[SAM]

Le 4/6/10 5:44 PM, DL a écrit :

Sam, you're a genius!

certainly, certainly, for the least !

We're almost there...
Currently the code looks like this:
...
iframe { height:82.5%; width:99.5%; border: 2px solid }

maybe you could try fixing the iframe height

<Table summary="notes entry page" valign="top" height="100%"
width="100">

[1] TR with no attributes
[2] TR height="92%" the iframe
[3] TR height="2.5%" the tag field
[4] TR height="2.5%" the Save and reset

You probably also could do for the heights :

TR 1 menu : 23px
TR 2 subject : 32px
TR 4 main tags : 12px
TR 5 iframe : 100%
TR 6 tag : 32px
TR 7 buttons : 20px

iframe { height:100%; width: 90%; border: 3px inset }

Issue:
too much space between the iframe and the tag beneath it.
See this URL for a screen capture,
http://www.knowledgenotebook.com/Download/gap_above_tag_SAM.PNG

What is interesting about the tables is that they accept mixed sizes
(proportional (%) and normal (px, pt)) for their rows
using their mode "auto" algorithm to arrange them (and their rows and cells)
<http://www.w3.org/TR/CSS21/tables.html#model>

I've attempted to use valign='top' for the TR3 and TR4 to no avail.
Tested with same results of IE7 and FF3.5.

no, use so many rows as necesary
Demo :
<http://cjoint.com/data/egxssGzqbg_ifr.htm>

the use of tables can finally be a real headache
next time try real layers

 

[DL]

Le 4/6/10 5:44 PM, DL a écrit :

Sam, you're a genius!

certainly, certainly, for the least !

We're almost there...
Currently the code looks like this:
...
iframe { height:82.5%; width:99.5%; border: 2px solid }

maybe you could try fixing the iframe height

<Table summary="notes entry page" valign="top" height="100%"
width="100">

[1] TR with no attributes
[2] TR height="92%" the iframe
[3] TR height="2.5%" the tag field
[4] TR height="2.5%" the Save and reset

You probably also could do for the heights :

TR 1 menu       : 23px
TR 2 subject    : 32px
TR 4 main tags  : 12px
TR 5 iframe     : 100%
TR 6 tag        : 32px
TR 7 buttons    : 20px

iframe { height:100%; width: 90%; border: 3px inset }

Issue:
too much space between the iframe and the tag beneath it.
See this URL for a screen capture,
http://www.knowledgenotebook.com/Download/gap_above_tag_SAM.PNG

What is interesting about the tables is that they accept mixed sizes
(proportional (%) and normal (px, pt)) for their rows
using their mode "auto" algorithm to arrange them (and their rows and cells)
<http://www.w3.org/TR/CSS21/tables.html#model>

I've attempted to use valign='top' for the TR3 and TR4 to no avail.
Tested with same results of IE7 and FF3.5.

no, use so many rows as necesary
Demo :
  <http://cjoint.com/data/egxssGzqbg_ifr.htm>

the use of tables can finally be a real headache
next time try real layers  

I don't see the need for TR 1 and 4. This screen is for "Note Entry"
only but if the user changes his mind, simply hit the Cancel button to
go to the Main (Menu) Screen.

Have changed / used the following line:
iframe { height:100%; width: 90%; border: 3px inset }
while everything else remained intact
the excessive white space above the tag line issue remains.

What else could we do?

Thanks.

 

[SAM]

Le 4/7/10 1:51 AM, DL a écrit :

I don't see the need for TR 1 and 4. This screen is for "Note Entry"
only but if the user changes his mind, simply hit the Cancel button to
go to the Main (Menu) Screen.

You do as you want .. I can't follow you
(what screen and where ? in the iframe ? in place of your tr2 ? ...)

the table is 100% height (of the viewport)
how do you slice in 0% height your menu and form's buttons ?

Have changed / used the following line:
iframe { height:100%; width: 90%; border: 3px inset }
while everything else remained intact
the excessive white space above the tag line issue remains.

What is the code inside that row 2 ?

What else could we do?

not sure you understood what I tried to show you :
tr 1 in px (menu and probably the upper inputs)
tr 2 in % (say 80 or 90%) and iframe 100% height of this row
tr 3 in px (inputs for tag ans form's buttons)

adding rows for the the editor's tags buttons and fields
can help to glue them or push them away from the iframe
(help to fix your problems of heights)

but ... after all ... the iframe is perhaps the subject field +
tags buttons + place to write + tag field ?

 

[DL]

Le 4/7/10 1:51 AM, DL a écrit :



You do as you want .. I can't follow you
(what screen and where ? in the iframe ? in place of your tr2 ? ...)

the table is 100% height (of the viewport)
how do you slice in 0% height your menu and form's buttons ?


What is the code inside that row 2 ?


not sure you understood what I tried to show you :
tr 1 in px (menu and probably the upper inputs)
tr 2 in % (say 80 or 90%) and iframe 100% height of this row
tr 3 in px  (inputs for tag ans form's buttons)

adding rows for the the editor's tags buttons and fields
can help to glue them or push them away from the iframe
(help to fix your problems of heights)

but ... after all ... the iframe is perhaps the subject field +
tags buttons + place to write + tag field ?

You're a genius! I didn't just say it for fun
Yes, last time I didn't set TR height to these values, bummer!
not sure you understood what I tried to show you :
tr 1 in px (menu and probably the upper inputs)
tr 2 in % (say 80 or 90%) and iframe 100% height of this row
tr 3 in px (inputs for tag ans form's buttons)

Successfully tested on a 14" laptop with IE7 and Firefox 3.5.
Will test it on a tiny netbook and report back later...

Thank you so so much! SAM!!

Don

 

[SAM]

Le 4/7/10 4:52 AM, DL a écrit :

On Apr 6, 8:41 pm, SAM <[email protected]>
wrote:

Yes, last time I didn't set TR height to these values, bummer!
not sure you understood what I tried to show you :
tr 1 in px (menu and probably the upper inputs)
tr 2 in % (say 80 or 90%) and iframe 100% height of this row
tr 3 in px (inputs for tag ans form's buttons)

Successfully tested on a 14" laptop with IE7 and Firefox 3.5.
Will test it on a tiny netbook and report back later...

You know you can move the navigator's window ?
Pressing its right-bottom corner then dragging it
that will resize the window
ie. from 32" (if you get it) to 4" (mobile phone screen)

Never I have one of my softs opened in full screen.

 

[DL]

Le 4/7/10 4:52 AM, DL a écrit :




You know you can move the navigator's window ?
Pressing its right-bottom corner then dragging it
that will resize the window
ie. from 32" (if you get it) to 4" (mobile phone screen)

Never I have one of my softs opened in full screen.

I was a bit too happy too early, IE8 (IE7 mode under IE8 installation)
does not like it, bullet list goes out of the iframe...

 

[SAM]

Le 4/8/10 11:47 PM, DL a écrit :

I was a bit too happy too early, IE8 (IE7 mode under IE8 installation)
does not like it, bullet list goes out of the iframe...

what there is in this iframe ?

and if you would show your work ?
give an url where that page can be seen