Dynamically resizing an iframe issue
in [JavaScript]
|
Prev: Firefox Object bug
Next: innerHTML (was: IE9.js)
From: DL on 6 Apr 2010 00:50 On Apr 5, 4:01 pm, SAM <stephanemoriaux.NoAd...(a)wanadoo.fr.invalid> wrote: > Le 4/5/10 6:44 PM, DL a écrit : > > > On Apr 5, 10:17 am, "Jukka K. Korpela" <jkorp...(a)cs.tut.fi> wrote: > > >> 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: > > 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 > > -- > sm 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
From: SAM on 6 Apr 2010 03:03 Le 4/6/10 6:50 AM, DL a �crit : > On Apr 5, 4:01 pm, SAM <stephanemoriaux.NoAd...(a)wanadoo.fr.invalid> > wrote: >> >> 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%; } > > 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) -- sm
From: DL on 6 Apr 2010 11:44 On Apr 6, 3:03 am, SAM <stephanemoriaux.NoAd...(a)wanadoo.fr.invalid> wrote: > Le 4/6/10 6:50 AM, DL a écrit : > > > > > On Apr 5, 4:01 pm, SAM <stephanemoriaux.NoAd...(a)wanadoo.fr.invalid> > > wrote: > > >> 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%; } > > > 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) > > -- > sm 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
From: SAM on 6 Apr 2010 17:20 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> <http://www.w3.org/TR/CSS21/tables.html#auto-table-layout> > 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 :-) -- sm
From: DL on 6 Apr 2010 19:51
On Apr 6, 5:20 pm, SAM <stephanemoriaux.NoAd...(a)wanadoo.fr.invalid> wrote: > 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> > <http://www.w3.org/TR/CSS21/tables.html#auto-table-layout> > > > 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 :-) > > -- > sm 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. |