Code Samples: jquery

Showing posts with label jquery. Show all posts

Thursday, December 22, 2016

jQuery Check if element is visible after scrolling

Html Part:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table style="width:100%;padding-top:100px;">
    <tr>
        <td style="width:50%;vertical-align:top">
            <h3>Partial Visibility Check</h3>

            <div class="scroll" style="height:320px;overflow:auto;border:1px solid blue;position:relative">
                <div class="check d1" style="height:100px;border:1px solid red">DIV 1</div>
                <div class="check d2" style="height:100px;border:1px solid red">DIV 2</div>
                <div class="check d3" style="height:100px;border:1px solid red">DIV 3</div>
                <div class="check d4" style="height:100px;border:10px solid red;padding-top:20px">DIV 4</div>
                <div style='padding:20px;position:relative;border:2px solid green;'>
                    <div style='border:2px solid blue;padding:30px;'>
                        <div class="check d5" style="height:100px;border:1px solid red">DIV 5</div>
                    </div>
                </div>
                <div class="check d6" style="height:100px;border:1px solid red">DIV 6</div>
                <div class="check d7" style="height:100px;border:1px solid red">DIV 7</div>
                <div class="check d8" style="height:100px;border:1px solid red">DIV 8</div>
            </div>
            <div class="log" style='height:140px;overflow:hidden'></div>
        </td>
        <td style="width:50%;vertical-align:top">
            <h3>Fully Visibility Check</h3>

            <div class="scroll full" style="height:320px;overflow:auto;border:1px solid blue;position:relative">
                <div style="height:3px"></div>
                <div class="check d1" style="height:100px;border:1px solid red">DIV 1</div>
                <div class="check d2" style="height:100px;border:1px solid red">DIV 2</div>
                <div class="check d3" style="height:100px;border:1px solid red">DIV 3</div>
                <div class="check d4" style="height:100px;border:1px solid red">DIV 4</div>
                <div class="check d5" style="height:100px;border:1px solid red">DIV 5</div>
                <div class="check d6" style="height:100px;border:1px solid red">DIV 6</div>
                <div class="check d7" style="height:100px;border:1px solid red">DIV 7</div>
                <div style="height:3px"></div>
            </div>
            <div class="log" style='height:128px;overflow:hidden'></div>
        </td>
    </tr>
</table>

jQuery Part:

var log = {};
$("div.scroll").scroll(function () {
    var boundary = $(this), block = boundary.closest("td"), full_view = boundary.hasClass("full");
    log = block.find(".log");
    boundary.find(".check").not(".visited").each(function () {
        var elem = $(this);
        var visited = isScrolledIntoView(boundary, elem, full_view);
        if (visited) {
            log.prepend("DIV.CLASS=\"" + elem.attr("class") + "\" VISITED<br/>");
        }
        else {
            log.prepend("DIV.CLASS=\"" + elem.attr("class") + "\" NOT VISITED<br/>");
        }
    });
});

function isScrolledIntoView(c, e, full_view) {
    var op = e[0].getBoundingClientRect().top - c[0].getBoundingClientRect().top;
    var oh = op + e[0].getBoundingClientRect().height;
    var v1 = c.height() > op && op >= 0;
    var v2 = oh <= c.height() && oh >= 0;
    return full_view === true ? (v1 && v2) : (v1 || v2);
}

Screenshot:

jQuery detect when user stops scrolling

<div class="scroll" style="height:300px;overflow:auto;border:1px solid blue">
    <div style="height:1000px"></div>
</div>
<div class="log"></div>

<script type="text/javascript">
    $("div.scroll").scroll(function() {
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            $("div.log").prepend("Haven't scrolled in 250ms!<br/>");
        }, 250));
    });
</script>

Saturday, December 17, 2016

Capture text pasted into / cut from a text field with JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Capture text pasted into / cut from a text field with JQuery</title>
    <script src="jquery-3.1.1.min.js"></script>
    <style type="text/css">
        #txt_complaint {
            width: 300px;
            margin: 10px;
            height: 30px;
            left: calc(50% - 150px);
            position: absolute;
        }
    </style>
</head>
<body>

<input type="text" id="txt_complaint"/>

<script type="text/javascript">
    $("#txt_complaint").bind('paste', function(e) {
        var elem = $(this);

        setTimeout(function() {
            var text = elem.val();
            alert("Value=" + text);
        }, 10);
    });

    $("#txt_complaint").bind('cut', function(e) {
        var elem = $(this);

        setTimeout(function() {
            var text = elem.val();
            alert("Value=" + text);
        }, 10);
    });
</script>

</body>
</html>

Saturday, December 10, 2016

Simple Loading Overlay Example

Download plugin from here

<!DOCTYPE html>
<html>
<head>
    <title>Loading Overlay Example</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="loading-overlay.js"></script>
    <style type="text/css">
        .loading {
            margin-left: 10%;
            margin-top: 20%;
            width: 80%;
            height: 200px;
            border: 1px solid blue;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>

<body>
<div class="loading">
    <br/>HTML DIV ELEMENT
</div>
<script type="text/javascript">
    $(".loading").LoadingOverlay("show");
    setTimeout(function () {
        $(".loading").LoadingOverlay("hide");

        setTimeout(function () {
            $.LoadingOverlay("show");

            setTimeout(function () {
                $.LoadingOverlay("hide");
            }, 3000);
        }, 1000);
    }, 3000);
</script>
</body>
</html>

Monday, November 28, 2016

JavaScript noUiSlider Example

Download nouislider.css & nouislider.js before try the example below.

noUiSlider code example

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link href="nouislider.css" rel="stylesheet">
    <script src="nouislider.js"></script
</head>

<body>
<div style="width: 90%; margin-left: 5%; padding-top: 30px;">
    <div class="parent">
        <h3>
            <i>NoUiSlider_1 = <span class="slider_value"></span></i>
            <input type="button" class="reset_1" value="Reset"/>
            <input type="button" class="disable disable_1" value="Disable"/>
            <input type="button" class="enable enable_1" value="Enable" style="display: none;"/>
        </h3>
        <div class="slider slider_1"></div>
    </div>
    <div class="parent">
        <h3>
            <i>NoUiSlider_2 = <span class="slider_value"></span></i>
            <input type="button" class="reset_2" value="Reset"/>
        </h3>
        <div class="slider slider_2"></div>
    </div>
    <div class="parent">
        <h3><i>Slider Example</i></h3>
        <div style="width: 120px;" class="slider-toggle"></div>
    </div>
</div>
</body>

<script type="text/javascript">
    createSimpleSlider();
    createToggleSlider();

    function createSimpleSlider() {
        for(var i = 1; i <= 2; i++) {
            var range = $('.slider_' + i)[0];

            noUiSlider.create(range, {
                start: 40,
                tooltips: [ true ],
                connect: [true, false],
                range: {
                    'min': 0,
                    'max': 100
                },
                format: {
                    to: function ( value ) {
                        return parseInt(value);
                    },
                    from: function ( value ) {
                        return value;
                    }
                }
            }).on('update', function( values, handle ) {
                var target = $(this.target);
                var slider_tooltip = target.find(".noUi-handle");
                if(values[handle] > 50) {
                    slider_tooltip.addClass("half_way_pass");
                }
                else {
                    slider_tooltip.removeClass("half_way_pass");
                }

                var slider_value = target.closest(".parent").find(".slider_value")[0];
                slider_value.innerHTML = values[handle];
            });

            $('.reset_' + i).click(function() {
                var target = $(this);
                target.closest(".parent").find(".slider")[0].noUiSlider.set([15]);
            })

            $('.disable_' + i).click(function() {
                var target = $(this);
                target.closest(".parent").find(".slider").attr("disabled", "disabled");
                target.hide();
                target.closest(".parent").find(".enable").show();
            })

            $('.enable_' + i).click(function() {
                var target = $(this);
                target.closest(".parent").find(".slider").removeAttr("disabled");
                target.hide();
                target.closest(".parent").find(".disable").show();
            })
        }
    }

    function createToggleSlider() {
        var toggleSlider = $('.slider-toggle')[0];

        noUiSlider.create(toggleSlider, {
            start: 0,
            range: {
                'min': [0, 1],
                'max': 1
            },
            format: {
                to: function ( value ) {
                    return parseInt(value);
                },
                from: function ( value ) {
                    return value;
                }
            }
        });

        toggleSlider.noUiSlider.on('update', function( values, handle ) {
            var target = $(this.target);
            var slider_tooltip = target.find(".noUi-handle");
            if(values[handle] > 0) {
                slider_tooltip.addClass("half_way_pass");
            }
            else {
                slider_tooltip.removeClass("half_way_pass");
            }

            var slider_value = target.closest(".parent").find(".slider_value")[0];
            slider_value.innerHTML = values[handle];
        });
    }
</script>

Wednesday, November 16, 2016

jQuery get params from url

var params = {};
window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) {
    params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
});
console.log(params);

Wednesday, October 5, 2016

How to reset a particular form field using jQuery

Full code snippet

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form style="margin: 50px;">
    <div>
        <input type='text' value='Default value' class="check_overall_change" style='width:206px'/>
        <button type='button'>Reset</button>
    </div>

    <div>
        <input type='checkbox' name='checkbox' value='1' class="check_overall_change"/> #1
        <input type='checkbox' name='checkbox' value='2' checked class="check_overall_change"/> #2
        <input type='checkbox' name='checkbox' value='3' class="check_overall_change"/> #3
        <button type='button' style='margin-left:78px'>Reset</button>
    </div>

    <div>
        <select style='width:206px' class="check_overall_change">
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3' selected>3</option>
        </select>
        <button type='button'>Reset</button>
    </div>

    <div>
        <select multiple style='width:206px' class="check_overall_change">
            <option value='1'>1</option>
            <option value='2' selected>2</option>
            <option value='3'>3</option>
            <option value='4' selected>4</option>
        </select>
        <button type='button'>Reset</button>
    </div>
    <div class="log"></div>
</form>
</body>
<script type="text/javascript">
    var baseConfig = getOverallValue(), log = $(".log");

    $(".check_overall_change").on("change", function () {
        checkFormValueChanged();
    })

    $(".check_overall_change[type='text']").on("keyup", function () {
        checkFormValueChanged();
    })

    function checkFormValueChanged() {
        if(baseConfig != getOverallValue()) {
            log.html("<h3>Value changed</h3>");
        }
        else {
            log.html("<h3>Value not changed</h3>");
        }
    }

    function resetForm() {
        var thiz = $(this), input = thiz.closest("div").find(":input:not(button)");
        if(input.is("select")) {
            var values = [];
            var options = input.find("option");
            for(var index = 0; index < options.length; index++) {
                if(options[index].defaultSelected) {
                    values.push($(options[index]).val())
                }
            }
            input.val(values);
        }
        else if(input[0].type == 'checkbox') {
            for(var index = 0; index < input.length; index++) {
                if(input[index].defaultChecked) {
                    $(input[index]).prop("checked", "checked");
                }
                else {
                    $(input[index]).prop("checked", null);
                }
            }
        }
        else {
            input.val(input[0].defaultValue)
        }
        checkFormValueChanged();
    }

    function getOverallValue() {
        var values = "";
        $(".check_overall_change").each(function (index, element) {
            element = $(element);
            if(element[0].type == 'checkbox') {
                values += element.is(":checked") + "-";
            }
            else {
                values += element.val() + "-";
            }
        })
        return values;
    }

    $("button").bind("click", resetForm);
</script>

And finally jsFiddle link to test yourself

Click here to test yourself at jsFiddle

Saturday, May 16, 2015

Convert RGB Values Of A Color To A Hexadecimal String And Vice Versa Using jQuery

Hex: RGB:
RGB: Hex:

/* RGB Value To Hexa Decimal */
function toHex(n) {
     n = parseInt(n);
     if (isNaN(n)) return "00";
     n = Math.max(0,Math.min(n,255));
     return "0123456789ABCDEF".charAt((n-n%16)/16)
     + "0123456789ABCDEF".charAt(n%16);
}
toHex("20");

/* Hext Decimal Value To RGB Value */
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
var str = "#34F355";
hexToR(str);
hexToG(str);
hexToB(str);

Saturday, May 9, 2015

jQuery get an elements position or offset according to some parent element

$.fn.offsetRelative = function(top){
    var $this = $(this);
    var $parent = $this.offsetParent();
    var offset = $this.position();
    
    // add scroll
    offset.top += $this.scrollTop()+$parent.scrollTop();
    offset.left += $this.scrollLeft()+$parent.scrollLeft();
    if(!top) {
        // Didn't pass a 'top' element
        return offset;
    } else if($parent.get(0).tagName == "BODY") {
        // Reached top of document
        return offset;
    } else if($($(top), $parent).length) {
        // Parent element contains the 'top' element we want the offset to be relative to
        return offset;
    } else if($parent[0] == $(this).closest(top)[0]) {
        // Reached the 'top' element we want the offset to be relative to
        return offset;
    } else {
        // Get parent's relative offset
        var parent_offset = $parent.offsetRelative(top);
        offset.top += parent_offset.top;
        offset.left += parent_offset.left;
        return offset;
    }
};

JSFiddle link

Saturday, December 13, 2014

jQuery rounding number to nearest, flooring or ceiling as expected decimal point

JSFIDDLE Link ||| Text Link

function roundNumber(value, exp) {
    return decimalAdjust('round', value, exp);
}

function floorNumber(value, exp) {
    return decimalAdjust('floor', value, exp);
}

function ceilNumber(value, exp) {
    return decimalAdjust('ceil', value, exp);
}

function decimalAdjust(type, value, exp) {
    // If the exp is undefined or zero...
    if (typeof exp === 'undefined' || +exp === 0) {
        return Math[type](value);
    }
    value = +value;
    exp = +exp;
    // If the value is not a number or the exp is not an integer...
    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
        return NaN;
    }
    // Shift
    value = value.toString().split('e');
    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
    // Shift back
    value = value.toString().split('e');
    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
}

jQuery Rounding Number To Nearest Interval Such: 0.05, 0.5, 0.1, 5, 10, 100

JSFIDDLE LINK ||| TEXT LINK

Html Content:

<input type='text' name='number' style='width: 150px;' value='10.21'/>
<input type='text' name='round' style='width: 50px;' value='0.25'/>
<input type='text' name='dp' style='width: 50px;' value='2'/>
<input type='button' name='check' value='Check'/>
<div></div>

jQuery Content:

var div = $("div");
log("---------------------------------------------------------");

$("input[type='button']").click(function() {
    var number = parseFloat($("input[name='number']").val());
    var round = parseFloat($("input[name='round']").val());
    var dp = parseFloat($("input[name='dp']").val());
    if (!isNaN(number) && !isNaN(round) && !isNaN(dp)) {
        var nn = roundInterval(number, round, dp, "up");
        
        log("<br/>Rounding: " + numberToString(number, dp, true) + 
            " using: " + round + 
            "/" + "<span class='up-down'>Up</span>" + 
            " as: " + numberToString(nn, dp, true));
        
        var nn = roundInterval(number, round, dp, "down");
        
        log("<br/>Rounding: " + numberToString(number, dp, true) + 
            " using: " + round + 
            "/" + "<span class='up-down'>Down</span>" + 
            " as: " + numberToString(nn, dp, true));
        
        log("---------------------------------------------------------");
    }
});
$("input[type='button']").trigger("click");

function roundInterval(number, interval, round, roundType) {
    if (round > 9) {
        round = 9;
    }
    else if (round < 0) {
        round = 0;
    }
    number = number > 999999999999999 ? 999999999999999 : number;
    var isMinus = false;
    if (number < 0) {
        isMinus = true;
        number = number * -1;
    }
    number = parseFloat(numberToString(number, round));
    interval = parseFloat(numberToString(interval, round));
    var multiplier = roundType == 'up' ? Math.ceil(number / interval) : Math.floor(number / interval);
    
    log("Multiplier: " + multiplier);
    log("As: " + number + "/" + interval + " :: " + (number/interval));
    
    number = multiplier * interval;
    
    number = multiplier * interval;
    if (isMinus) {
        number = number * -1;
    }
    return parseFloat(number.toFixed(round));
}

function numberToString(number, dp, asDp) {
    var format = '#';
    if (asDp === undefined || asDp == null) {
        asDp = false;
    }
    if (dp !== undefined && dp != null && !isNaN(dp)) {
        if (dp > 9) {
            dp = 9;
        }
    }
    else {
        dp = 0;
    }
    if (dp > 0 && asDp) {
        format += ".";
        format += "0000000000".substr(0, dp);
    }
    else if (dp > 0) {
        format += ".";
        format += "##########".substr(0, dp);
    }
    number = number.toString();
    var minus = number.substr(0, 1) == '-' ? '-' : '';
    var ln = "";
    if (number.lastIndexOf("e+") > -1) {
        ln = number.substr(0, number.lastIndexOf("e+"));
        for (var i = ln.length - 2; i < parseInt(number.substr(number.lastIndexOf("e+") + 1)); i++) {
            ln += "0";
        }
        ln = ln.replace(/[^0-9]/g, '');
        number = ln;
    }
    var tail = format.lastIndexOf('.'), nail = number.lastIndexOf('.');
    if (nail < 0 && tail >= 0) {
        number = number + "." + format.substr(tail + 1, 1);
        nail = number.lastIndexOf('.');
    }
    tail = tail > -1 && nail > -1 ? format.substr(tail) : '';
    var numtail = number.substr(number.indexOf(".") ) ;
    if(tail.length > 0 && dp !== undefined && dp > 0) {
        tail = tail.substr(0, dp + 1);
        var tails = tail.split(''), ntail = "", canPop = true;
        for (var i = 1; i < tails.length; i++) {
            if ((tails[i] == '#' || tails[i].match(/([0-9])/g)) && numtail.length > i) {
                ntail += numtail.substr(i, 1);                    
            }
            else if(tails[i] == '#') {
                ntail += '0';
            }
            else {
                ntail += tails[i];
            }
        }
        var ttail = ntail.split(''), ptail = tail.substr(1).split('');
        for(var i = ttail.length - 1; i > -1; i--){
            if (ptail[i] == '#' && canPop && (ttail[i] == '0' || ttail[i] == '#')) {
                ntail = ntail.substr(0, ntail.length - 1);
            }
            else {
                canPop = false;
            }
        }
        if (ntail.length > 0) {
            tail = "." + ntail;
        }
        else {
            tail = "";   
        }
    }
    number = number.replace(/\..*|[^0-9]/g,'').split('');
    format = format.replace(/\..*/g,'').split('');
    for(var i = format.length - 1; i > -1; i--){
        if(format[i] == '#') {
            format[i]=number.pop()
        }
    }
    number = minus + number.join('') + format.join('') + tail;
    return number;
}

function log(m) {
    div.prepend(m + "<br/>");
}

Saturday, June 28, 2014

Encrypt & Decrypt String Using AES Algorithm & jQuery

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="crypto-js/core-min.js"></script>
<script src="crypto-js/enc-utf16-min.js"></script>
<script src="crypto-js/enc-base64-min.js"></script>
<script src="crypto-js/aes.js"></script>
<script>
 $(function() {
  $('#test').on('submit', function() {
   var plaintext = $('#text').val();
   var secret = $('#secret').val();
   var encrypted = '' + CryptoJS.AES.encrypt(plaintext, secret);
   $("#output").prepend("<br/>Encrypted: " + encrypted);
   var decrypted = CryptoJS.AES.decrypt(encrypted, secret);
   $("#output").prepend("<br/><br/> Original From Encrypted: " + decrypted.toString(CryptoJS.enc.Utf8));

   return false;
  });  
 });   
</script>
</head> 
<body lang="en">  
    <form id="test">
        <p>
            <label>Secret</label><br>
            <input id="secret" value="Secret Passphrase">
        </p>
        <p>
            <label>Text</label><br>
            <textarea id="text">This is the secret message</textarea>
        </p>
        <input type="submit" id="submit">
    </form>
    <div id="output"></div>  
</body>
</html>

Required jQuery Files

Github Location

Friday, March 7, 2014

jQuery get browser and os details

http://jquery.thewikies.com/browser/

$(document).ready(function () {
    $.browserTest = function (userAgent, z) {
        var u = 'unknown', x = 'X';
        var getBrowserName = function (userAgent, userAgents) {
            for (var i = 0; i < userAgents.length; i = i + 1) {
                userAgent = userAgent.replace(userAgents[i][0], userAgents[i][1]);
            }
            return userAgent;
        }
        var getBrowserDetails = function (userAgent, browserNameRegex, layouts, browserVersionRegex) {
            var r = {
                name: getBrowserName((browserNameRegex.exec(userAgent) || [u, u])[1], layouts)
            };
            r[r.name] = true;
            r.version = (browserVersionRegex.exec(userAgent) || [x, x, x, x])[3];
            if (r.name.match(/safari/) && r.version > 400) {
                r.version = '2.0';
            }
            if (r.name === 'presto') {
                r.version = ($.browser.version > 9.27) ? 'futhark' : 'linear_b';
            }
            r.versionNumber = parseFloat(r.version, 10) || 0;
            r.versionX = (r.version !== x) ? (r.version + '').substr(0, 1) : x;
            r.className = r.name + r.versionX;
            return r;
        }
        userAgent = (userAgent.match(/Opera|Navigator|Minefield|KHTML|Chrome/) ? getBrowserName(userAgent, [
            [/(Firefox|MSIE|KHTML,\slike\sGecko|Konqueror)/, ''],
            ['Chrome Safari', 'Chrome'],
            ['KHTML', 'Konqueror'],
            ['Minefield', 'Firefox'],
            ['Navigator', 'Netscape']
        ]) : userAgent).toLowerCase();
        console.log(userAgent);

        $.browser = getBrowserDetails(userAgent, /(camino|chrome|firefox|netscape|konqueror|lynx|msie|opera|safari)/, [], /(camino|chrome|firefox|netscape|netscape6|opera|version|konqueror|lynx|msie|safari)(\/|\s)([a-z0-9\.\+]*?)(\;|dev|rel|\s|$)/);
        console.log($.browser);

        $.layout = getBrowserDetails(userAgent, /(gecko|konqueror|msie|opera|webkit)/, [
            ['konqueror', 'khtml'],
            ['msie', 'trident'],
            ['opera', 'presto']
        ], /(applewebkit|rv|konqueror|msie)(\:|\/|\s)([a-z0-9\.]*?)(\;|\)|\s)/);
        console.log($.layout);

        $.os = {
            name: (/(win|mac|linux|sunos|solaris|iphone)/.exec(navigator.platform.toLowerCase()) || [u])[0].replace('sunos', 'solaris')
        };
        console.log($.os);
    }
    $.browserTest(navigator.userAgent);
});

Native Fullscreen JavaScript/jQuery API

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

My name pritom

jQuery code

$(document).ready(function () {
    var fullScreenCheck = $("div#main-body").checkFullScreen();
    if (fullScreenCheck.enter && fullScreenCheck.exit && fullScreenCheck.fullscreen && fullScreenCheck.change && fullScreenCheck.error) {
        $(document).bind(fullScreenCheck.change, fullScreenChangeHandler);
        $(document).bind(fullScreenCheck.error, fullScreenErrorHandler);
        $(".fsmode").html("Full screen would work...");
        $("div#main-body .fullscreen").click(function () {
            if(document[fullScreenCheck.fullscreen]) {
                console.log("Going to normal screen...");
                document[fullScreenCheck.exit]();
            } else {
                console.log("Going to full screen...");
                $("div#main-body")[0][fullScreenCheck.enter]();
            }
        })
        $("div#main-body").click(function () {
            $(document).trigger("fullscreenchange");
        })
        $(document).bind("fullscreenchange", function() {
            if (document[fullScreenCheck.fullscreen]) {
                $(".fsmode").html("Window is now full screen...");
            } else {
                $(".fsmode").html("Window is now normal screen...");
            }
        });
    } else {
        $(".fsmode").html("Full screen would not work...");
        $("div#main-body .fullscreen").remove();
    }

    function fullScreenChangeHandler(event) {
        $(document).trigger(new $.Event("fullscreenchange"));
    }

    function fullScreenErrorHandler(event) {
        console.log(event.originalEvent);
    }
})

jQuery.fn.checkFullScreen = function () {
    var enter, exit, fullscreen
// support for entering fullscreen
    var dom = document.createElement('div');
    if ('requestFullscreen' in dom) {
        enter = 'requestFullscreen' // W3C proposal
    } else if ('requestFullScreen' in dom) {
        enter = 'requestFullScreen' // mozilla proposal
    } else if ('webkitRequestFullScreen' in dom) {
        enter = 'webkitRequestFullScreen' // webkit
    } else if ('mozRequestFullScreen' in dom) {
        enter = 'mozRequestFullScreen' // firefox
    } else if ('msRequestFullscreen' in dom) {
        enter = 'msRequestFullscreen' // ms
    } else {
        enter = null // not supported in this browser
    }
// support for exiting fullscreen
    if ('exitFullscreen' in document) {
        exit = 'exitFullscreen' // W3C proposal
    } else if ('cancelFullScreen' in document) {
        exit = 'cancelFullScreen' // mozilla proposal
    } else if ('webkitCancelFullScreen' in document) {
        exit = 'webkitCancelFullScreen' // webkit
    } else if ('mozCancelFullScreen' in document) {
        exit = 'mozCancelFullScreen' // firefox
    } else if ('msExitFullscreen' in document) {
        exit = 'msExitFullscreen' // ms
    } else {
        exit = null // not supported in this browser
    }
// support for detecting when in fullscreen
    if ('fullscreen' in document) {
        fullscreen = 'fullscreen' // W3C proposal
    } else if ('fullScreen' in document) {
        fullscreen = 'fullScreen' // mozilla proposal
    } else if ('webkitIsFullScreen' in document) {
        fullscreen = 'webkitIsFullScreen' // webkit
    } else if ('mozFullScreen' in document) {
        fullscreen = 'mozFullScreen' // firefox
    } else if ('msFullscreenElement' in document) {
        fullscreen = 'msFullscreenElement' // ms
    } else {
        fullscreen = null // not supported in this browser
    }

    if (document["webkitCancelFullScreen"]) {
        change = "webkitfullscreenchange";
        error = "webkitfullscreenerror";
    } else if (document["msExitFullscreen"]) {
        change = "MSFullscreenChange";
        error = "MSFullscreenError";
    } else if (document["mozCancelFullScreen"]) {
        change = "mozfullscreenchange";
        error = "mozfullscreenerror";
    } else {
        change = "fullscreenchange";
        error = "fullscreenerror";
    }

    return {
        enter: enter,
        exit: exit,
        fullscreen: fullscreen,
        change: change,
        error: error
    }
};

Pages