CODE MODIFICATION FORCE ?
As this section started with module | reposition operates in 5 modes, until now we covered 3 modes ...
method 1: ----------+
01. mode window level |--- mode | target
02. mode object level (+in Layer) ----------+
method 3:
05. mode matrix <------------------------| specialized mode
The property mode | target switches between window and object level
The property mode | force changes module | reposition again into a whole different mode of operation
More information on mode | force can be found here
As this section started with module | reposition operates in 5 modes, until now we covered 3 modes ...
method 1: ----------+
01. mode window level |--- mode | target
02. mode object level (+in Layer) ----------+
method 3:
05. mode matrix <------------------------| specialized mode
The property mode | target switches between window and object level
The property mode | force changes module | reposition again into a whole different mode of operation
More information on mode | force can be found here
identifier : my reposition notes
selector : #wb_Image1
reposition mode : bottom-right
position : absolute
offset | left : 0+win0
offset | top : 0+win0
fullscreen | width : false
fullscreen | height : false
fullscreen | target child : auto
...
mode | target : #wb_Shape1 <--- target Shape1
mode | force : method 1
...
run on call : Call_Repos_1
...
But what's the use of repositioning on object level ?
jor_aniMateMASTERPACKv3.0 is just a tool, how it can be used is of course to users discretion
There are numerous possibilities, some examples ...
selector : #wb_Image1
reposition mode : bottom-right
position : absolute
offset | left : 0+win0
offset | top : 0+win0
fullscreen | width : false
fullscreen | height : false
fullscreen | target child : auto
...
mode | target : #wb_Shape1 <--- target Shape1
mode | force : method 1
...
run on call : Call_Repos_1
...
But what's the use of repositioning on object level ?
jor_aniMateMASTERPACKv3.0 is just a tool, how it can be used is of course to users discretion
There are numerous possibilities, some examples ...
window viewport
repositioned Image
inside a repositioned Layer (matrix)
outside the window viewport
maintaining a relative distance
even on window resize
inside a repositioned Layer (matrix)
outside the window viewport
maintaining a relative distance
even on window resize
••• EXAMPLE 3: Webbuilder Text object as a fixed footer in a matrix layout
Say we want to create a footer Text in the bottom-right corner of that same Layer6 of our previous example
In this example we would take a Webbuilder Text1 object place it inside our Layer6
Move it to back (probably) or to front, as our design dictates
And then reposition it like this ...
identifier : my reposition notes
selector : #wb_Text1
reposition mode : bottom-right
position : absolute
offset | left : 0+win0
offset | top : 0+win0
fullscreen | width : false
fullscreen | height : false
fullscreen | target child : auto
...
mode | target : #Layer6 <--- target Layer6
mode | force : method 1
...
run on call : Call_Repos_1
...
The content inside Layer6 will remain centered as it is aligned to center
But the Text object will stay fixed into a bottom-right position inside the repositioned Layer6
The result would look like this ...
Say we want to create a footer Text in the bottom-right corner of that same Layer6 of our previous example
In this example we would take a Webbuilder Text1 object place it inside our Layer6
Move it to back (probably) or to front, as our design dictates
And then reposition it like this ...
identifier : my reposition notes
selector : #wb_Text1
reposition mode : bottom-right
position : absolute
offset | left : 0+win0
offset | top : 0+win0
fullscreen | width : false
fullscreen | height : false
fullscreen | target child : auto
...
mode | target : #Layer6 <--- target Layer6
mode | force : method 1
...
run on call : Call_Repos_1
...
The content inside Layer6 will remain centered as it is aligned to center
But the Text object will stay fixed into a bottom-right position inside the repositioned Layer6
The result would look like this ...
repositioned Text
inside a repositioned Layer (matrix)
outside the window viewport
maintaining a relative distance
even on window resize
inside a repositioned Layer (matrix)
outside the window viewport
maintaining a relative distance
even on window resize
MY TEXT
CENTERED
CONTENT
CONTENT
window viewport
Here an Image is reposition by another object
Repositioning occurs on object level
mode | target = an object
mode | force = method 1
Repositioning occurs on object level
mode | target = an object
mode | force = method 1
••• EXAMPLE 2: Webbuilder Image object as a background image in a matrix layout
Say we use module | reposition to create a matrix with 6 Layers, in a row/column layout
The Layers are repositioned outside of the window viewport, and are stretched full width (and height) following the window viewport
And the Layers alignment are set to center cause we want the content to stay fixed in the center of the screen
But at the same time we want a background image for our Layer, or for each Layer, that stretches full width and height of the Layer(s)
With module | reposition we can do that by using the mode mode | target
We can target a specific object and reposition another object relative to that object
In this example we take a Webbuilder Image1 object, place it inside our Layer6
Move it to back so it becomes the background of the Layer
And then reposition it like this ...
identifier : my reposition notes
selector : #wb_Image1
reposition mode : top-left
position : absolute
offset | left : 0+win0
offset | top : 0+win0
fullscreen | width : true <--- full width
fullscreen | height : true <--- full height
fullscreen | target child : auto
...
mode | target : #Layer6 <--- target Layer6
mode | force : method 1
...
run on call : Call_Repos_1
...
So here we have taken a Webbuilder Image1 object and repositioned it to full width and height relative to a Layer6
And this Layer6 in itself already is repositioned inside a matrix layout
The result would look like this ...
Say we use module | reposition to create a matrix with 6 Layers, in a row/column layout
The Layers are repositioned outside of the window viewport, and are stretched full width (and height) following the window viewport
And the Layers alignment are set to center cause we want the content to stay fixed in the center of the screen
But at the same time we want a background image for our Layer, or for each Layer, that stretches full width and height of the Layer(s)
With module | reposition we can do that by using the mode mode | target
We can target a specific object and reposition another object relative to that object
In this example we take a Webbuilder Image1 object, place it inside our Layer6
Move it to back so it becomes the background of the Layer
And then reposition it like this ...
identifier : my reposition notes
selector : #wb_Image1
reposition mode : top-left
position : absolute
offset | left : 0+win0
offset | top : 0+win0
fullscreen | width : true <--- full width
fullscreen | height : true <--- full height
fullscreen | target child : auto
...
mode | target : #Layer6 <--- target Layer6
mode | force : method 1
...
run on call : Call_Repos_1
...
So here we have taken a Webbuilder Image1 object and repositioned it to full width and height relative to a Layer6
And this Layer6 in itself already is repositioned inside a matrix layout
The result would look like this ...
__________________________________________________________________________
more info on module | reposition see here Properties
more info on module | reposition see here Overview
more info on module | reposition see here Overview Force
more info on module | reposition see here Properties
more info on module | reposition see here Overview
more info on module | reposition see here Overview Force
MODULE REPOSITION MODE TARGET - OVERVIEW
PLUGIN
EXPLAIN ?
Module | reposition is a collection of multiple modules combined in one, it operates in 5 modes
Module | reposition is a collection of multiple modules combined in one, it operates in 5 modes
method 1:
01. mode window level
02. mode object level (+in Layer)
method 2:
03. mode window level
04. mode object level (+in/out Layer, complex structures)
method 3:
05. mode matrix
This section will focus on Method 1 - 02. mode object level
With the property mode | target the function of module | reposition can completely be changed
Instead of repositioning on window level , repositioning can occur on object level
Objects can be relative repositioned by other objects and take there dimension
Module | reposition automatically adjust for repositioning inside a Webbuilder Layer
Module | reposition automatically adjust for border, page centering, fixed, -absolute, Layer alignment ; object and target etc
01. mode window level
02. mode object level (+in Layer)
method 2:
03. mode window level
04. mode object level (+in/out Layer, complex structures)
method 3:
05. mode matrix
This section will focus on Method 1 - 02. mode object level
With the property mode | target the function of module | reposition can completely be changed
Instead of repositioning on window level , repositioning can occur on object level
Objects can be relative repositioned by other objects and take there dimension
Module | reposition automatically adjust for repositioning inside a Webbuilder Layer
Module | reposition automatically adjust for border, page centering, fixed, -absolute, Layer alignment ; object and target etc
••• EXAMPLE 1: Reposition an Image bottom-right of a Shape
We can do of course much more with this function, reposition anything anywhere inside and outside the window viewport
It basically takes an absolute positioned object, reposition it in a relative manner that then acts like a fixed positioned object
One more example ...
It basically takes an absolute positioned object, reposition it in a relative manner that then acts like a fixed positioned object
One more example ...
There are of course a multitude of other uses and scenarios for module | reposition
ORDER OF ENTRY !
It is important to set the correct order of reposition entry
ie. the above example, If an Image is stretched to fit a Layer, that in itself is stretched inside a matrix
Then of course the matrix first has to be build, before we stretch the Image to fit the Layer
1st reposition entry - build matrix
2nd reposition entry - stretch Image to fit the Layer
3th reposition entry - etc
It is important to set the correct order of reposition entry
ie. the above example, If an Image is stretched to fit a Layer, that in itself is stretched inside a matrix
Then of course the matrix first has to be build, before we stretch the Image to fit the Layer
1st reposition entry - build matrix
2nd reposition entry - stretch Image to fit the Layer
3th reposition entry - etc
Reposition On
Window or Object Level
+ Matrix Mode
Window or Object Level
+ Matrix Mode
