Core Docs | Additional Modules Docs
@Description: Adds a tooltip capability to any DOM element
@File: Element/prototype/addToolTip.js
@Author: Paul Visco
@Version: 1.02 11/16/07 12/15/08
@Example://simple
sbElement.addToolTip({
tip : 'Here is a tooltip'
});
//more complex
sbElement.addToolTip({
tip : '<a href="#" title="close">close</a><br />Use this form to lookup users by name. It requires you input at least three characters.<br />You can even use regular expressions<ol><li><i>pa.l</i> would find paul and paulnotpaul<li><li><i>pa.l$</i> would find paul only<li><li><i>p..</i> would find everyone whose name started with p<li></ol>',
additionalClassName : 'jump_menu',
persistent : 1,
yOffset : -160,
xOffset : -210
});
@Description: Clears any position data set with javascript
@File: Element/prototype/clearPosition.js
@Example:myElement.style.position = 'absolute';
myElement.style.left = '10px';
myElement.clearPosition();
//both properties would be ''
@Description: Clears any styles set for the DOM element by javascript
@File: Element/prototype/clearStyles.js
@Example:myElement.style.height = '10px';
myElement.clearStyles();
//height would be '';
@Description: Used to copy style properties from one element to another
@File: Element/prototype/copyStyles.js
@Example:myElement.copyStyles(myOtherElement);
@Description: used to get the CSS/styles of an object, You can pass it either css style dash syntax of javascript camelBack e.g. background-color or backgroundColor.
@File: Element/prototype/css.js
@Param: String prop The property to set or get.
@Param: String val The value to set the property to. If not set the function returns the value currently set
@Example://would set the background color
myElement.css('background-color', 'red');
myElement.css('background-color');
//would return red
@Description: Easily handles a multitude of css transitions for $ elements and sb.elements. This is what most people will probably use for all effects they create.
@File: Element/prototype/cssTransition.js
@Type: constructor
@Example:sb.include('colors.getTweenColor');
var body = $('body');
var transitions = body.cssTransition([
{
prop : 'backgroundColor',
begin : 'FF0000',
end : '00FF00',
onEnd : function(){
//alert('done');
},
onTween : function(effect){
//do something on each tween, this is optional
}
},
{
prop : 'fontSize',
begin : 10,
change : 40,
duration : 48 //this is optional it defualts to the global duration (constructor's second argument or 24 if not neither is defined)
}
], 120);
transitions.start();
@Description: This effect is used to fade a dom element's opacity
@File: Element/prototype/fade.js
@Author: Paul Visco
@Version: 1.1
@Param: integer percent The opacity to end at between 0 and 100%
@Param: integer duration The time milliseconds to fade over
Example:
//fades to 20% with a duration of 24 milliseconds and alert 'done' when done
var fade = $('#myDiv').fade({percent : 20, duration : 24, onEnd : function(){
alert('done');
}});
//fades back to 80% after two seconds
window.setTimeout(function(){
fade({percent : 20, duration : 24});
}, 2000);
@Description: Flashes the background color with another color for a timeout to show activity e.g. save, delete
@File: Element/prototype/flashBg.js
@Example:myElement.flashBg('red');
@Description: calculates and assigns width and height properties to an to an element
@File: Element/prototype/getDimensions.js
@Example:myElement.getDimensions();
alert(myElement.width);
@Description: This effect is used to briefly highlight an element, returning to the original background color afterwards.
@File: Element/prototype/highlight.js
@Author: James Lindley
@Version: 1.0
@Param: string startColor The highlight color. Defaults to light yellow.
@Param: string endColor The color the background will be at the end of the effect (defaults to existing background color)
@Param: integer duration The time milliseconds to highlight the element. Defaults to 1/3 of a second.
@Param: function onEnd Callback for after the highlight is over.
Example:
// Highlight an element via a red background, and fade back to normal over 0.5 seconds.
var highlight = $('#new_element').highlight({startColor : '#FF9999', duration : 500, onEnd : function(){
alert('done');
}});
@Description: Used to infuse an sb.element instance
@File: Element/prototype/infuse.js
@Example://adds a property called name which is set to tim, and add a property called type with a value of text
myElement.infuse({name : 'tim', type : 'text'});
@Description: Makes a DOM element draggable. All super elements, those normal elements passed through $ or elements created with sb.element, have the method makeDraggable when surebert.drag.js is included in the source.
@File: Element/prototype/makeDraggable.js
@Author: Paul Visco
@Version: 1.21 04-13-06 07-29-09
@Example:var draggableThing = $('#dragme');
draggableThing.makeDraggable();
@Description: Makes a DOM element no longer draggable. All super elements, those normal elements passed through $ or elements created with sb.element, have the method makeUnDraggable when surebert.drag.js is included in the source.
@File: Element/prototype/makeDraggable.js
@Author: Paul Visco
@Version: 1.21 04-13-06 07-29-09
@Example:var draggableThing = $('#dragme');
draggableThing.makeUnDraggable();
@Description: The method allows you to mark text string within a DOM element. Great for use with search utility. It automically puts the foudn text in a <u></u> tag and adds either the className you specify or sb_hiliteText by default
@File: Element/prototype/markText.js
@Author: Paul Visco
@Version: 2.0 11/17/07
@Description: Make it so that an element quiver and shakes as though it is scared.
@File: Element/prototype/quiver.js
@Author: Paul Visco
@Version: 1.0 11/16/07
@Example:sbElement.quiver();
sbElement.quiver().stop();
@Description: Used to refresh an element display by hiding it and reshowing to fix reflow problem in IE
@File: Element/prototype/redraw.js
@Example://return the elemenet
myElement.redraw();
@Description: This effect resizes an element dynamically
@File: Element/prototype/resizeTo.js
@Author: Paul Visco
@Version: 1.0 11/19/07
@Param: integer width The width to resize to
@Param: integer height The height to resize to
@Param: integer duration The time milliseconds to fade over
Example: div.resizeTo({height:700, width:700});
@Description: This effect rolls up an element while fading and then removes it
Example: div.rollUp({onEnd:function(){alert('d');}});
@File: Element/prototype/rollUp.js
@Author: Paul Visco
@Version: 1.0 05/27/09
@Description: Unsets the attributes of the element that are in the argument array
@File: Element/prototype/unsetAttributes.js
@Param: Array a A list of strings which represent the values to unset
@Example:myElement.unsetAttributes(['friend', 'nextKin']);
@Description: Sets the width and height of the element
@File: Element/prototype/wh.js
@Param: String/Number w The element width desired, can be specified as a number e.g. 100 or as a percent '100%'
@Param: String/Number h The element height desired, can be specified as a number e.g. 100 or as a percent '20%'
@Example:myElement.wh(100, 200);
@Description: Adds a className to the sb.element, using this methods sb.element instances can have multiple classNames
@File: Element/prototype/setAttributes.js
@Param: String c The classname to add
@Return: returns itself
@Example:myElement.setAttributes({friend : 'tim', name : 'joe'});
<myElement friend="tim" name="joe">
@Description: Determines if this this element contains another. Inspired by John Resig blog
@File: Element/prototype/containsElement.js
@Author: Paul Visco
@Version: 0.1 5-21-09 06-03-09
@Param: b The other element to check if for
@Return: returns boolean If this contains b
@Example:$('#one_element').containsElement('#another_element');
@Description: Determines if this element is within another
@File: Element/prototype/isWithin.js
@Author: Paul Visco
@Version: 0.1 5-21-09 06-03-09
@Param: b The other element to determine if this element is within
@Return: returns boolean If element b is within this element
@Example:$('#my_element').isWithin('#another_element');
@Description: Looks up all ancestors of the sb.element and places them in an array after turning them into sb.elements themselves
@File: Element/prototype/getAncestors.js
@Param: sb.element within A reference to another node, where the recurive ancestor collection should stop. If not set, ancestor list will go up to body tag. Otherwise, it will stop at whatever you use as the within argument.
@Return: array of sb.elements
@Example://get all ancestors
mySbElement.getAncestors();
//get all ancestors within (up to) myOtherDiv
mySbElement.getAncestors(myOtherSbElement);
@Description: Searches parentNodes incrementally till it find a node of a particular nodeName
@File: Element/prototype/getContaining.js
@Param: string nodeName The containing nodeName to look for
@Return: sb.element The parent node of the nodeName type specified or false
@Example://get the containing div
mySbElement.getContaining('div');
@Description: returns the first element type node (nodeType ==1) of a parentNode
@File: Element/prototype/getFirstChild.js
@Return: element sb.element
@Example://get the nodes firstChild
myParentSbElement.getFirstChild();
@Description: Gets the height of an element
@File: Element/prototype/getHeight.js
@Return: returns the elements height as a number in pixels with no unit
@Example:var height = myElement.getHeight();
@Description: returns the last element type node (nodeType ==1) of a parentNode
@File: Element/prototype/getLastChild.js
@Return: element sb.element
@Example:////get the nodes lastChild
myParentSbElement.getLastChild();
@Description: Finds the next sibling element of the element on which this is called
@File: Element/prototype/getNextSibling.js
@Return: Element A DOM element reference to the next sibling
@Example:myElement.getNextSibling();
@Description: Used to calculate the bounds top, right, bottom, left, h, and w of a DOM node. h and w are height and width. Attaches those properties to the element itself
@File: Element/prototype/getPosition.js
@Return: returns itself
@Example:var pos = myElement.getPosition();
alert(pos.left);
myElement.getPosition({pos : 'rel'});
myElement.getPosition({accountForScroll : 1});
@Description: Finds the previous sibling element of the element on which this is called
@File: Element/prototype/getPreviousSibling.js
@Return: Element A DOM element reference to the previous sibling
@Example:myElement.getPreviousSibling();
@Description: Gets the width of an element
@File: Element/prototype/getWidth.js
@Return: returns the elements width as a number in pixels with no unit
@Example:var height = myElement.getWidth();
@Description: Searches the node itself, followed by parentnodes incrementally till it find a node of the specified className
@File: Element/prototype/hasParentOfClassName.js
@Author: Paul Visco
@Version: 0.1 05-10-09 06-03-09
@Param: string className The className to look for
@Return: sb.elementChecks to see if the that has the className or false if not found
@Example://would check if mySbElement has the className highlighted and if not search parentNodes till it found one that did or returned false
mySbElement.isOrHasParentOfClassName('highlighted');
@Description: Sets the display of the element to none, removing its from being displayed on the page
@File: Element/prototype/hide.js
@Return: returns itself
@Example:myElement.hide();
@Description: Searches the node itself, followed by parentnodes incrementally till it find a node of the specified className
@File: Element/prototype/isOrHasParentOfClassName.js
@Author: Paul Visco
@Version: 0.1 05-10-09 06-03-09
@Param: string className The className to look for
@Return: sb.element The element itself or the parentNode that has the className or false if not found
@Example://would check if mySbElement has the className highlighted and if not search parentNodes till it found one that did or returned false
mySbElement.isOrHasParentOfClassName('highlighted');
@Description: Moves an element to a specific x, y and z position either absolutly or relatively is specified
@File: Element/prototype/mv.js
@Param: Number x The x position to move the element to
@Param: Number y The y position to move the element to
@Param: Number z The zIndex to move the element to
@Return: returns itself
@Example:myElement.mv(200,200,999);
//move sthe node to absolute position 200,200 and a zIndex of 999
@Description: Fires after a delay on keyup. New keypresses restart the count.
Great for when you have a realtime ajax search but want to wait until after
the user finishes typing.
@File: Element/prototype/onDelayedKeyUp.js
@Author: Paul Visco
@Version: 0.11 06-17-09 07-29-09
@Param: o Object
o.onAfterDelay function The function to fire after the delay. The this is the element. The e arg is the event
o.onKeyUp function The function to fire on keyup. The this is the element. The e arg is the event
o.delay integer The delay in milliseconds to wait before firing onAfterDelay
o.debug boolean If timer is sent to console in browsers that support it
@Return: object r With the following properties:
r.onAfterDelay() function which can be changed at any point
r.onKeyUp() function which can be changed at any point
r.observe(); function start or restart observing keypresses
r.unobserve(); function stop observing keypresses
@Example:var onDelayedKeyUp = $('#search_main').onDelayedKeyUp({
delay : 500,
onAfterDelay : function(e){
//if the value is more than one character
if(this.value.length > 3){
//do something app specific
search(this.value);
}
},
onKeyUp : function(e){
if(e.keyCode == 27 || this.value == ''){
//do something app specific
clearSearch();
return false;
}
}
});
@Description: Fires an event when the user hovers over and element
@File: Element/prototype/onHover.js
@Author: Paul Visco
@Version: 0.11 5-21-09 09-08-09
@Param: o Object
o.start Function The function to fire when you start hovering
o.stop Function The function to fire when you stop hovering
@Param: integer interval The number of millseconds between firing
@Return: returns A hovering object with properties interval, timer, events, and methods unobserve, observe, and hover
@Example:var hovering = myElement.onHover(function(){this.innerHTML = new Date();}, 200);
//OR
var hovering = $('#my_node').onHover({
onStart : app.colorPicker.updatePalette,
onStop : function(){
document.title = new Date();
},
interval : 100
});
//force hover - takes optional interval argument
hovering.hover();
//force hover stop
hovering.hoverstop();
//stop observing hover
hovering.unobserve();
//start observing hover again - takes optional interval argument
hovering.overserve();
@Description: Serialzies all child elements that have name attributes contained within the Element including text, textarea, select, select-multiple, radio, checkbox and any other misc elements with name attributes
@File: Element/prototype/serializeNamedChildren.js
@Param: object o Optional, The properties of an sb.ajax instance, e.g. url, onResponse, etc, if sent the data is send to that address
@Return: String first_name=paul&day=tues
@Example://just return the serialized data
var string = $('#myElement').serializeNamedChildren();
//serialize and send data to url
var string = $('#myElement').serializeNamedChildren('/some/page');
//serialize and send using more complex ajax object
var string = $('#myElement').serializeNamedChildren({
url : '/some/page',
onResponse : function(r){
alert(r);
}
});
@Description: Sets the opacity of the element
@File: Element/prototype/setOpacity.js
@Param: Float o Optional arguemnt specifies the percentage ocapcity. 0.0 is 100% transparent and 1.0 is 100% opaque.
@Return: returns itself
@Example:myElement.setOpacity(0.3);
//sets the elements opacity to 0.3
@Description: Switches an elements display back to whatever its default was. Tis is the reciprocal method for myElement.hide();
@File: Element/prototype/show.js
@Return: returns itself
@Example:myElement.show();
@Description: Swaps one element with another
@File: Element/prototype/swap.js
@Return: returns self and other element in an array
@Example:myElement.swap(otherElement);
@Description: Switches an object's display between hidden and default
@File: Element/prototype/toggle.js
@Return: returns itself
@Example:myElement.toggle();