••• EXAMPLE 3
Target a specific and global window at the same time
Scroll entry 1
identifier : my scroll notes
selector | target link : #NavigationBar1
selector | target window : #Layer1
axis : xy
...
...
run on load : true
run on call : Call_Scroll_1
••• EXAMPLE 1
Scroll on a WB Bookmark or Object - (global - target window)
identifier : my scroll notes
selector | target link : document
selector | target window : window
axis : xy
...
...
run on load : true
run on call : Call_Scroll_1
CONTROLLING THE SCROLL
Settings for module | scroll can also be set programmable
PROGRAMMABLE SCROLL CONTROL
Settings can be get and set by using the this inside the callback | before property
example:
this.duration
some of the options:
duration
axis
queue
offset
easing
The callback functions also allows some arguments (anchor - on all)
example:
anchor.id = current link/anchor target id
We can also set a specific link target with the selector | target link which is specifically useful if we want to target a
specific target window and a global target window at the same time
When the global window is targeted, the specific targeted window (as a side effect) will start to scroll aswell
This can be subdued by using specific target links
__________________________________________________________________________
more info on module | scroll see here Properties
more info on module | scroll see here Online Tutorials
credits: john resig
advanced!
MODULE SCROLL - OVERVIEW
Horizontal - Vertical - Diagonal
Page Scrolling
PLUGIN
EXPLAIN ?
module | scroll properties can be used to create horizontal, vertical or diagonal page scroll motion
- in sequence or at the same time
- a specific link or window or a global link and window can be set
bookmark:
Link to : Internal Web Page/Page in this Project
Bookmark : bookmark1
OR
object:
Link to : Web Site/External Web Address
URL : #Shape1
A specific window can be targeted by setting the selector | target window property
••• EXAMPLE 2
Scroll on a WB Bookmark or Object inside a Layer1 - (specific - target window)
identifier : my scroll notes
selector | target link : document
selector | target window : #Layer1
axis : xy
...
...
run on load : true
run on call : Call_Scroll_1
...
Here the target window set to a Layer1 will create a scroll toward the bookmark or object , contained inside a Layer1 (specific)
NOTE: set the Layer overflow to scroll, hidden or auto
Scroll entry 2
identifier : my scroll notes
selector | target link : #wb_TabMenu1
selector | target window : window
axis : xy
...
...
run on load : true
run on call : Call_Scroll_1
Here the 1st entry uses a Webbuilder NavigationBar component to scroll a specific window target, a Layer1
The 2nd entry uses a Webbuilder TabMenu to scroll the global window
Both windows can now scroll without affecting each other
If we want to use Images as specific target link and use a class to target them
we can use the code modification | target link is class property
PREBLOCK OVERLAY ?
The code modification | preblock property can be used to assign an easy tools | preblock to display on page scroll
Create a preblock overlay with easy tools | preblock and use the run on call to assign the preblock overlay
Most likely easy tools | preblock will be set up like this ...
••• EXAMPLE 4
Specific target link as Image set by class
identifier : my scroll notes
selector | target link : .myClass
selector | target window : window
...
...
run on load : true
run on call : Call_Scroll_1
...
code modification | target link is class : true
...
add the class for the Image object(s) used in the HTML - inside tag or Inside anchor - class = 'myClass'
••• EXAMPLE
Preblock set and removed by run on call
...
overlay | opacity : 0.4
...
preload text | text : SCROLLING PAGE ... PLEASE WAIT ...
...
timer | wait : 0 -----------+ most likely we want the preblock
timer | fade out : 500 +--- to set instant on scroll start, then fade out
timer | remove : 0 -----------+ and instant remove on scroll end
pageload | timer : false
pageload | redirect :
pageload | callback :
run on load mode : run on call
run on call : Call_Preblock_1 <----- call
code modification | target : window
...
And in module | scroll the property preblock | run on call is set like ...
preblock | run on call : Call_Preblock_1 <---------- called
Adding a link to a bookmark or an object will now create a smooth scroll toward the bookmark or object (global)
In Webbuilder we can set the link like this