jorextensions.com free extensions for WYSIWYG Webbuilder
jordan (6j6)
jordan (6j6)
tutorial for easy tools | preblock
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com
TUTORIAL easy tools | preblock - basic
Welcome to this tutorial for jor_aniMateMASTERPACKv3.0 ...
In this tutorial we will use easy tools | preblock to create a basic preblock overlay pageloader
Easy tools | preblock can be found under the section 05. EASY TOOLS in the extension
Easy tools | preblock can be found under the section 05. EASY TOOLS in the extension
THE SELECTOR ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?
In this tutorial we are going to create a preblock overlay pageloader on state page-ready
Let's go ...
run mode
Easy tools | preblock can be used in many different setups
The main control to a setup is by using the run on load mode property
The main control to a setup is by using the run on load mode property
run on load mode = pageload-ready
To make the preblock overlay respond to state page-ready
We simply set the run on load mode to pageload-ready
That is basically all that's needed to run the preblock overlay in state page-ready
All other properties are used for styling purpose and/or selecting a different mode of use
We simply set the run on load mode to pageload-ready
That is basically all that's needed to run the preblock overlay in state page-ready
All other properties are used for styling purpose and/or selecting a different mode of use
timer settings
pagload | timer = true
timer | wait
Here the timer | wait adds 3000ms after page ready, the preblock overlay will be visible an extra 3000ms
timer | fade out
In default, without the timer properties used, the preblock overlay will fadeout by 500ms
Here the timer | fade out is set to make the preblock overlay fadeout by 800ms instead
timer | remove
The timer | remove property can be used to create an invisible block
The preblock has faded out, but is still present on the page, blocking any interaction on the page
In this tutorial this function is not used and the timer | remove is set to 0 removing the preblock instant
That's all the inputs we have to set
Here the timer | wait adds 3000ms after page ready, the preblock overlay will be visible an extra 3000ms
timer | fade out
In default, without the timer properties used, the preblock overlay will fadeout by 500ms
Here the timer | fade out is set to make the preblock overlay fadeout by 800ms instead
timer | remove
The timer | remove property can be used to create an invisible block
The preblock has faded out, but is still present on the page, blocking any interaction on the page
In this tutorial this function is not used and the timer | remove is set to 0 removing the preblock instant
That's all the inputs we have to set
timer | wait = 3000
timer | fade out = 800
timer | remove = 0
timer | fade out = 800
timer | remove = 0
As stated in they above, easy tools | preblock can be used in many different setups
Another basic setup in which to use the preblock overlay is by pageload redirect
A preblock overlay is created on one page, preloads another page and then redirects to that page
This has pros and cons to the above preblock pageloader on state page-ready from Tutorial 1 ...
But first ... let's setup easy tools | preblock into pageload redirect mode
Another basic setup in which to use the preblock overlay is by pageload redirect
A preblock overlay is created on one page, preloads another page and then redirects to that page
This has pros and cons to the above preblock pageloader on state page-ready from Tutorial 1 ...
But first ... let's setup easy tools | preblock into pageload redirect mode
run on load mode = pageload-redirect
The jor_aniMateMASTERPACKv3.0 extension is placed on an empty page
The pageload | redirect property is directed at the page to land on, the page we want to preload
The pageload | redirect property is directed at the page to land on, the page we want to preload
That's the full preblock overlay pageloader on state page-ready by redirect tutorial completed
What is jor_aniMateMASTERPACKv3.0 ?
jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless
jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless
Download the demo's of the above tutorials here as WB project ...
easy tools | preblock is a tool of jor_aniMateMASTERPACKv3.0 build 5 • 2009 - 2015
more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)
more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)
Hope you found these tutorials informative and useful ...
Easy tools | preblock can be used in many other setups
These demo's should be a good start point to experiment with
Comments, feedback etc regarding this tutorial please post them at the WB Forum Topic JMPv3.0 ...
jordan (6j6)
Easy tools | preblock can be used in many other setups
These demo's should be a good start point to experiment with
Comments, feedback etc regarding this tutorial please post them at the WB Forum Topic JMPv3.0 ...
jordan (6j6)
Online Manual
Online Manual - easy tools | preblock
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?
Online Manual - easy tools | preblock
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?
WYSIWYG Webbuilder Forum Topic JMPv3.0
More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com
Back To Top
More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com
Back To Top
We enable the timer properties by setting the pageload | timer property to true
Now we can use the timer properties to add timers for the preblock after state page-ready has occurred
That's the full preblock overlay pageloader on state page-ready tutorial completed
We change the run on load mode property to pageload-redirect
In this tutorial we will also use the optional timer properties
As an example, yes ... but mainly because the used Demo 1 page has little weight to the page
Which will make the preblock overlay barely visible, it almost instant fades out on state page-ready
By using the timer properties we can manual influence the manner in which the preblock operates
As an example, yes ... but mainly because the used Demo 1 page has little weight to the page
Which will make the preblock overlay barely visible, it almost instant fades out on state page-ready
By using the timer properties we can manual influence the manner in which the preblock operates
PRO
If a page is of heavy weight the pageload method of the first tutorial might not work flawless
The page may show before the preblock overlay sets in
Resulting in a flicker of the page, which of course is not want we want, the aim is to create a smooth pageload transition
With a pageload redirect the probability of flicker on a heavy weighted page occurring is less likely
If a page is of heavy weight the pageload method of the first tutorial might not work flawless
The page may show before the preblock overlay sets in
Resulting in a flicker of the page, which of course is not want we want, the aim is to create a smooth pageload transition
With a pageload redirect the probability of flicker on a heavy weighted page occurring is less likely
compare without timer properties
no timer properties used
run mode
redirect
pageload | redirect = ./demo3-redirect.html
In this Tutorial 2 the internal url is ./demo3-redirect.html
We also enable the timer properties for the same reason as stated in Tutorial 1, we add 3000ms
Note that in pageload-redirect mode the only active timer property is the timer | wait property
Any other timer would make no sense since the page redirects and therefore releases the preblock overlay
That's all the inputs we have to set
We also enable the timer properties for the same reason as stated in Tutorial 1, we add 3000ms
Note that in pageload-redirect mode the only active timer property is the timer | wait property
Any other timer would make no sense since the page redirects and therefore releases the preblock overlay
That's all the inputs we have to set
pros and cons
The pros and cons of a preblock pageloader redirect ...
CON
The con is obvious, the preblock overlay does not occur on the page itself
If the end-user always passes the front to the page we want them to land on, the pageload redirect works
But if ie. the redirected page itself is bookmarked, the end-user enters the page without a preblock overlay ever occuring
The con is obvious, the preblock overlay does not occur on the page itself
If the end-user always passes the front to the page we want them to land on, the pageload redirect works
But if ie. the redirected page itself is bookmarked, the end-user enters the page without a preblock overlay ever occuring
Level: Easy
easy tools | preblock - basic - tutorial
Preblock pageloader page ready
Tutorial 1
Tutorial 2
Preblock pageloader page ready - redirect
TUTORIAL
jor_aniMateMASTERPACKv3.0 b5
easy tools | preblock
jor_aniMateMASTERPACKv3.0 b5
easy tools | preblock
SEE LIVE DEMO 1
SEE LIVE DEMO 1
SEE LIVE DEMO 2
SEE LIVE DEMO 3
DOWNLOAD DEMOS
