you can use the css for left and then add on click.
Add this in composition ready. i = i = 10 will move right and i = i -10 will move to the left. The original position here is 0 on the x axis.
i = i + 10;
Here is the correction - you need to add to the original position.
i = i + 10;
Sorry. I'm sure this is super simple.. but would I apply this code to the action of the button?
And what variables do I need to define?
Rectangle = the box I'm trying to move
Btn = one of the buttons? (ie. btn_a)?
Change sym.$('btn') to sym.$('btn_a') - This is the name of the button
sym.$('Rectangle') is the name of the box you want to move
is the click event on the button. I prefer to put code in composition ready as much as possible so most everything is in the same place.
the code inside the click event is incrementing the position by 10 each time you click.
Awesome. Thank you so much! Works perfectly. Now.. is there a way I can stop if from moving after a certain point?
(Ie. if it's at 0.. I don't want it to go -10 px.)
Sorry for all the questions..
Here is a way to do it:
var box = sym.$('Rectangle');
// in order to rectrict the position to 0 on the left, you
// must change the result of left which is a string like 200px
// to an integer and use partInt
i = i - 10;
var xPos = parseInt(box.css('left'));
// sym.$('boxPos') this is a text element added to the stage that gives the position of the box - this is just for visual information
I might be doing this wrong.. but I just copy and pasted the code into the sample project you linked earlier and when it hits the stop at 0 it jumps backwards a few pixels.
let me look.
Well it is because of the increment of 10.
Just change this line:
here's a mockup of what i'm trying to do.. https://www.sugarsync.com/pf/D7175689_712_288823456
i have a box extending infinitely long into the overflow.. the left end starts at 250px
and i have buttons A and B moving the box 25 px one way or the other..
if the box is still in the starting position.. i don't want it to move negatively? i hope that makes sense..
as of right now.. the code makes it stop and then jumps back and forth if you keep pressing one of the buttons.. (ie.. if you get to the stop.. and press b a few times and then press a.. it'll jump)
thanks again for all your help..
you are amazing! i was thinking dying out of frustration trying to figure it out.. it works perfectly now! thank you soooo much!!
My pleasure. Glad to help!
sorry.. one last question.. is there a way to add an easing effect to the movement?
1 person found this helpful
Yes. For example you could add this easing for Firefox.
box.css('-moz-transition','all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000)');
(To make it easy, you can choose easing code from here: http://matthewlein.com/ceaser/)
Note: Use all prefixes if you want them to work in all browsers.
you are too much. thanks again for all your help. hopefully one day, i'll be doing the helping. haha.
This is exactly how it should work! Return the help when you can.
Hi, could you tell me where this code for the easing goes as I cannot get it to work,
Thanks so much.
// insert code for mouse click here
var ball = sym.$('ball');
ball.css('-webkit-transition','all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000)');
i created a div element called "ball" and stored it inside a variable called "ball"
then created a css property for it.
then changed its css position.
I know this is a bit too late but I hope it helps people in future, like me
Thanks a lot for this website! It has been a great help!
Can you share again this project ? I'm in the mid of trying this for my students
Thanks a lot !
Here is the corrected project.
1= I forgot to initialize i = 0;
2- I forgot to reset i to 0.
See if this works for you.
Yes, thats the one. Thank you very much !