Page 1 of 1

IF statement Increment help?

Posted: Tue May 03, 2005 3:54 pm
by Jr
Ok... I'm trying to make an IF statement in JavaScript to take the code I have below and increment or deincrement it by a certain amount every time the appropriate <a> is clicked. Can someone help me with this? I'm sure this is simple stuff for all you JS gurus out there. :wink:

Code: Select all

<iframe width='100%' height='100px' src=&quote;test_1.php&quote; id=&quote;mxhIframe&quote;></iframe>

<?print &quote;<a onclick=\&quote;parent.document.getElementById('mxhIframe').style.height = '500';\&quote;>Increase</a>&quote;;
print &quote;<br><a onclick=\&quote;parent.document.getElementById('mxhIframe').style.height = '200';\&quote;>Decrease</a>&quote;;?>

...

Posted: Tue May 03, 2005 4:11 pm
by Calimero
increment what ?!?

size.

Code: Select all

<?
print &quote;<a onclick=\&quote;parent.document.getElementById('mxhIframe').style.height += 1;\&quote;>Increase</a>&quote;;
print &quote;<br><a onclick=\&quote;parent.document.getElementById('mxhIframe').style.height -= 1;\&quote;>Decrease</a>&quote;;
?>
However - I had problems with JS that the height or width you get this way - is actualy a string: "500px" and "200px", so you might first need to remove the "px", convert to integers and then add or substract a pixel or however much you want.

Is this what you need?

Posted: Tue May 03, 2005 5:23 pm
by Jr
sorry... yeah, I want to increment the height of the iFrame. How it works now is it just changes the height to either 500px or 200px but I want it to just add or subtract 50px or so from the value that it is by default or after the onclick. Does that make sense?

...

Posted: Tue May 03, 2005 5:51 pm
by Calimero
well I did this ( code ) - long time ago, but don't have it with me :roll: .

The way I did it:

Create a function, call it on_click.

The function should contain the following.

VAR current_height = you take present value for that element
VAR current_width = same as above
VAR action = 1 or 0 ( 1 - make it bigger, 0 - make it smaller )

Just didn't asked - do you change both width and height, or just one of those ( then the action_height, and achtion_width should be used - separately )

IF ( action == 1 )
{

// Do enlarge the element

}
ELSE IF ( action == 0 )
{

// Do shrink the element

}

You just pass a VARIABLE - by how much do you want to change the dimensions, and as I mentioned above - watch for "500px" instead of just 500 as an integer - as that is what you realy need.

Posted: Tue May 03, 2005 5:56 pm
by Jr
thanks for posting so quickly but if you could post the function you made that would help me out a little more. (Keep in mind I dont know ANYthing about JavaScript). :oops:

...

Posted: Tue May 03, 2005 6:13 pm
by Calimero
well, lets give it a try, this is however untested ( this is code for Internet Explorer, I don't work in other browsers ):

Code: Select all

<script language="javascript">
function resizeMe(action)
{ 
// By how much to resize it
resize_by = 50;

// Take the current_width and height and create integers from them for further "playing"
current_height = document.getElementById('mxhIframe').style.height;
current_height = parseInt( current_height.substr(0, -2) );
current_width = document.getElementById('mxhIframe').style.width;
current_width = parseInt( current_width.substr(0, -2) );

// What to do
if ( action == 1 )
{
// Enlarge
current_height += resize_by ;
current_width += resize_by ;
}
else if ( action == 0 )
{
// Shrink
current_height -= resize_by ;
current_width -= resize_by ;
}

// Apply the new dimensions to the element
document.getElementById('mxhIframe').style.height = current_height + "px";
document.getElementById('mxhIframe').style.width = current_width + "px";
}
// Start the function with 1 or 0 to deside what to do - FOR TEST
resizeMe(1)

</script>
Use this link that you want to use to trigger this function:
<a href="javascript:resizeMe(1)"> Go baby - GROW </a>
<a href="javascript:resizeMe(0)"> Go baby - SHRINK </a>

Now if you want separately to play with height and width - just use this piece of code and give extra conditions: instead of action use 1) action_height 1 or 0 and after that 2) action_width 1 or 0


EDIT: and... this code ( by looking at it after some time ) may even be written in 4 rows, but anyways it will do the job, just its little bit ugly(er) than with proffesional touch.

Hope this helped.

Posted: Wed May 04, 2005 3:00 am
by Jr
hmm... looks like it would work but for some reason it doesn't. It throws an error 'onclick'. Did I type it wrong?



Code: Select all

function resizeMe(action)
{
// By how much to resize it
resize_by = 50;

// Take the current_width and height and create integers from them for further &quote;playing&quote;
current_height	=	document.getElementById('message_inbox').style.height;
current_height	=	parseInt( current_height.substr(0, -2) );

// What to do
if ( action == 1 )
{
// Enlarge
current_height += resize_by ;
}
else if ( action == 0 )
{
// Shrink
current_height -= resize_by ;
}
// Apply the new dimensions to the element
document.getElementById('message_inbox').style.height = current_height + &quote;px&quote;;
}
// Start the function with 1 or 0 to deside what to do - FOR TEST
resizeMe(1)

Code: Select all

<iframe marginwidth=&quote;0&quote; align=&quote;left&quote; height=&quote;200px&quote; id='message_inbox' src=&quote;message.php?action=email_box&quote; scrolling=&quote;yes&quote; align=left frameborder=0 hspace=0 vspace=0> </iframe>
<a href=&quote;javascript:resizeMe(1)&quote;>Message Inbox Grow</a>
<br><a href=&quote;javascript:resizeMe(0)&quote;>Message Inbox Shrink</a>

...

Posted: Wed May 04, 2005 4:02 pm
by Calimero
I can't test this on my dev machine right now, to find bugs ( I will be able for the weekend ), so If it still doesn't work - do visit some JavaScript oriented forums on the web ( internet.com - forums - javascript ), they have experts in it - they will surely help you - and even correct this snippet of mine.

Sorry, so if you use JavaScript - ask on the JavaScript forums :)

I did my learning that way.

Posted: Thu May 05, 2005 11:16 am
by Jr
cool, thanks for all the help Calimero.

Much appriciated!