04. MODE - PAGELOAD CALLBACK
••• EXAMPLE: Remove external by callback
timer | wait : 2000 ---+ timer |
timer | fade out : 1500 +- not used -+ the overlay is set, but does not remove
timer | remove : 2000 ---+ (optional) |
pageload | timer : false
pageload | redirect :
pageload | callback : add a new function
run on load mode : pageload-callback
run on call : Call_Preblock_1
code modification | target : window
Here the preblock overlay is set , but does not remove , instead it can be removed by using the pageload | callback property
WHEN IS THIS MODE USED ?
Most likely as an on pageload message in which we want the removal of the preblock overlay to occur automatically by page ready
But contrary to the above page-ready mode we want to customize the removal of the preblock overlay
ie. we could use module | OnLoad to custom remove the overlay, an example ...
••• EXAMPLE: Remove external by callback
timer | wait : 2000 ---+ timer |
timer | fade out : 1500 +- not used -+ the overlay is set, but does not remove
timer | remove : 2000 ---+ (optional) |
pageload | timer : false
pageload | redirect :
pageload | callback : add a new function
run on load mode : pageload-callback
run on call : Call_Preblock_1
code modification | target : window
Here the preblock overlay is set , but does not remove , instead it can be removed by using the pageload | callback property
WHEN IS THIS MODE USED ?
Most likely as an on pageload message in which we want the removal of the preblock overlay to occur automatically by page ready
But contrary to the above page-ready mode we want to customize the removal of the preblock overlay
ie. we could use module | OnLoad to custom remove the overlay, an example ...
02. MODE - RUN ON CALL
••• EXAMPLE: Set and remove by run on call
timer | wait : 2000 -----------+
timer | fade out : 1500 +--- the timer properties are used
timer | remove : 2000 -----------+
pageload | timer : false
pageload | redirect :
pageload | callback :
run on load mode : run on call
run on call : Call_Preblock_1 <---- the run on call to use
code modification | target : window
Here the preblock overlay is not set but can be set and removed by calling the run on call
The timer properties dictates how the removal of the preblock overlay occurs
By calling the run on call the preblock overlay will act as a switch, 1st call will set the preblock, 2nd call will remove the preblock
WHEN IS THIS MODE USED ?
Most likely as an overlay block in which we want to prevent user interaction on a specific object or on the complete window
The preblock overlay can be called as an on and off switch by each run on call
ie. module | scroll internally has a property that uses the preblock overlay to execute before and after scroll occurs (see here)
••• EXAMPLE: Set and remove by run on call
timer | wait : 2000 -----------+
timer | fade out : 1500 +--- the timer properties are used
timer | remove : 2000 -----------+
pageload | timer : false
pageload | redirect :
pageload | callback :
run on load mode : run on call
run on call : Call_Preblock_1 <---- the run on call to use
code modification | target : window
Here the preblock overlay is not set but can be set and removed by calling the run on call
The timer properties dictates how the removal of the preblock overlay occurs
By calling the run on call the preblock overlay will act as a switch, 1st call will set the preblock, 2nd call will remove the preblock
WHEN IS THIS MODE USED ?
Most likely as an overlay block in which we want to prevent user interaction on a specific object or on the complete window
The preblock overlay can be called as an on and off switch by each run on call
ie. module | scroll internally has a property that uses the preblock overlay to execute before and after scroll occurs (see here)
01. MODE - TIMER
••• EXAMPLE: Remove on timer
timer | wait : 2000 -----------> the overlay is set, waits for 2 sec.
timer | fade out : 1500 -----------> then fades out 1.5 sec.
timer | remove : 2000 -----------> remains in invisible state 2 sec. then removes
pageload | timer : false
pageload | redirect :
pageload | callback :
run on load mode : timer
run on call : Call_Preblock_1
code modification | target : window
Here the timer properties dictates how the removal of the preblock overlay occurs
WHEN IS THIS MODE USED ?
Most likely as a pageload message in which we only want to control the removal time of the preblock overlay
••• EXAMPLE: Remove on timer
timer | wait : 2000 -----------> the overlay is set, waits for 2 sec.
timer | fade out : 1500 -----------> then fades out 1.5 sec.
timer | remove : 2000 -----------> remains in invisible state 2 sec. then removes
pageload | timer : false
pageload | redirect :
pageload | callback :
run on load mode : timer
run on call : Call_Preblock_1
code modification | target : window
Here the timer properties dictates how the removal of the preblock overlay occurs
WHEN IS THIS MODE USED ?
Most likely as a pageload message in which we only want to control the removal time of the preblock overlay
••• EXAMPLE: Remove external by callback + OnLoad module callback to safely remove the preblock overlay
module | preblock
identifier : my preblock notes
class : preblock
...
timer | wait : 2000
timer | fade out : 1500
timer | remove : 2000
pageload | timer : false
pageload | redirect :
pageload | callback : Call_Load_1() -------| callback calls OnLoad module
run on load mode : pageload-callback
run on call : Call_Preblock_1
code modification | target : window
module | OnLoad
identifier : my animation notes
delay : 0
== PARENT or 1st ==============================
selector : .preblock ------| preblock overlay class used
action 1 | action : left
action 1 | value : +=2000
action 2 | action : off
action 2 | value :
duration : 2000
...
callback | function : Call_Preblock_1() ------| preblock run on call used
... | to safely remove the preblock overlay
run on call : Call_Load_1
...
Here instead of a fade out, the preblock overlay is custom removed by animating it to the right, out of the window viewport (+=2000)
At the end of this chain the callback of the OnLoad module is used to call the preblock module, the preblock will function as a switch
This (2nd) call will remove the preblock overlay so it can safely be called again if we later need the overlay to execute again
IMPORTANT:
Note that the preblock overlay always act as a switch 1st call sets overlay - 2nd call removes overlay
Always end the preblock overlay chain and remove it safely by a 2nd call
module | preblock
identifier : my preblock notes
class : preblock
...
timer | wait : 2000
timer | fade out : 1500
timer | remove : 2000
pageload | timer : false
pageload | redirect :
pageload | callback : Call_Load_1() -------| callback calls OnLoad module
run on load mode : pageload-callback
run on call : Call_Preblock_1
code modification | target : window
module | OnLoad
identifier : my animation notes
delay : 0
== PARENT or 1st ==============================
selector : .preblock ------| preblock overlay class used
action 1 | action : left
action 1 | value : +=2000
action 2 | action : off
action 2 | value :
duration : 2000
...
callback | function : Call_Preblock_1() ------| preblock run on call used
... | to safely remove the preblock overlay
run on call : Call_Load_1
...
Here instead of a fade out, the preblock overlay is custom removed by animating it to the right, out of the window viewport (+=2000)
At the end of this chain the callback of the OnLoad module is used to call the preblock module, the preblock will function as a switch
This (2nd) call will remove the preblock overlay so it can safely be called again if we later need the overlay to execute again
IMPORTANT:
Note that the preblock overlay always act as a switch 1st call sets overlay - 2nd call removes overlay
Always end the preblock overlay chain and remove it safely by a 2nd call
03. MODE - PAGELOAD READY
••• EXAMPLE: Remove on page ready
timer | wait : 2000 ---+ timer |
timer | fade out : 1500 +- not used -+ the overlay is set, waits for page ready
timer | remove : 2000 ---+ (optional) | then fades out 0.5 sec. and removes
pageload | timer : false | (default)
pageload | redirect :
pageload | callback :
run on load mode : pageload-ready
run on call : Call_Preblock_1
code modification | target : window
By default the timer properties are not used in pageload mode, enable them with the property pageload | timer
WHEN IS THIS MODE USED ?
Most likely as an on pageload message in which we want the removal of the preblock overlay to occur automatically by page ready
For an alternative page ready removal method see the pageload-redirect mode here
••• EXAMPLE: Remove on page ready
timer | wait : 2000 ---+ timer |
timer | fade out : 1500 +- not used -+ the overlay is set, waits for page ready
timer | remove : 2000 ---+ (optional) | then fades out 0.5 sec. and removes
pageload | timer : false | (default)
pageload | redirect :
pageload | callback :
run on load mode : pageload-ready
run on call : Call_Preblock_1
code modification | target : window
By default the timer properties are not used in pageload mode, enable them with the property pageload | timer
WHEN IS THIS MODE USED ?
Most likely as an on pageload message in which we want the removal of the preblock overlay to occur automatically by page ready
For an alternative page ready removal method see the pageload-redirect mode here
05. MODE - PAGELOAD REDIRECT
••• EXAMPLE: Remove by redirect
timer | wait : 2000 <--- set extra delay wait time (optional)
timer | fade out : 1500 <--- not used
timer | remove : 2000 <--- not used
pageload | callback :
pageload | redirect : ./index.html <--- the page that is preloaded/redirected to
pageload | timer : true
run on load mode : pageload-redirect
run on call : Call_Preblock_1
code modification | target : window
Only the timer | wait property is used in this mode and adds extra wait time before the redirect executes
WHEN IS THIS MODE USED ?
Most likely as an on pageload message in which we want the removal of the preblock overlay to occur automatically by page ready
If a page has a heavy weight, the above pageload-ready mode might not work adequate, content may show before the preblock executes
Pageload-redirect mode will wait for page ready of the target page, then redirect to the target page
The extension is placed on an empty page and the pageload | redirect property points to the page we want to preload
There is of course no removal of the preblock overlay since the page redirects to the target page
••• EXAMPLE: Remove by redirect
timer | wait : 2000 <--- set extra delay wait time (optional)
timer | fade out : 1500 <--- not used
timer | remove : 2000 <--- not used
pageload | callback :
pageload | redirect : ./index.html <--- the page that is preloaded/redirected to
pageload | timer : true
run on load mode : pageload-redirect
run on call : Call_Preblock_1
code modification | target : window
Only the timer | wait property is used in this mode and adds extra wait time before the redirect executes
WHEN IS THIS MODE USED ?
Most likely as an on pageload message in which we want the removal of the preblock overlay to occur automatically by page ready
If a page has a heavy weight, the above pageload-ready mode might not work adequate, content may show before the preblock executes
Pageload-redirect mode will wait for page ready of the target page, then redirect to the target page
The extension is placed on an empty page and the pageload | redirect property points to the page we want to preload
There is of course no removal of the preblock overlay since the page redirects to the target page
REMEDIES:
01. possibly a pageload entry on object level and a pageload entry on window level is created
and the pageload object level entry runs before the pageload window level entry
move the pageload window level entry to top , it should execute first
02. possibly multiple jor_aniMateTEMPLATEs are running with each there own pageload entry
the extension that executes a window pageload as second is causing the alert (= Message from TEMPLATE ID: x)
move the extension to back, before any other jor_aniMateTEMPLATE , it should execute as first
03. possibly multiple pageload on window level entries are created and run on pageload at the same time
only one pageload on window level should run on page load, remove or disable multiple entries
NOTE:
Pageload mode will only execute the window load function once, therefore having multiple pageloads per page is unlogical
A second pageload (window or object level) will simply not execute the window load function and will instantly remove the preblock
If the pageload | timer property is enabled the pageload will behave the same as in timer mode
Logically there should only be just one pageload preblock executing per page load
01. possibly a pageload entry on object level and a pageload entry on window level is created
and the pageload object level entry runs before the pageload window level entry
move the pageload window level entry to top , it should execute first
02. possibly multiple jor_aniMateTEMPLATEs are running with each there own pageload entry
the extension that executes a window pageload as second is causing the alert (= Message from TEMPLATE ID: x)
move the extension to back, before any other jor_aniMateTEMPLATE , it should execute as first
03. possibly multiple pageload on window level entries are created and run on pageload at the same time
only one pageload on window level should run on page load, remove or disable multiple entries
NOTE:
Pageload mode will only execute the window load function once, therefore having multiple pageloads per page is unlogical
A second pageload (window or object level) will simply not execute the window load function and will instantly remove the preblock
If the pageload | timer property is enabled the pageload will behave the same as in timer mode
Logically there should only be just one pageload preblock executing per page load
__________________________________________________________________________
more info on easy tools | preblock see here Properties
more info on easy tools | preblock see here Online Tutorials
more info on easy tools | preblock see here Properties
more info on easy tools | preblock see here Online Tutorials
advanced!
FireFox 30.x
PAGELOAD ORDER OF EXECUTION ?
Easy tools | preblock uses a window load function on the pageload modes to wait for the removal of the preblock overlay
The window load function will run once, the order in which the pageload mode executes is therefore of importance
If the pageload mode is used as a window page loader, that preblock entry should run first to execute the window load function
If the order of execution is incorrect (unlogical), a window alert will warn for unlogical order of execution
The alert will read as ...
Easy tools | preblock uses a window load function on the pageload modes to wait for the removal of the preblock overlay
The window load function will run once, the order in which the pageload mode executes is therefore of importance
If the pageload mode is used as a window page loader, that preblock entry should run first to execute the window load function
If the order of execution is incorrect (unlogical), a window alert will warn for unlogical order of execution
The alert will read as ...
CODE MODIFICATION TARGET ?
Many other setups and scenarios can be achieved with module | preblock even more so by using the code modification | target
Easy tools | preblock internally uses module | reposition to position the preblock overlay
Just as module | reposition can operate on window and object level, so can easy tools | preblock
By using the property code modification | target we can modify the method in which easy tools | preblock operates
Instead of creating a preblock for the entire window we can target any specific object
The preblock overlay will take the targets position, dimension and stacking order and is placed on top of the target object
••• EXAMPLE: Set and remove a preblock overlay by run on call on a Webbuilder NavigationBar
timer | wait : 2000 ----------+
timer | fade out : 1500 +--- the timer properties are used
timer | remove : 2000 ----------+
pageload | timer : false
pageload | redirect :
pageload | callback :
run on load mode : run on call
run on call : Call_Preblock_1
code modification | target : #NavigationBar1 <------ target is a WB NavigationBar
Here a NavigationBar is targeted with the preblock run on call method
By calling the preblock run on call in sequence the overlay can now be used as a switch to prevent interaction on the NavigationBar
Many other setups and scenarios can be achieved with module | preblock even more so by using the code modification | target
Easy tools | preblock internally uses module | reposition to position the preblock overlay
Just as module | reposition can operate on window and object level, so can easy tools | preblock
By using the property code modification | target we can modify the method in which easy tools | preblock operates
Instead of creating a preblock for the entire window we can target any specific object
The preblock overlay will take the targets position, dimension and stacking order and is placed on top of the target object
••• EXAMPLE: Set and remove a preblock overlay by run on call on a Webbuilder NavigationBar
timer | wait : 2000 ----------+
timer | fade out : 1500 +--- the timer properties are used
timer | remove : 2000 ----------+
pageload | timer : false
pageload | redirect :
pageload | callback :
run on load mode : run on call
run on call : Call_Preblock_1
code modification | target : #NavigationBar1 <------ target is a WB NavigationBar
Here a NavigationBar is targeted with the preblock run on call method
By calling the preblock run on call in sequence the overlay can now be used as a switch to prevent interaction on the NavigationBar
Template ID of the Extension that is
causing the alert
causing the alert
Possible causes of unlogical
pageload on window level
and the remedies
pageload on window level
and the remedies
ETOOL
EASY TOOLS - PREBLOCK - OVERVIEW
Page Loader or Page Block
EXPLAIN ?
easy tools | preblock properties can be used to create a preblock overlay on window or object level
It can be setup as a preload message or as an overlay block preventing user interaction
easy tools | preblock properties can be used to create a preblock overlay on window or object level
It can be setup as a preload message or as an overlay block preventing user interaction
Easy tools | preblock has multiple methods of setup and removal of the preblock overlay
The main modes are set with the property run on load mode
the modes are ...
01. timer
02. run on call
03. pageload-ready
04. pageload-callback
05. pageload-redirect
Some examples and explanations of the different modes and there uses ...
The main modes are set with the property run on load mode
the modes are ...
01. timer
02. run on call
03. pageload-ready
04. pageload-callback
05. pageload-redirect
Some examples and explanations of the different modes and there uses ...
PAGELOAD TIMER ?
The pageload modes by default do not make use of the timer properties
In pageload mode most likely we want the page ready state to dictate the overlay removal
By default the overlay will fadeout by 500 ms if applicable
But ... with the property pageload | timer we can enable the timer properties if we want a greater control over the overlay removal
Or in mode pageload-redirect set a longer delay time before the redirect occurs
The pageload modes by default do not make use of the timer properties
In pageload mode most likely we want the page ready state to dictate the overlay removal
By default the overlay will fadeout by 500 ms if applicable
But ... with the property pageload | timer we can enable the timer properties if we want a greater control over the overlay removal
Or in mode pageload-redirect set a longer delay time before the redirect occurs
