Lazy.js


Too lazy to write long cross-browser JavaScript?

Too lazy to use jQuery?

Try Lazy.js!



Download (0,7Kb)

Fork me on Github




How to use it?



Just load lazy.min.js in your <head>:
<script src=lazy.min.js></script>





What's inside?




JS Objects


Lazy.js provides 6 shortcuts for the most used JavaScript native objects:

$w is a shortcut for the window object.
$n is a shortcut for the navigator object.
$d is a shortcut for the document object.
$r is a shortcut for the root element (<html>).
$h is a shortcut for the <head> element.
$b is a shortcut for the <body> element.




JS tests


Lazy.js provides 2 ready-to-use test results:

$m is true on mobiles and tablets, false on desktops and TVs. try it!
$ie contains the current IE version on IE , 0 on other browsers. try it!




JS Functions


Lazy.js provides 6 shortcuts for the most useful JavaScript functionnalities:

$(query) is a minimal DOM selector.

Examples:

    - $("#id") returns the element with the id "id". try it!
    - $(".class") returns the elements with the class "class". try it!
    - $("div") returns the div elements. try it!


remove(element) removes an element from the DOM.

Example:

    - remove($("#remove")) deletes the element with the id "remove". try it!


on(object, event, func) is an event binder.

Examples:

    - on($("#id"), "click", example1)
      sets an alert when the element "id" is clicked. try it!
    - on($w, "resize", example2)
      sets an alert when the window is resized. try it!


off(object, event, func) is an event unbinder.

Examples:

    - off($("#id"), "click", example1)
      unsets an alert when the element "id" is clicked. try it!
    - off($w, "resize", example2)
      unsets an alert when the window is resized. try it!


css(element, property[, value]) is a CSS getter and setter.

Examples:

    - css($("#id"), "width")
      returns the computed width of the element "id". try it!
    - css($("#id"), "width", "50px")
      sets a 50px width to the element "id". try it!


each(elements, func) calls a function for each element of a NodeList.
In the function, this represents the current element.

Example:

    - each($("div"), function(){alert(this.innerHTML)})
      shows the HTML code inside each div on the right. try it!




JS shims


Lazy.js provides 2 shims for a better IE support:

window.getComputedStyle(elem).getPropertyValue(prop)
to get the computed style of an element. (used in css())

• a mini HTML5 shim to allow HTML5 elements to have CSS or children on IE<9.


div.demo
a#id
div.class
div.class
div#remove
another div


@MaximeEuziere