EXAMPLE SCENARIO:
For example we have an InlineFrame inside a Layer and the Layers overflow is set to a hidden state
A NavigationBar is used to switch pages in the InlineFrame , but we want the InlineFrame to first animate outside the Layers viewport
So, we want to click a NavigationBar button but the InlineFrame first has to animate out of view before it changes it's page
In this scenario run on break could be used to break the NavigationBar executing it's anchor link
Instead we use this events callback to call an OnLoad module that animates the InlineFrame out of the Layers viewport
Then we use the callback of that OnLoad module to call the run on break to (re)activate the anchor, the page changes out of view
At the same time we can call a new OnLoad module which animates the InlineFrame back into the Layers viewport with a slight delay
RESULT: we click the NavigationBar button, InlineFrame animates out of view, page changes, InlineFrame animates back into view
Simple but effective interactive animation ...
Of course many more complex scenarios can be accomplished with run on break
For example we have an InlineFrame inside a Layer and the Layers overflow is set to a hidden state
A NavigationBar is used to switch pages in the InlineFrame , but we want the InlineFrame to first animate outside the Layers viewport
So, we want to click a NavigationBar button but the InlineFrame first has to animate out of view before it changes it's page
In this scenario run on break could be used to break the NavigationBar executing it's anchor link
Instead we use this events callback to call an OnLoad module that animates the InlineFrame out of the Layers viewport
Then we use the callback of that OnLoad module to call the run on break to (re)activate the anchor, the page changes out of view
At the same time we can call a new OnLoad module which animates the InlineFrame back into the Layers viewport with a slight delay
RESULT: we click the NavigationBar button, InlineFrame animates out of view, page changes, InlineFrame animates back into view
Simple but effective interactive animation ...
Of course many more complex scenarios can be accomplished with run on break
NOTE: always add an anchor <a> on the selector when using this function ie. #NavigationBar1 a OR #wb_Shape1 a
NOTE: the anchor is opened by a window.open function
NOTE: while the event breaks to first execute our animation, any buttons that could interfere needs to be blocked
01. we could use module | disable to disable and enable events
02. or use ie. easy tools | preblock to create an invisible overlay to block any interaction (run on call mode)
NOTE: the anchor is opened by a window.open function
NOTE: while the event breaks to first execute our animation, any buttons that could interfere needs to be blocked
01. we could use module | disable to disable and enable events
02. or use ie. easy tools | preblock to create an invisible overlay to block any interaction (run on call mode)
NOTE: the OnEvent module has 3 events per entry, use ie. a mouseover-mouseout-click event in one instance
NOTE: setting the selector to not used will stop the code for that event from being generated
NOTE: setting the selector to not used will stop the code for that event from being generated
ARCHITECTURE
EXPLAIN ?
module | OnEvent properties can be used to create interaction on objects by selector
module | OnEvent properties can be used to create interaction on objects by selector
__________________________________________________________________________
more info on module | OnEvent see here Properties
more info on module | OnEvent see here Properties
Entry 1:
Entry 2:
Entry 3: repeat etc etc
run on call : is the function name with which we can activate/call this function
selector : is the path to the object we want to interact with
event : is the trigger on which we want to execute a callback
callback : is the function we want to execute on event trigger
selector : is the path to the object we want to interact with
event : is the trigger on which we want to execute a callback
callback : is the function we want to execute on event trigger
MODULE ONEVENT - OVERVIEW
jQuery Event
TOOL
With the callback property we can create complex low level interaction and animation
We can activate animation or core that has been created in the module OnLoad or module Core Draggable or any other module
We can activate animation or core that has been created in the module OnLoad or module Core Draggable or any other module
NOTE:
• stop( ) actions are set with the property add action | before
• each step further into the stop structure, stop( ), stop(true) and stop(true,true) decreases the smoothness of the animation
• setting this property to not used prevents action code from being generated
• the stop( ) action can also be set in the OnLoad module
• the OnLoad module also has a lock method for controlling animation see here
• stop( ) actions are set with the property add action | before
• each step further into the stop structure, stop( ), stop(true) and stop(true,true) decreases the smoothness of the animation
• setting this property to not used prevents action code from being generated
• the stop( ) action can also be set in the OnLoad module
• the OnLoad module also has a lock method for controlling animation see here
ADD ACTION | BEFORE
actions can be set before the event occurs, specific use here is the stop action
actions can be set before the event occurs, specific use here is the stop action
STOP EXPLAINED ? stop(clearQueue, jumpToEnd)
stop( )
Stop is a very useful action we want to know about, especially when using events. - What does stop( ) do ?
An example:
Say we want to expand and contract an image with a mouseover, mouseout event
If we would not have a stop( ) action our animation would always expand full and contract full
If we would move rapidly in and out on the image our animation would not stop, it would continue it's animation
Our mouse would be off the image, but the animation would continue to expand, contract, expand, contract etc etc
Until ALL animations that are queued ... lined up, are finished
So we want our animation to first stop( ) it's action (it's queue) before it start it's next animation
We simply do that by placing a stop( ) action before our animation
Stop is a very useful action we want to know about, especially when using events. - What does stop( ) do ?
An example:
Say we want to expand and contract an image with a mouseover, mouseout event
If we would not have a stop( ) action our animation would always expand full and contract full
If we would move rapidly in and out on the image our animation would not stop, it would continue it's animation
Our mouse would be off the image, but the animation would continue to expand, contract, expand, contract etc etc
Until ALL animations that are queued ... lined up, are finished
So we want our animation to first stop( ) it's action (it's queue) before it start it's next animation
We simply do that by placing a stop( ) action before our animation
stop(true)
On complex animations we might want to use stop(true)
The true here stands for clearQueue
With a stop( ) alone we stop the current queue, the animation that is currently executing is stopped
But what if we created a complex animation
For example we have an image that moves to the left then expand and then move down etc etc
Executing just a stop( ) action would stop the current queued animation it's performing
But it would just continue into the next queued animation, move to the left would stop, but the expand animation continues
With clearQueue we can stop that from occurring, it stops the current animation and clears all lined up animations
On complex animations we might want to use stop(true)
The true here stands for clearQueue
With a stop( ) alone we stop the current queue, the animation that is currently executing is stopped
But what if we created a complex animation
For example we have an image that moves to the left then expand and then move down etc etc
Executing just a stop( ) action would stop the current queued animation it's performing
But it would just continue into the next queued animation, move to the left would stop, but the expand animation continues
With clearQueue we can stop that from occurring, it stops the current animation and clears all lined up animations
stop(true,true)
On some complex animations even a stop(true) will not stop the animation from occurring
In these instances we need to force the animation to stop and jump to the end, we can do that by using stop(true,true)
The second true here stands for jumpToEnd
This function can ie. be useful if we use relative motion of animation
On some complex animations even a stop(true) will not stop the animation from occurring
In these instances we need to force the animation to stop and jump to the end, we can do that by using stop(true,true)
The second true here stands for jumpToEnd
This function can ie. be useful if we use relative motion of animation
RUN ON BREAK
The run on break function can be used to break a Webbuilder link from executing
The anchor (<a>) can be called to execute at will by calling the function name applied here (=the run on break)
This function can be very useful if we ie. want to delay a link from executing before we impose an animation - interaction
The run on break function can be used to break a Webbuilder link from executing
The anchor (<a>) can be called to execute at will by calling the function name applied here (=the run on break)
This function can be very useful if we ie. want to delay a link from executing before we impose an animation - interaction
SELECTOR CONVERT
The selector by default is a string value, but with module | OnEvent the selector can convert to a non-string value
When the name contains the word window or document the tags around the value are automatically removed
Note that the name only has to contain the word ...
examples:
selector = window ---> $(window)
selector = windowVar ---> $(windowVar)
selector = #myID ---> $('#myID')
The selector by default is a string value, but with module | OnEvent the selector can convert to a non-string value
When the name contains the word window or document the tags around the value are automatically removed
Note that the name only has to contain the word ...
examples:
selector = window ---> $(window)
selector = windowVar ---> $(windowVar)
selector = #myID ---> $('#myID')