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.
Code: Select all
<iframe width='100%' height='100px' src="e;test_1.php"e; id="e;mxhIframe"e;></iframe>
<?print "e;<a onclick=\"e;parent.document.getElementById('mxhIframe').style.height = '500';\"e;>Increase</a>"e;;
print "e;<br><a onclick=\"e;parent.document.getElementById('mxhIframe').style.height = '200';\"e;>Decrease</a>"e;;?>
...
Posted: Tue May 03, 2005 4:11 pm
by Calimero
increment what ?!?
size.
Code: Select all
<?
print "e;<a onclick=\"e;parent.document.getElementById('mxhIframe').style.height += 1;\"e;>Increase</a>"e;;
print "e;<br><a onclick=\"e;parent.document.getElementById('mxhIframe').style.height -= 1;\"e;>Decrease</a>"e;;
?>
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

.
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).

...
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 "e;playing"e;
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 + "e;px"e;;
}
// Start the function with 1 or 0 to deside what to do - FOR TEST
resizeMe(1)
Code: Select all
<iframe marginwidth="e;0"e; align="e;left"e; height="e;200px"e; id='message_inbox' src="e;message.php?action=email_box"e; scrolling="e;yes"e; align=left frameborder=0 hspace=0 vspace=0> </iframe>
<a href="e;javascript:resizeMe(1)"e;>Message Inbox Grow</a>
<br><a href="e;javascript:resizeMe(0)"e;>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!