JavaScript Geeks / jQuery Geeks: 2015

Thursday, 19 November 2015

Read JSON file using Ajax

pincodeBranch.json file contains

{ "p110001": "Delhi", "p110002": "Delhi"}

pincodeBranch.js file contains

$.ajax({
    url: "pincodeBranch.json",
    type: "post",
    async: true,
    dataType: "json",
    data: {},
    success: function (data) {
        console.log(data.p110001);
        console.log('json loaded');
    },
    error: function () {
        console.log(" Please refresh: Problem in loading json.");
    }
});

index.html file contains

<!DOCTYPE html>
<html>
<head>
    <title>Ajax JSON Loading</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="pincodeBranch.js"></script>
</head>
<body>
    hi
</body>
</html>

Sunday, 16 August 2015

Detecting Mobile Devices with JavaScript

    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };

Tuesday, 7 July 2015

Detect Browser Name jQuery / JavaScript

// Detect Browser Name IE, Chrome/Safari, Mozilla, Opera

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
        $.browser = {};
        $.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase()) ;
        $.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
        $.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
        $.browser.msie = (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i));
        if ($.browser.msie) {
            alert("IE");
        } else if($.browser.webkit) {
            alert("chrome / safari");
        } else if ($.browser.mozilla) {
            alert("Mozilla");
        } else if ($.browser.opera) {
            alert("Opera");
        }
        });
        </script>

Monday, 11 May 2015

Find device is iOS (like iPad|iPhone|iPod)?

var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);

Thursday, 9 April 2015

Play/ Pause Audio

Play/ Pause Audio

JavaScript:

document.getElementById("FullAudio").play();

document.getElementById("FullAudio").pause();

jQuery:

$("#FullAudio").get(0).play();

$("#FullAudio").get(0).pause();

Friday, 3 April 2015

Randomize the array items

function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex ;

// While there remain elements to shuffle...
while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
}

return array;
}

Used like so

var arr = [2, 11, 37, 42];
shuffle(arr);
console.log(arr);

XML Parser JavaScript and jQuery Ajax

XML File sample.xml

<ACTIVITY>
    <title>Hellow</title>
</ACTIVITY>

JavaScript:

if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        }
else // code for IE5 and IE6
        {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
xhttp.open("GET", "sample.xml", false);
xhttp.send();
xmlDoc = xhttp.responseXML;
alert(xmlDoc.getElementsByTagName("title")[0].innerHTML);

jQuery Ajax:

$.ajax({
            type: "GET",
            url: "sample.xml",
            dataType: "xml",
            success: function(xml) {
                var xmlDoc = $.parseXML(xml.activeElement.outerHTML),
                    $xml = $(xmlDoc);
                    alert($xml.find("title").text());
            },
            error: function() {
                alert(" Please refresh: Problem in loading xml.");
            }
        });

Monday, 5 January 2015

jQuery Hover effects

$(".transformable-handle-rotate").hover(

function() {

$( this ).append( $( "<span> ***</span>" ) );

}, function() {

$( this ).find( "span:last" ).remove();

}

);

jQuery Object HTML

$(newDiv)[0].outerHTML

jQuery add new element

newDiv = $("<div>", {class: "Timer", id:oId});

newDiv.css("visibility","hidden");

TimerHTML = '<div class="WhitePatch"></div>';

newDiv.append(TimerHTML);

Stop the web page all image drag

$('img').on('dragstart', function(event) { event.preventDefault(); });

jQuery Ajax JSON Load

Sample data.JSON:

{

"CourseTitle": "Ordinary Annuities: Future Value and Present Value",

"Learn":[{"Type":"MCSS"}]

}

Ajax JSON Load:

var jsonLoad1 = "js/data.json";

$.ajax({

url: jsonLoad1,

type: "post",

async: true,

dataType: "json",

data: {},

success: function(data) {

alert(data.CourseTitle);

error: function() {

alert(" Please refresh: Problem in loading MasterLoader json.");

}

});