Dynamically resizing an iframe issue
in [JavaScript]
|
Prev: Firefox Object bug
Next: innerHTML (was: IE9.js)
From: DL on 5 Apr 2010 00:03 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.
From: Evertjan. on 5 Apr 2010 04:32 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]. -- Evertjan. The Netherlands. (Please change the x'es to dots in my emailaddress)
From: Jukka K. Korpela on 5 Apr 2010 04:40 DL wrote: > 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. -- Yucca, http://www.cs.tut.fi/~jkorpela/
From: Lasse Reichstein Nielsen on 5 Apr 2010 06:36 DL <tatata9999(a)gmail.com> writes: > 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 -- Lasse Reichstein Holst Nielsen 'Javascript frameworks is a disruptive technology'
From: DL on 5 Apr 2010 10:14
On Apr 5, 6:36 am, Lasse Reichstein Nielsen <lrn.unr...(a)gmail.com> wrote: > DL <tatata9...(a)gmail.com> writes: > > 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 > -- > Lasse Reichstein Holst Nielsen > 'Javascript frameworks is a disruptive technology' 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> |