IF statement Increment help?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Jr
Forum Commoner
Posts: 99
Joined: Mon Mar 07, 2005 3:25 pm

IF statement Increment help?

Post 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;;?>
User avatar
Calimero
Forum Contributor
Posts: 310
Joined: Thu Jan 22, 2004 6:54 pm
Location: Milky Way

...

Post 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?
Jr
Forum Commoner
Posts: 99
Joined: Mon Mar 07, 2005 3:25 pm

Post 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?
User avatar
Calimero
Forum Contributor
Posts: 310
Joined: Thu Jan 22, 2004 6:54 pm
Location: Milky Way

...

Post 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.
Jr
Forum Commoner
Posts: 99
Joined: Mon Mar 07, 2005 3:25 pm

Post 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:
User avatar
Calimero
Forum Contributor
Posts: 310
Joined: Thu Jan 22, 2004 6:54 pm
Location: Milky Way

...

Post 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.
Jr
Forum Commoner
Posts: 99
Joined: Mon Mar 07, 2005 3:25 pm

Post 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>
User avatar
Calimero
Forum Contributor
Posts: 310
Joined: Thu Jan 22, 2004 6:54 pm
Location: Milky Way

...

Post 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.
Jr
Forum Commoner
Posts: 99
Joined: Mon Mar 07, 2005 3:25 pm

Post by Jr »

cool, thanks for all the help Calimero.

Much appriciated!
Post Reply