Bunoon: TESS | Manual | Element

This area contains a set of functions that are used for handling and manipulating the DOM elements of the document. Every element that is looked up is tracked internally, to allow faster lookups in the future. You can easily create new elements, change their style, size, position. You can easily get the attributes of one element and assign them to another, while offering support to get the CSS properties of the element.

As a bonus, some extra script have been made available in the Make() section. You can make a panel, a sliding side bar, an advanced image sliding animation (like a GIF, but not limited to 356 colors).

Creates a new element for the document (clones a copy of one already created for speed if available).

The main arguments for this function are as follows:

  • sType [String] - The type of element we want to create.
  • oAttributes [Object] - The list of attributes that should be assigned to the new element (or string if text has been specified).
  • oParentIdentifier [Object] - The ID of the element or the element itself that the new item should be added to.

The return value for this function is as follows:

  • [Object] - A new element based on the type (or null if any error has occurred).

Below is an example of how to use this function:

var oElement = $T.Element.New('div', {id: 'divTest3', className: 'SomeClass3'});

Gets an element from the document by ID.

The main arguments for this function are as follows:

  • sID [String] - The ID of the element.

The return value for this function is as follows:

  • [Object] - An object for the element (or null if any error has occurred).

Below is an example of how to use this function:

var oElement = $T.Element.GetByID('divTest');

Gets elements from the document (or other element) by type.

The main arguments for this function are as follows:

  • sType [String] - The type of the elements we are looking up (defaults to * for all).
  • oParentIdentifier [Object] - The ID of the element or the element itself that may contain the types (document by default).

The return value for this function is as follows:

  • [Object] - An array of elements (or null if any error has occurred).

Below is an example of how to use this function:

var aElements = $T.Element.GetByType('head');

Gets elements from the document (or other element) by class name.

The main arguments for this function are as follows:

  • sClassName [String] - The class name of the elements we are looking up.
  • sType [String] - The type of the elements we are looking up (defaults to * for all).
  • oParentIdentifier [Object] - The ID of the element or the element itself that may contain the types (document by default).

The return value for this function is as follows:

  • [Object] - An array of elements (or null if any error has occurred).

Below is an example of how to use this function:

var aElements = $T.Element.GetByClassName('CSS_Class');

Gets elements from the document (or other element) by type and searches through them for element ID's start/ending with a specific pattern.

The main arguments for this function are as follows:

  • sSearch [String] - The string that we should search for in each element ID.
  • sType [String] - The type of the elements we are looking up.
  • oParentIdentifier [Object] - The ID of the element or the element itself that may contain the types (document by default).
  • bStartsWith [Boolean] - States if we should search the start of each element ID (false for end, defaults to true).

The return value for this function is as follows:

  • [Object] - An array of elements (or null if any error has occurred).

Below is an example of how to use this function:

var aElements = $T.Element.GetByPattern('divS', 'div');

Takes raw HTML and converts it into elements that can be handled separately (can be returned as a typed object or array).

The main arguments for this function are as follows:

  • sHTML [String] - The HTML that is to be converted into elements.
  • bSplitIntoTypedObject [Boolean] - States if the elements should be returned in an object (by tag name) or array (in actual order). Set to true by default.

The return value for this function is as follows:

  • [Object] - An array or typed object containing the HTML objects (or null if any error has occurred).

Below is an example of how to use this function:

var oDetails = $T.Element.GetFromHTML('<div></div><p></p><ul></ul>');


var oDivs = oDetails.div;

var oP = oDetails.p;

var oUL = oDetails.ul;

Takes a list of elements by ID (or just the elements themselves) and tries to remove them from their parent node.

The main arguments for this function are as follows:

  • [arguments] - An arguments object array containing the list of elements to remove.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bRemoved = $T.Element.Remove('divTest');

Takes a list of elements by ID (or just the elements themselves) and tries to set their display state.

The main arguments for this function are as follows:

  • bShow [Boolean] - States if we should show the elements.
  • [arguments] - An arguments object array containing the list of elements to update.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bCompleted = $T.Element.Show(true, 'divTest1', 'divTest2', 'divTest3');

Takes a list of elements by ID (or just the elements themselves) and tries to set their visible state.

The main arguments for this function are as follows:

  • bShow [Boolean] - States if we should show the elements.
  • [arguments] - An arguments object array containing the list of elements to update.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bCompleted = $T.Element.Visible(true, 'divTest1', 'divTest2', 'divTest3');

Looks up an element by ID (or just the element itself) and toggles it's display state.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bCompleted = $T.Element.ToggleShow('divTest');

Looks up an element by ID (or just the element itself) and toggles it's visible state.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bCompleted = $T.Element.ToggleVisible('divTest');

Looks up an element by ID (or just the element itself) and tries to determine if it's shown.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false.

Below is an example of how to use this function:

var bShown = $T.Element.IsShown('divTest');

Looks up an element by ID (or just the element itself) and tries to determine if it's visible.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false.

Below is an example of how to use this function:

var bVisible = $T.Element.IsVisible('divTest');

Looks up an element by ID (or just the element itself) and tries to assign a new ID to it.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • sNewID [String] - The new ID that should be assigned to the element.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bSet = $T.Element.SetID('divTest', 'NewID');

Looks up an element by ID (or just the element itself) and tries to get every attribute that has been set (or all if specified).

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • bGetAll [Boolean] - States if we should get all the attributes (even if nothing or null). Set to false as default.
  • bGetID [Boolean] - States if we should get the ID attribute. Set to false as default.

The return value for this function is as follows:

  • [Object] - An object containing the attributes (or null if any error has occurred).

Below is an example of how to use this function:

var oDetails = $T.Element.GetAttributes('divTest', false, false);

Looks up an element by ID (or just the element itself) (or takes the element as passed) and tries to assign the list of attributes and values passed.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • oAttributes [Object] - The list of attributes that should be assigned to the element.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var oAttributes = $T.Element.GetAttributes("divTest1", false, false);


var bCompleted = $T.Element.SetAttributes('divTest2', oAttributes);

Looks up an element by ID (or just the element itself) and tries to add a scroll bar in the X direction if required (by default).

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • bRequired [Boolean] - States if the scroll bar should only be added if required (defaults to true).

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bCompleted = $T.Element.ShowXScrollBar('divTest', true);

Looks up an element by ID (or just the element itself) and tries to add a scroll bar in the Y direction if required (by default).

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • bRequired [Boolean] - States if the scroll bar should only be added if required (defaults to true).

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bCompleted = $T.Element.ShowYScrollBar('divTest', true);

Looks up an element by ID (or just the element itself) and tries to return the scroll position for the X position.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Object] - An object or number containing the scroll position (or null if any error has occurred).

Below is an example of how to use this function:

var nPosition = $T.Element.GetXScrollPos('divTest');

Looks up an element by ID (or just the element itself) and tries to return the scroll position for the Y position.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Object] - An object or number containing the scroll position (or null if any error has occurred).

Below is an example of how to use this function:

var nPosition = $T.Element.GetYScrollPos('divTest');

Looks up an element by ID (or just the element itself) and tries to assign a new width to it.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • oWidth [Object] - The width that should be assigned to the element (can be strings, such as "auto" or "inherit").
  • bBypassSizeChecks [Boolean] - States if checking the width against the original width should be bypassed.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bCompleted = $T.Element.SetWidth('divTest', "30px");

Looks up an element by ID (or just the element itself) and tries to assign a new height to it.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • oHeight [Object] - The height that should be assigned to the element (can be strings, such as "auto" or "inherit").
  • bBypassSizeChecks [Boolean] - States if checking the height against the original height should be bypassed.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bCompleted = $T.Element.SetHeight('divTest', "30px");

Looks up an element by ID (or just the element itself) and tries to return the current width.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • bClient [Boolean] - States if we should be getting the clientWidth instead of offsetWidth (defaults to false for offsetWidth).

The return value for this function is as follows:

  • [Object] - An object or number containing the width (or null if any error has occurred).

Below is an example of how to use this function:

var nValue = $T.Element.GetWidth('divTest', false);

Looks up an element by ID (or just the element itself) and tries to return the current height.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • bClient [Boolean] - States if we should be getting the clientHeight instead of offsetHeight (defaults to false for offsetHeight).

The return value for this function is as follows:

  • [Object] - An object or number containing the width (or null if any error has occurred).

Below is an example of how to use this function:

var nValue = $T.Element.GetHeight('divTest', false);

Looks up an element by ID (or just the element itself) and tries to return it's total left position.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • bTotal [Boolean] - States if we should be getting the total left (set to false as default).

The return value for this function is as follows:

  • [Object] - A number containing the position (or null if any error has occurred).

Below is an example of how to use this function:

var nValue = $T.Element.GetLeft('divTest', false);

Looks up an element by ID (or just the element itself) and tries to return it's total top position.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • bTotal [Boolean] - States if we should be getting the total top (set to false as default).

The return value for this function is as follows:

  • [Object] - A number containing the position (or null if any error has occurred).

Below is an example of how to use this function:

var nValue = $T.Element.GetTop('divTest', false);

Looks up an element by ID (or just the element itself) and tries to return the class assigned to it.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Object] - A string containing the class name (or null if any error has occurred).

Below is an example of how to use this function:

var sClassName = $T.Element.GetClass('divTest');

Looks up an element by ID (or just the element itself) and tries to copy it's class to a list of other elements (arguments).

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • [arguments] - An arguments object array containing the list of elements to update.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bUpdated = $T.Element.CopyClass('divTest', 'divTest1', 'divTest2', 'divTest3');

Looks up the specified elements by ID (or just the elements themselves) and tries to add a class to them (maintaining any others already assigned).

The main arguments for this function are as follows:

  • sClassName [String] - The class name that should be added to the element.
  • bClearExisting [Boolean] - States if any existing classes should be removed.
  • [arguments] - An arguments object array containing the list of elements to update.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bUpdated = $T.Element.AddClass('CSS_Class', false, 'divTest1', 'divTest2', 'divTest3');

Looks up the specified elements by ID (or just the element themselves) and tries to remove a class from them (maintaining any others already assigned).

The main arguments for this function are as follows:

  • sClassName [String] - The class name that should be removed from the element.
  • [arguments] - An arguments object array containing the list of elements to update.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bUpdated = $T.Element.RemoveClass('CSS_Class', 'divTest1', 'divTest2', 'divTest3');

Looks up an element by ID (or just the element itself) and checks if a class is assigned to it.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • sClassName [String] - The class name that should be looked up.

The return value for this function is as follows:

  • [Boolean] - Returns a boolean of true/false.

Below is an example of how to use this function:

var bResult = $T.Element.HasClass('divTest1', 'CSS_Class');

Looks up an element by ID (or just the element itself) and tries to clear it's innerHTML.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bResult = $T.Element.Clear('divTest');

Looks up an element by ID (or just the element itself) and tries to get all CSS style properties it's using.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • bStripURLs [Boolean] - States if image URL statements should be stripped from the values (defaults to true).

The return value for this function is as follows:

  • [Object] - An object containing the style properties (or null if any error has occurred).

Below is an example of how to use this function:

var oProperties = $T.Element.GetCSSProperties('divTest', true);

Looks up an element by ID (or just the element itself) and tries to get it's raw HTML.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Object] - A string containing the HTML of the element (or null if any error has occurred).

Below is an example of how to use this function:

var sHTML = $T.Element.GetHTML('divTest');

Looks up an element by ID (or just the element itself) and tries centre it within the document window.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bCompleted = $T.Element.Centre('divTest');

Looks up an element by ID (or just the element itself) and tries set it's opacity.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • nOpacity [Number] - The opacity that should be applied to the element.
  • bBypassValidation [Boolean] - States if checking the element should be bypassed (set to false as default).

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bSet = $T.Element.SetOpacity('divTest', 50, false);

Looks up an element by ID (or just the element itself) and tries to bring it to the front of any other elements (if in absolute positioning).

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bDone = $T.Element.BringToFront('divTest');

Looks up an element by ID (or just the element itself) and tries to send it to the back of any other elements (if in absolute positioning).

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bDone = $T.Element.SendToBack('divTest');

Looks up an element by ID (or just the element itself) and gets it's tag name.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Object] - The element tag name in lowercase (or null if any error has occurred).

Below is an example of how to use this function:

var oElement = $T.Element.GetTagName('divTest');

Takes a list of elements by ID (or just the elements themselves) and tries to merge them with a specified element.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • [arguments] - An arguments object array containing the list of elements to merge.

The return value for this function is as follows:

  • [Boolean] - A boolean of true/false to state of we have completed the operation.

Below is an example of how to use this function:

var bMerged = $T.Element.Merge('divTest', 'divTest1', 'divTest2', 'divTest3');

Looks up an element by ID (or just the element itself) and tries to get the listed elements inside it (only 1 level in).

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return value for this function is as follows:

  • [Object] - An array containing the listed elements (or null if any error has occurred).

Below is an example of how to use this function:

var oElements = $T.Element.GetListed('divTest');

Looks up the correct container object for the window and gets the actual height (based on the browser type).

The return value for this function is as follows:

  • [Object] - A number containing the height of the window (or null if any error has occurred).

Below is an example of how to use this function:

var nSize = $T.Element.GetWindowHeight();

Looks up the correct container object for the window and gets the actual width (based on the browser type).

The return value for this function is as follows:

  • [Object] - A number containing the width of the window (or null if any error has occurred).

Below is an example of how to use this function:

var nSize = $T.Element.GetWindowWidth();

Looks up an element by ID (or just the element itself) and turns it into a layer.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return control function list is as follows (or null if there has been an error):

  • [Show] - Shows the layer.
  • [Hide] - Hides the layer.

Below is an example of how to use this function:

var oLayer = new $T.Element.Make.Layer('divTest1');


oLayer.Show();

Looks up an element by ID (or just the element itself) and tries to turn it into a movable object.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.

The return control function list is as follows (or null if there has been an error). All the listed functions return a boolean of true/false:

  • [IsMoving] - States if the element is being moved.

Below is an example of how to use this function:

var oMovable = new $T.Element.Make.Movable('divTest1');


var bIsMoving = oMovable.IsMoving();

Looks up an element by ID (or just the element itself) and tries to turn it into a sliding left side navigation panel.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • oProperties [Object] - The properties that should be applied to the new object.
  • oProperties - Options:
    • "Speed" [Number] - States the speed that the bar should open/close at. Defaults to 10.
    • "Increment" [Number] - States the amount the bar should open/close at (adjusted if not valid against the width). Defaults to 1.
    • "MinimumDisplay" [Number] - States how much of the bar should remain on display when closed. Defaults to 0.
    • "OpenScope" [Number] - States how far into the left of the browser the mouse should be before the bar is opened/closed. Defaults to 30.

The return control function list is as follows (or null if there has been an error):

  • [SetSpeed] - Sets the speed that the bar should open/close at.
  • [IsOpened] - States if the bar is opened or not.

Below is an example of how to use this function:

var oSideBar = new $T.Element.Make.SideBar('divTest1', {OpenScope: 50});


var bIsOpened = oMovable.IsOpened();

Looks up an element by ID (or just the element itself) and adjusts the background-position to show different parts of an image (rotating).

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • oProperties [Object] - The properties that should be applied to the new object.
  • oProperties - Options:
    • "MaximumX" [Number] - States how many images across the X axis there are available (must be set).
    • "MaximumY" [Number] - States how many images across the Y axis there are available (must be set).
    • "Speed" [Number] - States how fast the images should be changed. Defaults to 1000.

The return control function list is as follows (or null if there has been an error):

  • [Start] - Starts the image slide timer.
  • [Stop] - Stops the image slide timer.
  • [SetSpeed] - Sets how fast the images should be changed.
  • [IsRunning] - States if the image slide timer is running.

Below is an example of how to use this function:

var oImageSlide = new $T.Element.Make.ImageSlide('divTest1', {MaximumX: 5, MaximumY: 1});


var bIsRunning = oImageSlide.IsRunning();

Looks up a list of elements by ID (or just the elements themselves) and returns an object allowing you switch between the visible states.

The main arguments for this function are as follows:

  • sLastUsedID [String] - The ID of the element that should remain shown.
  • [arguments] - An arguments object array containing the list of elements.

The return control function list is as follows (or null if there has been an error):

  • [Show] - Shows a specific element by the ID passed.
  • [GetActiveID] - States the ID of the element that is visible.

Below is an example of how to use this function:

var oSwitcher = new $T.Element.Make.Switcher('divS1', 'divS1', 'divS2', 'divS3', 'divS4', 'divS5');


oSwitcher.Show('divS3');

Looks up an element by ID (or just the element itself) and allows it to grow/shrink a specific size on Mousemove and Mouseout.

The main arguments for this function are as follows:

  • oIdentifier [Object] - The ID of the element or the element itself.
  • oProperties [Object] - The properties that should be applied to the new object.
  • oProperties - Options:
    • "Increment" [Number] - States how much the element should grow/shrink by.
    • "Maximum" [Number] - States the maximum size the element should grow to.
    • "Speed" [Number] - States the speed that the element should grow/shrink at.

The return control function list is as follows (or null if there has been an error):

  • [SetSpeed] - Sets the speed that the element should grow/shrink at.
  • [IsRunning] - States if the element is growing/shrinking.
  • [IsGrown] - States if the element has grown.

Below is an example of how to use this function:

var oSlideSize = new $T.Element.Make.SlideSize('divTest');


var bIsRunning = oSlideSize.IsRunning();

Looks up an element by ID (or just the element itself) and turns it's contents into a panel (allow the title to be clicked to show/hide the contents that follow).

  • oIdentifier [Object] - The ID of the element or the element itself.
  • oProperties [Object] - The properties that should be applied to the new object.
  • oProperties - Options:
    • "Opened" [Boolean] - States if the panel should be opened or not. Defaults to false.
    • "Slide" [Boolean] - States if the panel should slide opened/closed. Defaults to false.
    • "Increment" [Number] - States the increment the panel should slide opened/closed by (used when 'Slide' is used). Defaults to 1.
    • "Speed" [Number] - States the speed that the panel should slide by. Defaults to 1.
    • "Pointer" [Object] - States a pointer function that should be called when the panel is opened/closed. Defaults to null.

The return control function list is as follows (or null if there has been an error):

  • [Open] - Opens the panel.
  • [Close] - Closes the panel.
  • [IsOpened] - States if the panel is opened.

Below is an example of how to use this function:

var oPanel = new $T.Element.Make.Panel('divTest', {Opened: true});


var bIsOpened = oPanel.IsOpened();