Page 1 of 1

Add +X pixels to a style

Posted: Sat May 19, 2007 1:09 pm
by toasty2
I cooked up this function:

Code: Select all

function resizeplus(id,w,h){
var e=document.getElementById(id);
var cw=e.style.width.split('px');
var ch=e.style.height.split('px');
e.style.width=cw[0]+w+'px';
e.style.height=ch[0]+h+'px';}
I tried using it like this:

Code: Select all

<a href="#" onclick="resizeplus('o','5','5')">Extend o +5px</a>
<iframe id="o" src="http://google.com" style="width:950px;height:500px;"></iframe>
"o" is an iframe as shown above, when I click the link it makes the iframe insanely wider and longer, so what did I do wrong? The idea is to add X amount of pixels to the width and height.

Posted: Sat May 19, 2007 1:27 pm
by Ollie Saunders
Its concatenating the numbers. '30' + '40' == '3040' but 30 + 40 == 70 :)
Also don't use such stupid variable names and indent your code:

Code: Select all

function additiveResize(id,w,h)
{
    var style = document.getElementById(id).style;
    style.width = (parseInt(style.width) + w) + 'px';
    style.heigth = (parseInt(style.height) + h) + 'px';
}
Edit: Now improved

Posted: Sat May 19, 2007 1:31 pm
by toasty2
Thanks, but its still adding way more than I tell it. See http://randomresources.org, click Toggle Overlay Frame, click Menu >, and click Resize + 200. It adds way more than 200.

Posted: Sat May 19, 2007 1:38 pm
by Ollie Saunders
Uh yeah. It will, sorry.

Posted: Sat May 19, 2007 2:35 pm
by toasty2
Oh well, my function that resizes it to a specific size (doesn't add) works, so its fine.