Media WebUI

collapseHorizontal (duration, targetWidth, callback)

Collapses each element in the set of matched elements horizontally, for the specified duration and to the specified target width, and optionally with a callback.

Returns - WebUI object.
Argument
Type
Description
duration
Integer
An integer value in milliseconds.
targetWidth
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
callback
Function
A function to be called when the transition has completed.
Markup
<div class="width-lg">
  <div class="flex-col gap-vertical-sm">
    <div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
    <div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
  </div>
</div>
Script
webui.ready(function() {

  ui(".container").collapseHorizontal(3000, 20, function(el) {
    console.log("Transition completed for " + el.attr("id"));
  });

});

collapseVertical (duration, targetHeight, callback)

Collapses each element in the set of matched elements vertically, for the specified duration and to the specified target height, and optionally with a callback.

Returns - WebUI object.
Argument
Type
Description
duration
Integer
An integer value in milliseconds.
targetHeight
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
callback
Function
A function to be called when the transition has completed.
Markup
<div class="width-xl">
  <div class="flex-row gap-horizontal-sm">
    <div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
    <div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
  </div>
</div>
Script
webui.ready(function() {

  ui(".container").collapseVertical(3000, "1rem", function(el) {
    console.log("Transition completed for " + el.attr("id"));
  });

});

expandHorizontal (duration, targetWidth, callback)

Expands each element in the set of matched elements horizontally, for the specified duration and to the specified target width, and optionally with a callback.

Returns - WebUI object.
Argument
Type
Description
duration
Integer
An integer value in milliseconds.
targetWidth
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
callback
Function
A function to be called when the transition has completed.
Markup
<div class="width-lg">
  <div class="flex-col gap-vertical-sm">
    <div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
    <div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
  </div>
</div>
Script
webui.ready(function() {

  ui(".container").expandHorizontal(3000, "20rem", function(el) {
    console.log("Transition completed for " + el.attr("id"));
  });

});

expandVertical (duration, targetHeight, callback)

Expands each element in the set of matched elements vertically, for the specified duration and to the specified target height, and optionally with a callback.

Returns - WebUI object.
Argument
Type
Description
duration
Integer
An integer value in milliseconds.
targetHeight
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
callback
Function
A function to be called when the transition has completed.
Markup
<div class="width-xl">
  <div class="flex-row gap-horizontal-sm">
    <div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
    <div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
  </div>
</div>
Script
webui.ready(function() {

  ui(".container").expandVertical(3000, "20rem", function(el) {
    console.log("Transition completed for " + el.attr("id"));
  });

});

fadeIn (duration, initialOpacity, callback)

Eases in the opacity each element in the set of matched elements horizontally, for the specified duration and starting at the initial opacity, and optionally with a callback.

Returns - WebUI object.
Argument
Type
Description
duration
Integer
An integer value in milliseconds.
initialOpacity
Numeric
A value of between 0 and 1.
callback
Function
A function to be called when the transition has completed.
Markup
<div class="width-xl">
  <div class="flex-row gap-horizontal-sm">
    <div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
    <div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
  </div>
</div>
Script
webui.ready(function() {

  ui(".container").fadeIn(5000, 0.1, function(el) {
    console.log("Transition completed for " + el.attr("id"));
  });

});

fadeOut (duration, finalOpacity, callback)

Eases out the opacity each element in the set of matched elements horizontally, for the specified duration and ending at the final opacity, and optionally with a callback.

Returns - WebUI object.
Argument
Type
Description
duration
Integer
An integer value in milliseconds.
finalOpacity
Numeric
A value of between 0 and 1.
callback
Function
A function to be called when the transition has completed.
Markup
<div class="width-xl">
  <div class="flex-row gap-horizontal-sm">
    <div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
    <div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
  </div>
</div>
Script
webui.ready(function() {

  ui(".container").fadeOut(5000, 0.2, function(el) {
    console.log("Transition completed for " + el.attr("id"));
  });

});

slideHorizontal (direction, distance, duration, callback)

Moves each element in the set of matched elements left or right for the specified distance and duration, and optionally with a callback.

Returns - WebUI object.
Argument
Type
Description
direction
String
A value of "left" or "right".
distance
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
duration
Integer
An integer value in milliseconds.
callback
Function
A function to be called when the transition has completed.
Markup
<div class="width-lg">
  <div class="flex-row gap-vertical-sm">
    <div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
    <div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
  </div>
</div>
Script
webui.ready(function() {

  ui(".container").slideHorizontal("right", 100, 5000, function(el) {
    console.log("Transition completed for " + el.attr("id"));
  });

});

slideVertical (direction, distance, duration, callback)

Moves each element in the set of matched elements up or down for the specified distance and duration, and optionally with a callback.

Returns - WebUI object.
Argument
Type
Description
direction
String
A value of "up" or "down".
distance
String or Numeric
A valid CSS string value in pixels or rems, or a valid numeric value in pixels.
duration
Integer
An integer value in milliseconds.
callback
Function
A function to be called when the transition has completed.
Markup
<div class="width-xl">
  <div class="flex-row gap-horizontal-sm">
    <div class="container flex-auto height-sm border-sm border-dark" id="div1"></div>
    <div class="container flex-auto height-sm border-sm border-dark" id="div2"></div>
  </div>
</div>
Script
webui.ready(function() {

  ui(".container").slideVertical("down", 100, 5000, function(el) {
    console.log("Transition completed for " + el.attr("id"));
  });

});

animate (animateWhat, delta, propertyValue, duration, callback)

Animates each element in the set of matched elements according the specified property and duration, and optionally with a callback.

Returns - WebUI object.
Argument
Type
Description
animateWhat
String
The CSS property that should be animated.
delta
Integer
Either 0 or 1 specifying the direction of the animnation.
propertyValue
String or numeric
The CSS property value, e.g. "10rem".
duration
Integer
An integer value in milliseconds.
callback
Function
A function to be called when the transition has completed.
Markup
<div id="elementToAnimate" class="width-sm height-sm background-dark place-top-right"></div>
Script
webui.ready(function() {

  ui("#elementToAnimate").animate("top", 1, "200px", 3000, function(el) {
    console.log(el[0]);
    
    ui("#elementToAnimate").animate("right", 1, "15rem", 1000, function(el) {
      console.log(el[0]);
    });
  });

});