Js Plugins

Monday, 22 December 2014

Animated Headlines with CSS & jQuery

Download Demo
A collection of animated headlines, with interchangeable words that replace one another through CSS transitions and jQuery.

Focusable – Spotlight Focus on DOM Elements

Download Demo
An awesome and lightweight library for performing spotlight in your DOM elements, setting an animated overlay to the rest of the page.

API

Set spotlight (jQuery style)

$('#my-element').setFocus(options);

Set spotlight (through library)

Focusable.setFocus($('#my-element'), options);

Refresh current focused element

Focusable.refresh();

Hide spotlight

Focusable.hide();

Get focused element

Focusable.getActiveElement();

Get options

Focusable.getOptions();

###### Options
Property | Value | Default | Description
------------ | ------------- | ------------- | -------------
fadeDuration | Number | 700 | Duration of the overlay transition (milliseconds).
hideOnClick | Boolean | false | Hides the overlay when the user click into it.
hideOnESC | Boolean | false | Hides the overlay when the user press Esc.
findOnResize | Boolean | false | Refind the element in the DOM in case that the element don't still exists.

###### Runing tests
* `npm install`
* `grunt`
* See the result of testsuite in [http://localhost:9092](http://localhost:9092)

###### Dependencies
- jQuery

###### Contributing

0. Check [open issues](https://github.com/zzarcon/focusable/issues)
1. [Fork it](https://github.com/zzarcon/focusable/fork)
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request

###### Author
You can follow me on Twitter - https://twitter.com/zzarcon

jQuery Custom Radio Checkbox plugin

Download Demo
Custom Radio Checkbox is a jQuery plugin to customize native radios and checkboxes with your own design.
Features

Semantic HTML
Blazing Fast!
Easy to use (just include required files into your website and you’re done!)
Supports ajax loaded content, just call $(‘selector’).customRadioCheckbox();

Cross-browser
All versions of the following browsers are supported IE6+, FireFox, Chrome, Safari, Opera
Lightweight
Size compressed & gzipped

JS: 511 bytes
CSS: 206 bytes

1. INCLUDE CSS AND JS FILES

<link href="css/custom-radio-checkbox.css" rel="stylesheet" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="js/jquery.custom-radio-checkbox.js"></script>

2. HTML
The <input> is inside the <label>
*important: Use the “for” attribute in the <label> to support IE6

<form method="post" action="" id="form">

    <div class="fl w200 mr10">

        <h2>Radio group 1</h2>

        <p>

            <label for="yes">

                <input type="radio" name="radioGroup1" id="yes" value="Yes" />Yes

            </label>

        </p>

        <p>

            <label for="no">

                <input type="radio" name="radioGroup1" id="no" value="No" />No

            </label>

        </p>

        <p>

            <label for="maybe">

                <input type="radio" name="radioGroup1" id="maybe" value="Maybe" />Maybe

            </label>

        </p>

    </div>

    <div class="fl w200">

        <h2>Radio group 2</h2>

        <p>

            <label for="uno">

                <input type="radio" name="radioGroup2" id="uno" value="Uno" />Uno

            </label>

        </p>

        <p>

            <label for="dos">

                <input type="radio" name="radioGroup2" id="dos" value="Dos" />Dos

            </label>

        </p>

        <p>

            <label for="tres">

                <input type="radio" name="radioGroup2" id="tres" value="Tres" />Tres

            </label>

        </p>

    </div>

    <div class="separator"></div>

    <!-- checkbox -->

    <p>

        <label for="checkbox1">

            <input type="checkbox" name="Checkbox" id="checkbox1" value="1" />Checkbox 1

        </label>

    </p>

    <p>

        <label for="checkbox2">

            <input type="checkbox" name="Checkbox" id="checkbox2" value="2" />Checkbox 2

        </label>

    </p>

    <p>

        <label for="checkbox3">

            <input type="checkbox" name="Checkbox" id="checkbox3" value="3" />Checkbox 3

        </label>

    </p>

    <div class="separator"></div>

    <p id="submit"><input type="submit" value="Show result" /></p>

</form>

Validation with lightbox

Download Demo

Validation with Lightbox is a jQuery plugin for validating form and display error or success message with lightbox effects. This is referenced in some material from Internet and the references are placed at the end of the page.

1. INCLUDE CSS AND JS FILES

<link href="css/jquery-valid-lightbox-v1_1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-valid-lightbox-v1.1.js"></script>

2. HTML

There is HTML part and beware of these 3 points:

You must contain action=”javascript:void(0)” onsubmit=”return checking(‘your_url’);” in the form tab. action=”javascript:void(0)” is for stop submiiting the form, onsubmit=”return checking(‘your_url’); mean run the javascript function named checking() and pass the form submittion target to the javascript funvtion. Text box are idenified with the id name. Radio and checkbox are idenified with the input flied name.

<form name="demo_form" method="POST" action="javascript:void(0)" onsubmit="return checking('success.html');">
    <div class="item">
        <h6><label>First Name</label></h6>
        <div class="input_panel"><input type="text" id="firstname" name="firstname"></div>
    </div>
    <div class="item">
        <h6><label>Last Name</label></h6>
        <div class="input_panel"><input type="text" id="lastname" name="lastname"></div>
     </div>
     <div class="item">
        <h6><label>Age</label></h6>
        <div class="input_panel">
        <select id="age" name="age">
        <option value=""> - Please select the range -</option>
        <option value="0">0-18</option>
        <option value="19">19-35</option>
        <option value="36">36-50</option>
        <option value="50">50-90</option>
        <option value="100">>100</option>
        </select>
        </div>
    </div>
    <div class="item">
        <h6><label>Gender</label></h6>
        <div class="input_panel">
            <input type="radio" name="gender" value="male">Male<br>
            <input type="radio" name="gender" value="female">Female    
        </div>
    </div>
    <div class="item">
        <h6><label>Service you like</label></h6>
        <div class="input_panel">
            <input type="checkbox" name="service" value="Bike">bike<br>
            <input type="checkbox" name="service" value="Car">car  
        </div>
    </div>
    <div class="item">
        <h6><label>Where to know us</label></h6>
        <div class="input_panel">
        <input type="checkbox" name="where_from" value="newspaper">newspaper<br>
        <input type="checkbox" name="where_from" value="friend">friend<br>
        <input type="checkbox" name="where_from" value="internet">internet
        </div>
    </div<
    <input id="submit" type="submit" value="Submit form" >
    <br /><br />
</form>

3. JAVASCRIPT

Config the sentences below in jquery-valid-lightbox-v1.1.js:

var config = {
    "form_name"          : "demo_form",                       //Your form name, not id name
    "submit_form"        : true,                              //"true" is submit form, "false" would pop-up an error message.
    "title-message"      : {
        "success_title"  :"Validation Success",               //Lightbox title when validation was success.
        "error_title"    :"Error!"                            //Lightbox title when validation was fail.
    },
    "success-message"    :"Your application is submittted.",  //Lightbox content when validation was succes.
    "error-message"      : [
        {"name"      :"firstname",                            //1st input field name (name bt not id)
         "err_msg"   :"Title 1 is empty"},                    //Related error (1st input field) if validation was incorrect.
        {"name"      :"lastname" ,                            //2st input field name
         "err_msg"   :"You have fogotten fill in Title 2"},   //Related error (2st input field) if validation was incorrect.
        {"name"      :"age",                                  //3st input field name
         "err_msg"   :"Which is the range of your age"},      //Related error (3st input field) if validation was incorrect.
        {"name"      :"gender",                               //4st input field name
         "err_msg"   :"Please select your gender"},           //Related error (4st input field) if validation was incorrect.
        {"name"      :"service"  ,                            //5st input field name
         "err_msg"   :"Which service you like most ?"},       //Related error (5st input field) if validation was incorrect.
        {"name"      :"where_from"  ,                         //6st input field name
         "err_msg"   :"You havn't fill in where to know us."} //Related error (6st input field) if validation was incorrect.         
    ],
    "footer_close_btn_text" :"Close",     //Close button tex on the bottom-right corner of pop-up message box
    "close_btn_icon"        :"X",         //Close button icon on the top-right corner of pop-up message box
};

4. OPTIONS

An overview of the value for config:

value	Default demo value e.g.	Description
form_name	demo_form	Your form name
submit_form	true	“true” is submit form, “false” would pop-up an error message.
title-message.success_title	Validation Success	Lightbox title when validation was success.
title-message.error_title	Error!	Lightbox title when validation was fail.
success-message	Your application is submittted.	Lightbox content when validation was succes.
error-message.name	gender	Your form name, not id name
error-message.err_msg	Please select your gender	Your form name, not id name
footer_close_btn_text	Close	Close button tex on the bottom-right corner of pop-up message box
close_btn_icon	X	Close button tex on the bottom-right corner of pop-up message box

Friday, 19 December 2014

jQuery Sidebar

Download Demo
jQuery Sidebar is a stupid simple sidebar jQuery plugin.

1. INCLUDE JS FILES

<!-- Include jQuery -->

<script src="path/to/jquery.min.js"></script>

<!-- Include jQuery Sidebar -->

<script src="path/to/jquery.sidebar.min.js"></script>