Dynamically resizing an iframe issue

D

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

Evertjan.

DL wrote on 05 apr 2010 in comp.lang.javascript:
fs.height = (+fs.height.replace('px','') + 40%);
Click to expand...

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].
 
J

Jukka K. Korpela

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

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?
Click to expand...

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>
Click to expand...

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

Lasse Reichstein Nielsen

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

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%);
Click to expand...

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?
Click to expand...

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

/L
 
D

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
Click to expand...

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>
 
J

Jukka K. Korpela

DL said:
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.
Click to expand...

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

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.
Click to expand...

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
 
S

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%);
Click to expand...

% 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
Click to expand...

why isn't there a css rule ?
<form>
Click to expand...

And the form is supposed to submit the iframe ?
 
S

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.
Click to expand...

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
 
S

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:
Click to expand...

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?
Click to expand...

in what you want to get
 
D

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
Click to expand...

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
 
S

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.
Click to expand...

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)
 
D

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)
Click to expand...

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
 
S

SAM

Le 4/6/10 5:44 PM, DL a écrit :
Sam, you're a genius!
Click to expand...

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 }
Click to expand...

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
Click to expand...

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
Click to expand...

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.
Click to expand...

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 :)
 
D

DL

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


Sam, you're a genius!
Click to expand...

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 }
Click to expand...

maybe you could try fixing the iframe height
<Table summary="notes entry page" valign="top" height="100%"
width="100">
Click to expand...
[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
Click to expand...

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
Click to expand...

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.
Click to expand...

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  :)
Click to expand...

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

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.
Click to expand...

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.
Click to expand...

What is the code inside that row 2 ?
What else could we do?
Click to expand...

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

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 ?
Click to expand...

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
 
S

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...
Click to expand...

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

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.
Click to expand...

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

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...
Click to expand...

what there is in this iframe ?

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

iFrame issue 3
Cannot dynamically create iframe 4
Accessing an embeded iframe 1
Dynamically changing html content of an IFRAME 1
problem with iframe resizing 0
resizing iframe height according to its content in firefox 3
problem with iframe resizing 2
problem with iframe resizing 2 1

Members online

No members online now.
Total: 68 (members: 0, guests: 68)
Robots: 404

Forum statistics

Threads
473,982
Messages
2,570,190
Members
46,736
Latest member
zacharyharris

Latest Threads

Top