JSL.dom

From Projects Wiki

Handles all the DOM functions.

1 Arguments
2 Example
3 Methods
4 JSL.dom.addClass( class_name )
5 JSL.dom.removeClass( class_name )
6 JSL.dom.hasClass( class_name )
7 JSL.dom.getPosition( )
8 JSL.dom.getStyle( property )
9 JSL.dom.setStyle( property, value )
10 JSL.dom.show( display )
11 JSL.dom.hide( display )
12 JSL.dom.toggle( )
- 12.1 Example
- 12.2 Code
13 JSL.dom.on( event, function )
14 JSL.dom.click( func )
15 JSL.dom.load( func )
16 JSL.dom.get( )
- 16.1 Example
- 16.2 Code

[edit] Arguments

Selector: The argument can be the ID of an element, a DOM node reference or a CSS query.

[edit] Example

JSL.dom("element-id")
JSL.dom(document.getElementById("element-id"))
JSL.dom("span a.external-links")

[edit] Methods

[edit] JSL.dom.addClass( class_name )

Adds the given class to the currently selected items

[edit] Arguments

class_name: The class that must be added to the selected elements

[edit] Example

JSL.dom("a").addClass("external");

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 75
function(class_name) {
    var self = this;
    this.nodes.each(function(ele) {
        self._class._add(ele,class_name);
    });
    return this;
}

[edit] JSL.dom.removeClass( class_name )

Removes the said class from all the element the selected list

[edit] Arguments

class_name: The class that must be removed from all the selected elements

[edit] Example

JSL.dom("span.active").removeClass("active");

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 87
function(class_name) {
    var self = this;
    this.nodes.each(function(ele) {
        self._class._remove(ele,class_name);
    });
    return this;
}

[edit] JSL.dom.hasClass( class_name )

Returns true if the class given as the argument is present for the current element.

[edit] Arguments

class_name: The class name that be checked for in the current element

[edit] Returns

This function returns true if the class is there in this element and else if the class is not found.

[edit] Example

if(JSL.dom("main-link").hasClass("active")) { //...

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 100
function(class_name) {
    return this._class._has(this.single,class_name);
}

[edit] JSL.dom.getPosition( )

Get the X,Y coordinates of the given element. Taken from http://txt.binnyva.com/2007/06/find-elements-position-using-javascript/

[edit] Returns

An associative array in this format - {"left":leftx,"x":leftx,"top":topy,"y":topy}

[edit] Example

var position = JSL.dom("element-id").getPosition();

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 110
function() {
    var ele = this.nodes.array[0]; //You can have the position for only 1 element.
    var leftx = topy = 0;
    if (ele.offsetParent) {
        leftx = ele.offsetLeft;
        topy = ele.offsetTop;
        while (ele = ele.offsetParent) {
            leftx += ele.offsetLeft;
            topy += ele.offsetTop;
        }
    }
 
    return {"left":leftx,"x":leftx,"top":topy,"y":topy};
}

[edit] JSL.dom.getStyle( property )

Get the specified style of the active element. Inspired by http://www.quirksmode.org/dom/getstyles.html

[edit] Arguments

property: The name of the property that must be fetched.

[edit] Example

JSL.dom("element-id").getStyle("width");

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 131
function(property) {
    var ele = this.nodes.array[0];
    if (ele.currentStyle) {
        var alt_property_name = property.replace(/\-(\w)/g|>,function(m,c){return c.toUpperCase();});//background-color becomes backgroundColor
        var value = ele.currentStyle[property]||ele.currentStyle[alt_property_name];
 
    } else if (window.getComputedStyle) {
        property = property.replace(/([A-Z])/g|>,"-$1").toLowerCase();//backgroundColor becomes background-color
 
        var value = document.defaultView.getComputedStyle(ele,null).getPropertyValue(property);
    }
 
    //Some properties are special cases
    if(property == "opacity" && ele.filter) value = (parseFloat( ele.filter.match(/opacity\=([^)]*)/)[1] ) /|> 100);
    else if(property == "width" && isNaN(value)) value = ele.clientWidth || ele.offsetWidth;
    else if(property == "height" && isNaN(value)) value = ele.clientHeight || ele.offsetHeight;
 
    //Remove the 'px' from the end of values
    if(typeof value == "string" && value.match(/^\d+px$/)) {
        value = Number(value.replace(/px/, ""));
    }
 
    return value;
}

[edit] JSL.dom.setStyle( property, value )

Set the style of the element.

[edit] Arguments

property: The Property
value: The Value

[edit] Example

JSL.dom("element").setStyle("position", "absolute");
    OR
JSL.dom("element").setStyle({
            "position":"absolute",
            "top":"50px",
            "left":"100px"
        });

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 167
function(property, value) {
    var all_styles = {};
    if(typeof property === "string") all_styles[property] = value;
    else all_styles = property;
 
    this.nodes.each(function(ele) {
        JSL.array(all_styles).each(function(value, property, all, ele) {
            property = property.replace(/\-(\w)/g|>,function(m,c){return c.toUpperCase();});//background-color becomes backgroundColor
 
            //Append a 'px' at the end of all numbers.
            if(value && value.constructor == Number) {
                var non_px = JSL.array(['zIndex','fontWeight','opacity','zoom','lineHeight']); //...except for these ones
                if( non_px.indexOf(property) == -1 && value.indexOf("px") == -1 ) {
                    value += 'px';
                }
            }
 
            if(property == "opacity") {
                ele.style.opacity = value;
                ele.style.filter = 'alpha(opacity='+value+')';  //IE
            } else {
                ele.style[property] = value;
            }
        },ele);
    });
    return this;
}

[edit] JSL.dom.show( display )

Shows all currently selected elements.

[edit] Arguments

display: could be 'visible', 'inline' or 'block'. If you chose 'visible', the function changes the 'visibility' property instead of the 'display' property. Defaults to 'block'.

[edit] Example

JSL.dom("example").show()
JSL.dom("example").show("visible")

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 203
function(display) {
    this.nodes.each(function(ele) {
        if(display === "visible") ele.style.visibility = "visible";
        else if(display === "inline") ele.style.display = "inline";
        else ele.style.display = "block";
    });
    return this;
}

[edit] JSL.dom.hide( display )

Hides all the currently selected elements

[edit] Arguments

display: could be 'hidden', 'none'. If you chose 'hidden', the function changes the 'visibility' property instead of the 'display' property. Defaults to 'none'.

[edit] Example

JSL.dom("example").hide()

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 219
function(display) {
    this.nodes.each(function(ele) {
        if(display === "hidden") ele.style.visibility = "hidden";
        else ele.style.display = "none";
    });
    return this;
}

[edit] JSL.dom.toggle( )

Toggles the selected elements between hidden and displayed state. It the element is shown, one toggle call will make it hidden - and if its hidden, a toggle call will show it.

[edit] Example

JSL.dom("example").toggle()

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 233
function() {
    this.nodes.each(function(ele) {
        if(ele.style.display != "block" ) ele.style.display = "block";
        else ele.style.display = "none";
    });
    // :TODO: Write tests
    return this;
}

[edit] JSL.dom.on( event, function )

Attach an event to a function.

[edit] Arguments

event: The event to watch for.
function: The function that shoulb be called on that event.

[edit] Example

JSL.dom(window).on("unload", goodbye_func);

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 253
function(event, func) {
    this.nodes.each(function(ele) {
        JSL.event().add(ele, event, func);
    });
    return this;
}

[edit] JSL.dom.click( func )

Attach the click event to the specified function for all the selected elements

[edit] Arguments

func: The function that should be called on the 'onclick' event.

[edit] Example

JSL.dom("a.delete-links").click(confirm_delete);

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 266
function(func){return this.on("click", func);}

[edit] JSL.dom.load( func )

Attach the load event to the specified function. Usually its only used with the window element

[edit] Arguments

func: The function that should be called on document 'onload' event.

[edit] Example

JSL.dom(window).load(init);

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 274
function(func){return this.on("load", func);}

[edit] JSL.dom.get( )

Returns the base element

[edit] Example

JSL.dom("element-id").get() // returns document.getElementById("element-id");

[edit] Code

// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_dom.js, Line 392
function() {
    if(this.single) return this.single;
    else return this.nodes.get();
}

Retrieved from "http://projects.binnyva.com/wiki/JSL.dom"

JSL.dom

From Projects Wiki

Contents

[edit] Arguments

[edit] Example

[edit] Methods

[edit] JSL.dom.addClass( class_name )

[edit] Arguments

[edit] Example

[edit] Code

[edit] JSL.dom.removeClass( class_name )

[edit] Arguments

[edit] Example

[edit] Code

[edit] JSL.dom.hasClass( class_name )

[edit] Arguments

[edit] Returns

[edit] Example

[edit] Code

[edit] JSL.dom.getPosition( )

[edit] Returns

[edit] Example

[edit] Code

[edit] JSL.dom.getStyle( property )

[edit] Arguments

[edit] Example

[edit] Code

[edit] JSL.dom.setStyle( property, value )

[edit] Arguments

[edit] Example

[edit] Code

[edit] JSL.dom.show( display )

[edit] Arguments

[edit] Example

[edit] Code

[edit] JSL.dom.hide( display )

[edit] Arguments

[edit] Example

[edit] Code

[edit] JSL.dom.toggle( )

[edit] Example

[edit] Code

[edit] JSL.dom.on( event, function )

[edit] Arguments

[edit] Example

[edit] Code

[edit] JSL.dom.click( func )

[edit] Arguments

[edit] Example

[edit] Code

[edit] JSL.dom.load( func )

[edit] Arguments

[edit] Example

[edit] Code

[edit] JSL.dom.get( )

[edit] Example

[edit] Code

Views

Personal tools

Navigation

Search

Toolbox