METHOD 1
the z-index | stack property can be set by input of a number value, use this property as a way to dock objects
example:
say we want to reposition an object as a header or footer on the foreground
the object is repositioned but maintains it's stacking order as it is positioned in design time
each object that is added to the project would push the object that is supposed to serve as header more backward
we constantly would have to move the object forward to keep it in front of other content
in instances like this we could use the property z-index | stack to dock the object ie. in front by giving it a high z-index value
dock an object in front by giving it a high value (ie. 2000+)
dock an object in back by giving it a negative value (ie. -1)
highly recommended: use the z-index | stack property only in this manner - as a docking method
NOTE:
for cross-browser compatibility a z-index of 0 can not be set, internally the module will convert a value of 0 to -1
this conversion can be surpassed by using b0 instead (advanced user only)
the z-index | stack property can be set by input of a number value, use this property as a way to dock objects
example:
say we want to reposition an object as a header or footer on the foreground
the object is repositioned but maintains it's stacking order as it is positioned in design time
each object that is added to the project would push the object that is supposed to serve as header more backward
we constantly would have to move the object forward to keep it in front of other content
in instances like this we could use the property z-index | stack to dock the object ie. in front by giving it a high z-index value
dock an object in front by giving it a high value (ie. 2000+)
dock an object in back by giving it a negative value (ie. -1)
highly recommended: use the z-index | stack property only in this manner - as a docking method
NOTE:
for cross-browser compatibility a z-index of 0 can not be set, internally the module will convert a value of 0 to -1
this conversion can be surpassed by using b0 instead (advanced user only)
CALLBACK:
callback | init
add a function at reposition initialize - see here
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: reposInit: function (option,add) { }
option = set and get the internal options
add = set and get the additional internal options
callback | before
add a function before reposition occurs - see here
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: reposBefore: function (option,add) { }
option = set and get the internal options
add = set and get the additional internal options
callback | init
add a function at reposition initialize - see here
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: reposInit: function (option,add) { }
option = set and get the internal options
add = set and get the additional internal options
callback | before
add a function before reposition occurs - see here
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: reposBefore: function (option,add) { }
option = set and get the internal options
add = set and get the additional internal options
horizontal scroll
enable fixed positioned objects to abide the horizontal scrollbar
from update JMPv3.0 b5.3 on this property can also be used reversed on absolute and fixed positioned objects
false = disable
true = enable
-1 = reverse - (ie. use in combination with aspect mode)
NOTE: not used in matrix mode
•••• var: non-string
enable fixed positioned objects to abide the horizontal scrollbar
from update JMPv3.0 b5.3 on this property can also be used reversed on absolute and fixed positioned objects
false = disable
true = enable
-1 = reverse - (ie. use in combination with aspect mode)
NOTE: not used in matrix mode
•••• var: non-string
selector
target an object by id (#) or class (.)
the full range on selectors is beyond the scope of this manual
for an in depth on selectors simplified see here
IMPORTANT: the selector used here should always be the (outer) parent holder, more info on parent & child selector see here
ie. an Image1 should always be targeted with #wb_Image1 (see reference)
target an object by id (#) or class (.)
the full range on selectors is beyond the scope of this manual
for an in depth on selectors simplified see here
IMPORTANT: the selector used here should always be the (outer) parent holder, more info on parent & child selector see here
ie. an Image1 should always be targeted with #wb_Image1 (see reference)
selector vs matrix
the selector here has a specific format used in combination with the mode matrix from the property reposition mode (see below)
the selector can be entered as a string or in shorthand
ie.
string = Layer1,Layer2,Layer3,Layer4
shorthand = Layer+4
both of these examples will create a matrix on 4 Webbuilder Layers (see also here)
•••• var: string
the selector here has a specific format used in combination with the mode matrix from the property reposition mode (see below)
the selector can be entered as a string or in shorthand
ie.
string = Layer1,Layer2,Layer3,Layer4
shorthand = Layer+4
both of these examples will create a matrix on 4 Webbuilder Layers (see also here)
•••• var: string
reposition mode
with reposition mode we can reposition objects into specific positions of the window viewport and beyond the window viewport
objects can be repositioned in fixed and absolute position
with the property mode | target we can modify this property to operate on object level (see below)
this property also holds a specific matrix mode, which can be used to create fullscreen Webbuilder Layers in a matrix layout
with reposition mode we can reposition objects into specific positions of the window viewport and beyond the window viewport
objects can be repositioned in fixed and absolute position
with the property mode | target we can modify this property to operate on object level (see below)
this property also holds a specific matrix mode, which can be used to create fullscreen Webbuilder Layers in a matrix layout
-----
run on call
run on call is the function name we can give this current function
we can call this function to occur ie. by using a callback | function
for an in depth on callback and run on call see here
code modification | visible
an object can be set to a hidden state - setting this property to visible will auto unhide the object after repositioning occurred
this can be useful to prevent flicker of an object while it is repositioning on pageload
but more so to create a cleaner view while in WB design time, hide objects out of view that will be repositioned
or set this property to hidden for objects that need to remain hidden after pageload
NOTE: not used in matrix mode
•••• var: string
code modification | variable
add function variables ie. Call_Disable_1(myVariable)
this function is beyond the scope of this manual see here
code modification | javascript | after
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual see here
code modification | javascript | before
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual see here
run on call
run on call is the function name we can give this current function
we can call this function to occur ie. by using a callback | function
for an in depth on callback and run on call see here
code modification | visible
an object can be set to a hidden state - setting this property to visible will auto unhide the object after repositioning occurred
this can be useful to prevent flicker of an object while it is repositioning on pageload
but more so to create a cleaner view while in WB design time, hide objects out of view that will be repositioned
or set this property to hidden for objects that need to remain hidden after pageload
NOTE: not used in matrix mode
•••• var: string
code modification | variable
add function variables ie. Call_Disable_1(myVariable)
this function is beyond the scope of this manual see here
code modification | javascript | after
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual see here
code modification | javascript | before
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual see here
fullscreen | target child
set which object to target for fullscreen mode
false = target parent only
true = target parent and child (wb_ & id)
auto = target children also - if selector starts with #wb_
see more info on parent & child (wb_ vs id) here
NEW - in JMPv3.0 b5.3
2 powerful aspect ratio modes for image objects are added in JMPv3.0 b5.3
aspect 1 - aspect to motion
the 1th mode is the conventional conversion equal to css background-image cover
the image expands and contracts on a viewport until the ratio can not be maintained any longer and
the contraction stops, at this point the image starts to move in a forward and/or upward motion
aspect 2 - aspect to motion reverse
the 2nd mode behaves in the same manner as aspect 1
the image expands and contracts on a viewport until the ratio can not be maintained any longer and
the contraction stops, however at this point the image enters into a reverse mode, it expands
the viewport contracts, the image expands maintaining aspect
at the same time the image starts to move in a forward and/or upward motion
ADVANCED ADDITIONAL CONTROL:
both modes in addition have 2 powerful options available to modify the motion speed
the forward and/or upward motion speed can individually be set
this allows to find and set an optimal positioning (focus) for an image - (or creative design)
jQuery data or the callback | before property can be used for this
example:
option.aspectX = 2;
option.aspectY = 1;
- 1 = motion is disabled - image clips
- 2 = default motion (close to conventional conversion)
- higher values decreases the motion speed
MULTI INPUT BY CLASS OR STRING:
NEW in JMPv3.0 b5.6 - a class or string can be used to target multiple images on a single entry
ADVANCED:
the internal option option.curr can be used to get the current image - $(option.curr)
NOTE:
a WB Image object by default does not include a class on the parent, this requires programming
NOTE: option aspect is not used in matrix mode
•••• var: string
set which object to target for fullscreen mode
false = target parent only
true = target parent and child (wb_ & id)
auto = target children also - if selector starts with #wb_
see more info on parent & child (wb_ vs id) here
NEW - in JMPv3.0 b5.3
2 powerful aspect ratio modes for image objects are added in JMPv3.0 b5.3
aspect 1 - aspect to motion
the 1th mode is the conventional conversion equal to css background-image cover
the image expands and contracts on a viewport until the ratio can not be maintained any longer and
the contraction stops, at this point the image starts to move in a forward and/or upward motion
aspect 2 - aspect to motion reverse
the 2nd mode behaves in the same manner as aspect 1
the image expands and contracts on a viewport until the ratio can not be maintained any longer and
the contraction stops, however at this point the image enters into a reverse mode, it expands
the viewport contracts, the image expands maintaining aspect
at the same time the image starts to move in a forward and/or upward motion
ADVANCED ADDITIONAL CONTROL:
both modes in addition have 2 powerful options available to modify the motion speed
the forward and/or upward motion speed can individually be set
this allows to find and set an optimal positioning (focus) for an image - (or creative design)
jQuery data or the callback | before property can be used for this
example:
option.aspectX = 2;
option.aspectY = 1;
- 1 = motion is disabled - image clips
- 2 = default motion (close to conventional conversion)
- higher values decreases the motion speed
MULTI INPUT BY CLASS OR STRING:
NEW in JMPv3.0 b5.6 - a class or string can be used to target multiple images on a single entry
ADVANCED:
the internal option option.curr can be used to get the current image - $(option.curr)
NOTE:
a WB Image object by default does not include a class on the parent, this requires programming
NOTE: option aspect is not used in matrix mode
•••• var: string
__________________________________________________________________________
more info on module | reposition see here Overview
more info on module | reposition see here Overview Target
more info on module | reposition see here Overview Force
more info on module | reposition see here Overview
more info on module | reposition see here Overview Target
more info on module | reposition see here Overview Force
METHOD 2
the z-index | stack property can also be set by input of selector a target object
the target object z-index will be taken and transferred to the repositioned object
internally this method also automatically adjust for the above - z-index of 0 - issue
note that in this method the stacking occurs independent from the level each object may be positioned in
ie. an object that is repositioned to the body with a target of an object that is on a WB centered page
will position the repositioned object above or below all centered content
recommended: advanced user only
the z-index | stack property can also be set by input of selector a target object
the target object z-index will be taken and transferred to the repositioned object
internally this method also automatically adjust for the above - z-index of 0 - issue
note that in this method the stacking occurs independent from the level each object may be positioned in
ie. an object that is repositioned to the body with a target of an object that is on a WB centered page
will position the repositioned object above or below all centered content
recommended: advanced user only
NOTE:
although true is equal to 0+win1
the use of true in combination with a centered page has the advantage of an object automatically
obtaining a minimal width vs centered page adjust
optional the callback | before property can be used to set an optional minimal width or disable this function
ie.
add.minWidth = 900 --> set minimal width at 900px
add.minWidth = false --> disable minimal width adjust
although true is equal to 0+win1
the use of true in combination with a centered page has the advantage of an object automatically
obtaining a minimal width vs centered page adjust
optional the callback | before property can be used to set an optional minimal width or disable this function
ie.
add.minWidth = 900 --> set minimal width at 900px
add.minWidth = false --> disable minimal width adjust
b5.2
b5.3
b5.3
MODULE REPOSITION - PROPERTIES
the full list of reposition modes is:
top-left
top-center
top-right
center-left
center-center
center-right
bottom-left
bottom-center
bottom-right
matrix+X
left
top
false
top-left
top-center
top-right
center-left
center-center
center-right
bottom-left
bottom-center
bottom-right
matrix+X
left
top
false
NEW - in JMPv3.0 b5.3 - reposition left position only - offset | top is surpassed
NEW - in JMPv3.0 b5.3 - reposition top position only - offset | left is surpassed
NEW - in JMPv3.0 b5.3 - offset | left and offset | top is surpassed
NEW - in JMPv3.0 b5.3 - reposition top position only - offset | left is surpassed
NEW - in JMPv3.0 b5.3 - offset | left and offset | top is surpassed
b5.3
b5.6
z-index | stack
set the z-index of the object manual
this can be specifically useful in force mode method 1 use it ie. to dock an object
the z-index | stack property can be used in 2 methods
set the z-index of the object manual
this can be specifically useful in force mode method 1 use it ie. to dock an object
the z-index | stack property can be used in 2 methods
b5.6
PLUGIN
NOTE: mode - left top false - can only be used with absolute position - (a window alert will prompt to abide)
NOTE: when left is not set (=top or false is used) the property horizontal scroll -1 is surpassed
•••• var: string
NOTE: when left is not set (=top or false is used) the property horizontal scroll -1 is surpassed
•••• var: string
identifier
1. identifier is used to write down notes of animations, actions and anything we find important to make note of
identifier is a visual reference
2. identifier also provides a quick overview of the function structure flow
STRUCTURE: function (e) { javascript before - init - callback - javascript after }
1. identifier is used to write down notes of animations, actions and anything we find important to make note of
identifier is a visual reference
2. identifier also provides a quick overview of the function structure flow
STRUCTURE: function (e) { javascript before - init - callback - javascript after }
offset | left
set a left offset position
the offset position is set in a pixel offset and a window offset
the window offset can also be set by using floating point calculation
ie.
0.5 = half the window/object position
0.25 = a quart of the window/object position
see more info on offset | left construct here
NOTE: not used in matrix mode
•••• var: string
set a left offset position
the offset position is set in a pixel offset and a window offset
the window offset can also be set by using floating point calculation
ie.
0.5 = half the window/object position
0.25 = a quart of the window/object position
see more info on offset | left construct here
NOTE: not used in matrix mode
•••• var: string
offset | top
set a top offset on the reposition mode
the offset position is set in a pixel offset and a window offset
the window offset can also be set by using floating point calculation
ie.
0.5 = half the window/object position
0.25 = a quart of the window/object position
see more info on offset | top construct here
NOTE: not used in matrix mode
•••• var: string
set a top offset on the reposition mode
the offset position is set in a pixel offset and a window offset
the window offset can also be set by using floating point calculation
ie.
0.5 = half the window/object position
0.25 = a quart of the window/object position
see more info on offset | top construct here
NOTE: not used in matrix mode
•••• var: string
fullscreen | width
enable fullscreen width for the object
fullscreen | wide allows much more then just full width, just like offset the width can be set in pixels width and window width
the window width can also be set by using floating point calculation
ie.
0.5 = half the window/object dimension
0.25 = a quart of the window/object dimension
of course fullscreen | width should only be used on objects that allow dimension reconstruct - ie. Image, Layer, iFrame etc
see more info on fullscreen | width construct here
NOTE: true = 0+win1
enable fullscreen width for the object
fullscreen | wide allows much more then just full width, just like offset the width can be set in pixels width and window width
the window width can also be set by using floating point calculation
ie.
0.5 = half the window/object dimension
0.25 = a quart of the window/object dimension
of course fullscreen | width should only be used on objects that allow dimension reconstruct - ie. Image, Layer, iFrame etc
see more info on fullscreen | width construct here
NOTE: true = 0+win1
fullscreen | height
enable fullscreen height for the object
fullscreen | height allows much more then just full height, just like offset the height can be set in pixels height and window height
the window height can also be set by using floating point calculation
ie.
0.5 = half the window/object dimension
0.25 = a quart of the window/object dimension
of course fullscreen | height should only be used on objects that allow dimension reconstruct - ie. Image, Layer, iFrame etc
see more info on fullscreen | height construct here
NOTE: true = 0+win1
NOTE: not used in matrix mode
•••• var: string
enable fullscreen height for the object
fullscreen | height allows much more then just full height, just like offset the height can be set in pixels height and window height
the window height can also be set by using floating point calculation
ie.
0.5 = half the window/object dimension
0.25 = a quart of the window/object dimension
of course fullscreen | height should only be used on objects that allow dimension reconstruct - ie. Image, Layer, iFrame etc
see more info on fullscreen | height construct here
NOTE: true = 0+win1
NOTE: not used in matrix mode
•••• var: string
NOTE: not used in matrix mode
•••• var: string
•••• var: string
position
set position mode ( absolute or fixed )
NOTE: not used in matrix mode
•••• var: string
set position mode ( absolute or fixed )
NOTE: not used in matrix mode
•••• var: string
NOTE: the page property - use of z-index - in Webbuilder must be enabled to use the z-index property effectively
NOTE: not used in matrix mode
•••• var: string
NOTE: not used in matrix mode
•••• var: string
MODE:
mode | target
modify the mode of module | reposition and reposition on window or object level (see more info here)
IMPORTANT: the selector used here should always be the (outer) parent holder, more info on parent & child selector see here
ie. an Image1 should always be targeted with #wb_Image1 (see reference)
NOTE: not used in matrix mode
•••• var: string | •••• +: non-string ( use of window converts this input to a property state )
mode | target
modify the mode of module | reposition and reposition on window or object level (see more info here)
IMPORTANT: the selector used here should always be the (outer) parent holder, more info on parent & child selector see here
ie. an Image1 should always be targeted with #wb_Image1 (see reference)
NOTE: not used in matrix mode
•••• var: string | •••• +: non-string ( use of window converts this input to a property state )
mode | force
modify the mode of module | reposition and reposition by method 1 or method 2 (see more info here)
method 1 = calculate and reposition
method 2 - in back = calculate, remove, reinsert and reposition behind the target
method 2 - in front = calculate, remove, reinsert and reposition in front of the target
IMPORTANT: method 2 - the page property - use of z-index - in Webbuilder must be enabled to use this property effectively
NOTE: not used in matrix mode
•••• var: string
modify the mode of module | reposition and reposition by method 1 or method 2 (see more info here)
method 1 = calculate and reposition
method 2 - in back = calculate, remove, reinsert and reposition behind the target
method 2 - in front = calculate, remove, reinsert and reposition in front of the target
IMPORTANT: method 2 - the page property - use of z-index - in Webbuilder must be enabled to use this property effectively
NOTE: not used in matrix mode
•••• var: string