ivaBaseJS API


Overview

The ivaBaseJS is a collection of commonly used javascript functions without a lot of overhead.

The syntax used in development of these functions follows a jQuery-like convention so as to be easily written by developers already familiar with this model. More so, the syntax and functionality follow this convention in order to provide a simple API that even novice developers can effortlessly create advanced events and interactions without necessarily having to write advanced javascript methods.

jQuery-like syntax:

$(document).ready(function() {
    $("#exampleId").click(function() {
        if($(this).hasClass("moved")) {
            // run a function if 'this' has class 'moved'
        } else {
            // run a different function if 'this' doesn't have class 'moved'.
        }
    });
});

Below you will find a complete reference to the methods that are available through ivaBaseJS. This includes the method parameters, returns and example usage.

Core Methods

$()

$(selector [, context]);

    $('div')                     // => All div elements on the page
    $('#one')                    // => Element with the ID "one"
    $('.all')                    // => All elements with the class "all"
    $('#two img')                // => img child of element with the ID of "two"
    $('button', $('#myForm'))    // => All child button elements of the ID "myForm"

$() takes a DOM selector as a parameter.

$(document).ready(function() {

});

Style Methods

.css()

    .css('property');             // => read that css property
    .css('property', 'value');    // => set the css property
    .css({'property1': 'value1', 'property2': 'value2', ... }); // => pass an object

Read or set CSS properties on DOM elements. When no value is given, returns the CSS property from the first element in the collection. When a value is given, sets the property to that value on each element of the collection. Multiple properties can be set by passing an object to the method.

$('#one').css('padding-left');
$('#one').css('padding-left', '20px'); 
$('#one').css('padding-left', '');     // => remove the css property.

$('#one').css({
    'background-color': '#8EE',
    'font-size': '28px'
});

.addClass()

    .addClass(name);           // => add a single class
    .addClass(name, name2);    // => add multiple classes - comma separated string

Add class name to each of the elements in the collection if the element does not already have the class applied.

$('#sample').addClass('active');    
$('#sample').addClass('active, natural');

.hasClass()

    .hasClass(name);

Boolean check to see if the element has the specified class name.

if($('#sample').hasClass('active')){
    // Do something if return is true
} else {
    // Do something else if false
}

.removeClass()

    .removeClass(name);           // => remove a single class
    .removeClass(name, name2);    // => remove multiple classes - comma separated string

Remove class name from each of the elements in the collection if the class exists.

$('#sample').removeClass('active');
$('#sample').removeClass('active, natural');

.toggleClass()

    .toggleClass(name);           // => toggle a single class
    .toggleClass(name, name2);    // => toggle multiple classes - comma separated string

Add/remove class name from each of the elements in the collection based on whether or not the class is already present on the element.

$('#sample').toggleClass('active');
$('#sample').toggleClass('active, natural');


Event Methods

.bind()

    .bind(event, callback);

Attach an event handler to the elements.

$('#sample').bind('click', function(){
    alert("Successful binding.");
});

.off()

    .off(action [, selector], callback);

Remove an event handler from an element that was previously added by .on().

$('#sample').off('click', function(){
    alert("Event removed on click.");
});

$('body').off('click', '#sample', function(){
    alert("Event has been undelegated when clicking '#sample'.");
});

.on()

    .on(action [, selector], callback);

Attach an event handler to an element now and in the future.

$('#sample').on('click', function(){
    alert("Event fired on click.");
});

$('body').on('click', '#sample', function(){
    alert("Event has been delegated to fire when clicking '#sample'.");
});

.pinch()

    .pinch(callback);
$('input').pinch(function(){   // Do something on pinch });
$('input').on('pinch', function(){   // Do something on pinch });

.unbind()

    .unbind(event, callback);

Detach event handler that was added with bind().

$('#sample').unbind('click');

$('#sample').unbind('click', function(){
    alert("Event is unbound.");
});


Query Methods

.each()

    .each(callback);

Iterate through every element of the collection. Inside the iterator function, this keyword refers to the current item (also passed as the second argument to the function). If the iterator function returns false the iteration will stop.

$('body').on('click', function(){
    $('input').each(function(index){
        //console.log($(this).attr('id'));
        console.log('input %d is: %o', index, this);
    });
});


Platform Methods

.platform()

    .platform(callback, delay);

Depending on the platform being used, this method can be used to set a delay once the slide is loaded. Extraneous function, but can be helpful with platforms that fire an internal method onLoad.

$('document').platform(function(){
    $('#overlay').removeClass(active);
});

.slide_change()

    .slide_change(path);

    Can use "slideObject" to relate paths to index values.

Depending on the platform being used, slide_change determines the action to be taken. On eve and desktop systems, the path can relate to a simple HTML file name. Eve should also use the slideObject to specify the index of the slide being referenced. The same HTML file path can be used within iRep as “slide_change” will convert the HTML filename to a ZIP extension.

$('#continue_button').slide_change('slide2.html');


Plug-Ins

In order to keep the file size of the framework down, helpful functions have been left out of the base build that would not always be necessary for a standard project. The functions have been separated into individual scrips files for ease of use. In order to use the plug-in, you can either copy and paste the source of the plug-in to the end of the base build, OR you can include the plug-in script after the framework script at the end of your document.

    <script type="text/javascript" src="enrmus.js"></script>
    <script type="text/javascript" src="plug-in-name-here.js"></script>

debug.js

    .debug({ params });

    Parameters
    active: boolean          // True executes plugin. Defaults to false.
    color: grey|dark|light   // Debug div background color. Default is grey. [optional]
    pos: top|bottom          // Position of the debug div. Default is bottom. [optional]
    width: value             // Value in pixels - integer only. Default is 100% [optional]
    height: value|auto       // Value in pixels - integer only or auto. Default is 80 [optional]

The debug plug-in adds the ability to expose the console to a div for debugging on the iPad or mobile device.

The only required parameter is the ‘active’ parameter.

Example

$('body').debug({
    "active": true,
    "color": "grey"
});

Detail

active
By default the active parameter is set to false. This allows you to include the plug-in, but only use it as necessary. Setting the active paramter to true will display the debug console on the screen.
color
The color parameter allows you to change the background and text color of the debug console based on the color scheme of your layout. Since the debug console is semi-transparent, different color schemes will make it easier to read/see. Defaults to grey. Can also use dark (black background with white text) or light (near-white background with black text).
pos
The pos parameter allows you to change the position to top from the default bottom positioning.
width
The width parameter allows you to pass a numerical value for a custom width of the debug console. The default is the full width with 10px of margin on all sides.
height
The height parameter gives you the ability to modify the default 80px height to any value that you prefer. The input should be numerical only.