STYLING THE RESIZABLE
This module has 2 sub modules to style the resizable 01. CoreUI resizable helper css and 02. CoreUI resizable handle css
01. RESIZABLE HELPER CSS
The module CoreUI resizable helper css is used to create a custom styled helper
the resizable helper is an extra outline that is displayed while on resize
The helper by default is set to the class resdefault in the module CoreUI resizable
••• EXAMPLE
identifier : my resizable notes
selector : #wb_Image1
...
helper css : resdefault
...
By changing this helper css property we can create a custom css styled helper in the module CoreUI resizable helper css
Match the class set in both modules
02. RESIZABLE HANDLE CSS
The module CoreUI resizable handle css can be used to create custom styled handles for a resizable
Handles are the spots where the resizable is resized from, corner (ne,nw,se,sw) or cardinal direction (n,e,s,w)
IMPORTANT: a handle must be activated in the module CoreUI resizable to make the handles actual show
ie. set the property handle | enable to all
••• EXAMPLE
identifier : my resizable notes
selector : #wb_Image1
...
handle | enable : all <--- IMPORTANT!
...
Match the selector set in both modules,
and style the handles in the module CoreUI resizable handle css
This module has 2 sub modules to style the resizable 01. CoreUI resizable helper css and 02. CoreUI resizable handle css
01. RESIZABLE HELPER CSS
The module CoreUI resizable helper css is used to create a custom styled helper
the resizable helper is an extra outline that is displayed while on resize
The helper by default is set to the class resdefault in the module CoreUI resizable
••• EXAMPLE
identifier : my resizable notes
selector : #wb_Image1
...
helper css : resdefault
...
By changing this helper css property we can create a custom css styled helper in the module CoreUI resizable helper css
Match the class set in both modules
02. RESIZABLE HANDLE CSS
The module CoreUI resizable handle css can be used to create custom styled handles for a resizable
Handles are the spots where the resizable is resized from, corner (ne,nw,se,sw) or cardinal direction (n,e,s,w)
IMPORTANT: a handle must be activated in the module CoreUI resizable to make the handles actual show
ie. set the property handle | enable to all
••• EXAMPLE
identifier : my resizable notes
selector : #wb_Image1
...
handle | enable : all <--- IMPORTANT!
...
Match the selector set in both modules,
and style the handles in the module CoreUI resizable handle css
EVENTS
Events can be set for a resizable on Start, Stop and Resize
With events we can create additional interaction for the resizable by creating new functions
Events can be set for a resizable on Start, Stop and Resize
With events we can create additional interaction for the resizable by creating new functions
__________________________________________________________________________
more info on module | CoreUI resizable see here Properties
more info on module | CoreUI resizable see here Properties Helper Css
more info on module | CoreUI resizable see here Properties Handle Css
more info on module | CoreUI resizable see here Properties
more info on module | CoreUI resizable see here Properties Helper Css
more info on module | CoreUI resizable see here Properties Handle Css
customized handles
MODULE COREUI RESIZABLE - OVERVIEW
jQuery UI Resizable
TOOL
EXPLAIN ?
module | CoreUI resizable properties can be used to make objects resizable by selector, the effect is a Core-jQuery-UI effect
Many object in Webbuilder can be made resizable, the correct selector however needs to be set to achieve the desired result
module | CoreUI resizable properties can be used to make objects resizable by selector, the effect is a Core-jQuery-UI effect
Many object in Webbuilder can be made resizable, the correct selector however needs to be set to achieve the desired result
••• EXAMPLE 1
A resizable Layer1
identifier : my resizable notes
selector : #Layer1
also resize | selector :
...
run on load : true
run on call : Call_Res_1
...
This will create a resizable Layer1, here we used the id Layer1
••• EXAMPLE 2
A resizable Image1
identifier : my resizable notes
selector : #wb_Image1
also resize | selector : #Image1
...
run on load : true
run on call : Call_Res_1
...
This will create a resizable Image1
Here the selector resizes the div holder that holds our Image1, we are resizing it's parent div
At the same time we set the also resize | selector property to resize the Image1 itself
More information on to When do we animate what? see here
A resizable Layer1
identifier : my resizable notes
selector : #Layer1
also resize | selector :
...
run on load : true
run on call : Call_Res_1
...
This will create a resizable Layer1, here we used the id Layer1
••• EXAMPLE 2
A resizable Image1
identifier : my resizable notes
selector : #wb_Image1
also resize | selector : #Image1
...
run on load : true
run on call : Call_Res_1
...
This will create a resizable Image1
Here the selector resizes the div holder that holds our Image1, we are resizing it's parent div
At the same time we set the also resize | selector property to resize the Image1 itself
More information on to When do we animate what? see here
