shake in javascript

  

I want to make a shake effect on an image by clicking on it, I am trying to use javasscript but without success, any idea for resolution?


Thank you

Hi João,

It's very difficult for us to have an "idea for [a] solution" if you don't bother at all to tell what you are using, what you have tried to do, what you already did to find the problem etc.

Kilian Hekhuis wrote:

Hi João,

It's very difficult for us to have an "idea for [a] solution" if you don't bother at all to tell what you are using, what you have tried to do, what you already did to find the problem etc.

Hey Kilian
I tried with this command in javascript $ ("#toggle") .effect ("shake"); but up to outsystems does not reconcile, a platform does not give me feedback.

https://api.jqueryui.com/shake-effect/


Hi João,

Thanks for the extra info. It seems you are trying to "shake" a screen element that has an id of "toggle", but this can't be the id of an OutSystems widget. If you check the Console of your browser, you'll probably see an error pertaining to this. You need to pass the actual id of the widget you want to addres to the JavaScript. To get this, use myWidget.Id (where myWidget is the name you gave to the widget), and put that into the JavaScript (e.g. "$(""#" + myWidget.Id + """).effect(""shake"");").

Note that you really shouldn't be messing with JavaScript if you haven't got a full understanding of how it works, how you can debug it in a browser etc.

Kilian Hekhuis wrote:

Hi João,

Thanks for the extra info. It seems you are trying to "shake" a screen element that has an id of "toggle", but this can't be the id of an OutSystems widget. If you check the Console of your browser, you'll probably see an error pertaining to this. You need to pass the actual id of the widget you want to addres to the JavaScript. To get this, use myWidget.Id (where myWidget is the name you gave to the widget), and put that into the JavaScript (e.g. "$(""#" + myWidget.Id + """).effect(""shake"");").

Note that you really shouldn't be messing with JavaScript if you haven't got a full understanding of how it works, how you can debug it in a browser etc.

I'm developing on mobile, I've entered this command in javascript $ ($ parameters.div) .effect ("shake"); and I invoked JQuery in the required scripts but this one gives me "effect is not a function"


Hi João,

Ok, I didn't realize you were on mobile. For one, on mobile, it is not advised to use jquery, afaik, as it is pretty heavy for mobile use.

That said, "shake" seems to be a jQuery UI thing, not a jQuery thing. That's what I meant by not messing with JavaScript if you're not sure what you are doing. The mere fact that you seem lost when there's a clear error message like "effect is not a function", tells me you probably should indeed not try to use it.

Solution

Kilian Hekhuis wrote:

Hi João,

Ok, I didn't realize you were on mobile. For one, on mobile, it is not advised to use jquery, afaik, as it is pretty heavy for mobile use.

That said, "shake" seems to be a jQuery UI thing, not a jQuery thing. That's what I meant by not messing with JavaScript if you're not sure what you are doing. The mere fact that you seem lost when there's a clear error message like "effect is not a function", tells me you probably should indeed not try to use it.

Hey Kilian

Thanks for the tip, I can do the shake effect by css.
Here is my solution

SyntaxEditor Code Snippet

.shake_img:hover {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 5.4s; 
    /* When the animation is finished, start again */
    animation-iteration-count: 1; 
}





@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}


Solution

Hi João,

Great you found a solution. You've taught me some new stuff, thanks! :)