Web2: possible to shake a webcontrol or webcontainer?

Targets Web
1

I would like to shake some webcontrol when a password is wrong for example
I tried :

mLogonPanel.ExecuteJavaScript( "$(""#"+mLogonPanel.ControlID+""").effect(""shake"");")

but nothing happens, and no error on the browser debug panel.
any hint ?
thanks.

2

I would do it with css keyframe animations.

Just add the css class to the container and the css does the job for you.

For example with something like:

3

Try:

mLogonPanel.ExecuteJavaScript( "$("'#"+mLogonPanel.ControlID+"'").effect(""shake"");")

it could be you need something after mLogonPanel.ControlID+"_something"
check your browser context menu on the field or control → inspect.

https://www.tutorialspoint.com/jquery/effect-shake.htm
jquery is already in your web app.

4

still doesn’t work
this is the container I’m using. there is no “_something” after the controlID

Capture d’écran 2021-12-08 à 22.42.57

6

I was able to get it to work – let me try and post a module with the code.

1 Like
7

Hot off the press: GitHub - donl/xojo-web2.0-jquery-effects: jQuery Effects for Xojo Web 2.0

2 Likes
8

thank you very much for this.
sorry but it does not seems to work on my macos high sierra and opera or safari.

ps: I find it extreme that you need a websdkcontrol to make this “simple” thing work !

9

The big thing is including the right bit of JavaScript. There is probably another way but you can see it is only a bit of Xojo code.

10

css should be easier than a websdkcontrol 
 but I’m complete noob with css !
but howto convert this css code to a xojo webstyle ? is it a transition ?

11

Just a question: I see you are using JQuery. Have you embedded the jquery library into your app ?

12

if you look at the source html of a xojo web page, jquery is already embedded.
as Derk said some posts above.

1 Like
13

It’s there by default in a webapp.

1 Like
14

Ah sorry i see there is no such effect in “jquery” it’s in jquery-ui.
But there is these:

You can “animate” for example:

mLogonPanel.ExecuteJavaScript( "$("'#"+mLogonPanel.ControlID+"'").animate('{width: ""+=50px""}');")

queueing:

2 Likes
15

or include jquery-ui in the app html header ?

16

can do, but just for effects
 ?

17

well, this still doesn’t shake or animate any pixel of my webcontainer !

Dim js As String
For i As Integer = 1 To 10
  js = js + "$('#"+mLogonPanel.ControlID+"').animate('{left:'"+Str(mLogonPanel.Left-5)+"'},50);"
  js = js + "$('#"+mLogonPanel.ControlID+"').animate('{left:'"+Str(mLogonPanel.Left+5)+"'},50);"
Next i
mLogonPanel.ExecuteJavaScript( js.ToUTF8)
18

Do you have the macOS Accessibility setting “Reduce Motion” enabled? This can prevent browsers from animating some effects.

1 Like
19

good catch, but nope this accessibility checkbox is unchecked on my system.

2 Likes
20

I once tried to use CSS to size automatically controls (early work on RubberViewsWE). Problem is, the size of controls is tightly controlled, it did not work.

You may be in the same case.

But it should be possible to use a timer to move the control back and forth in pure Xojo.

21

One option is to add the shake CSS to the HTML Header:

<style>@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); } }
</style>

Used the code from: How To Shake an Image

Then set the style for the control that you want to shake, this is for a WebRectangle with a button and a label:

Rectangle1.Style.Value("animation") = "shake 0.5s"

You will need to reset the style to be able to shake again:

Rectangle1.Style.Value("animation") = ""

We can do something like this:
shake

5 Likes