Handle Cloning with jQuery Uniform

If you try to apply uniform styles for cloned elements, you may come across some weird situations where you don't get the expected output. Just try this if it applies to you also.

The bold text is the most important and it should be applied in the same order.

$.uniform.restore('.is_variant_enabled');
$('.is_variant_enabled').uniform();

 

[sourcecode language="javascript"]
$.uniform.restore('.is_variant_enabled');
var row = $("#tbl_variants").find('tr:eq(1)').clone();
$("#tbl_variants tbody").prepend(row);
$('.is_variant_enabled').uniform();
[/sourcecode]

Prepend Items to Bootstrap Typeahead

This is a little code snippet for manually adding static items along with typeahead suggestions list. This can be used to prepend or append items. I'm using biggora/bootstrap-ajax-typeahead

You only need to look for render event of the plugin and inject your code.

[sourcecode language="javascript"]
$("#customer").typeahead({
        onSelect: function(item) {
            ...
        },
        updater: function(item) {
            return item;
        },
        highlighter: function(name) {
           ...
        },
        ajax: {
            ...
            },
           
        render: function(items) {
            var uber = {render: $.fn.typeahead.Constructor.prototype.render};
            uber.render.call(this, items);
            this.$menu.prepend('<li class="nostyle"><a href="#" autocomplete="off" data-toggle="modal" data-target="#itemModal"><i class="fa fa-plus"></i> New Customer</a></li>');
            return this;
        }
    });
[/sourcecode]

 

Disable right click and F12 in jQuery

[sourcecode language="javascript"]
$(document).ready(function(){
$("body").bind("contextmenu", function(e) {
    e.preventDefault();
});
document.onkeypress = function (event) {
        event = (event || window.event);
        if (event.keyCode == 123) {
            return false;
        }
    }
    document.onmousedown = function (event) {
        event = (event || window.event);
        if (event.keyCode == 123) {
            return false;
        }
    }
document.onkeydown = function (event) {
        event = (event || window.event);
        if (event.keyCode == 123) {
            return false;
        }
    }
});
[/sourcecode]

Bootstrap3 Ajax Typeahead Templating

Plugin URL : https://github.com/biggora/bootstrap-ajax-typeahead


[sourcecode language="javascript"]
<script type="text/javascript">
    var items;
$("#search_item").typeahead({
    onSelect: function(item) {
        add_order_item(item.value);
    },
      updater: function (item) {
        return item;
    },
    highlighter: function(name){
         var item = _.find(items, function (c) {
                        return c.name == name;
                    });
           
        var itm = ''
                 + "<div class='typeahead_wrapper'>"
                 + "<div class='typeahead_labels'>"
                 + "<div class='typeahead_primary'><span class='pname'>" + item.name + "</span></div>"
                 + "<div class='typeahead_secondary'><span class='pprice'>Rs. "+ item.purchase_price +"</span><div>"
                 + "<div class='typeahead_secondary'>Code: "+ item.code +" / SKU: " + item.sku + "</div>"
                 + "</div>"
                 + "</div>";
                    return itm;
    },
            
    ajax: {
        url: "<?php echo base_url('items/suggest_json');?>",
        timeout: 500,
        item: '<li><a href="#"></a><p>fgfg</p></li>' ,
        scrollBar: true,
        valueField: "id",
        displayField: "name",
        triggerLength: 1,
        method: "get",
        loadingClass: "loading-circle",
        preDispatch: function (query) {
            //showLoadingMask(true);
            return {
                search: query
            }
        },
        preProcess: function (data) {
            //showLoadingMask(false);
            if (data.success === false) {
                // Hide the list, there was some error
                return false;
            }
            // We good!
            items = data.results;
            return data.results;
        }         
    }
});

function add_order_item(item_id){
alert(item_id);
</script>
[/sourcecode]

Flicker Image Search API Demo

[caption id="attachment_948" align="aligncenter" width="287"] Flicker[/caption]

[sourcecode language="javascript"]
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Flicker Image Search API Demo</title>
</head>
<body>
Search for <b>girls, dogs, cakes</b> ...etc)
<br />
<input id="searchterm" />
<button id="search">search</button>
<div id="results"></div>
<script>
$("#search").click(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: $("#searchterm").val(),
format: "json"
},
function(data) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).prependTo("#results");
if ( i == 10 ) return false;
});
});
});
</script>
</body>
</html>
[/sourcecode]

How to store an array in localStorage

This tutorial assumes that you are already familiar with HTML5  localStorage.

Although HTML5  localStorage is very useful, its usage is restricted to key value mechanism. Key and value is stored in string format despite what we need. For an instance, though you can specify a boolean type (either true or false) as the value, it is stored as a string.

What if we need to store multiple items as the value for a certain key. This can be little bit tricky if you gonna place an array directly as the value. When we scratch the surface of localStorage basic principles this is not possible. However you can come up with your own solutions that might work for you.

This tutorial demonstrates a simple way of handling above problem using json. We gonna store array as a json string. So nothing new here.

First add jQuery library as we are using some jQuery functions.

[sourcecode language="javascript"]
<script type="text/javascript">
var favorites_str = localStorage.getItem('my_favorites');
if(favorites_str == null) {
favorites = [];
favorites.push({ "name":"keshi", "id":"6" });
} else{
favorites = JSON.parse(favorites_str);
favorites.push({ "name":"sara", "id":"6" });

}
localStorage.setItem('my_favorites',JSON.stringify(favorites));
</script>

[/sourcecode]

To verify that above script is functioning please copy and run below script. It will make things easy, if you put this code in  a separate file.

[sourcecode language="javascript"]
<script type="text/javascript">
var data = localStorage.getItem('my_favorites');
if(data == null){
alert("0 favorites");
}else{
favorites = JSON.parse(data);
$.each(favorites, function(index,item){
alert(item.name);

});
}
</script>

[/sourcecode]

jQuery UI Dialog with Custom Buttons

[caption id="attachment_883" align="alignnone" width="645"] jQuery UI Dialog[/caption]

[sourcecode language="javascript"]
<div id="dialog" title="Delete">
<p>Are you sure that you want to delete this division?</p>
</div>


$("#dialog").dialog({
modal: true,
resizable: false,
width: 800,
buttons: [{
text: "Yes",
click: function() {
alert("Clicked Yes");
}
},
{
text: "No",
click: function() {
$(this).dialog("close");
}
}]

});
[/sourcecode]

Parse JSON with JQuery

JSON file - json.php

[sourcecode language="php"]
<?php
$json = '{ "students":[

{
"id":"001",
"name" :{"first" : "rahul", "last" : "mani"},
"age" : 20,
"city" : "hydrabad"
},
{
"id":"002",
"name" :{"first" : "deepu", "last" : "patel"},
"age" : 18,
"city" : "delhi"
}
]}';
echo $json;
?>
[/sourcecode]

 

[sourcecode language="html"]
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url = "json.php";
$.getJSON(url,function(json){
$.each(json.students,function(i,student){
$("#response").append(
student.id + ' '+ student.name.first + ' ' + student.age + ' ' + student.city + '<br>'
);
});
});
});
</script>
</head>
<body>
<div id="response"></div>
</body>
</html>
[/sourcecode]

Retrieve Video Details From Youtube

[sourcecode language="html"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<div>
<form id="youtubeDataQuery" action="#">
<div>
<b>Enter YouTube Video ID or URL in the text box below</b><br/>
<input id="youtubeVideoId" type="text" style="width: 70%;" value="" maxlength="200"/>
<input type="submit" style="width: 28%;" value="Fetch Video Information"/>
</div>
<br/>
<div id="youtubeDataOutput">Video information will appear here.</div>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function youtubeDataCallback(data) {
var s = '';
s += '<img src="' + data.entry.media$group.media$thumbnail[0].url + '" width="' + data.entry.media$group.media$thumbnail[0].width + '" height="' + data.entry.media$group.media$thumbnail[0].height + '" alt="' + data.entry.media$group.media$thumbnail[0].yt$name + '" align="right"/>';
s += '<b>Title:</b> ' + data.entry.title.$t + '<br/>';
s += '<b>Author:</b> ' + data.entry.author[0].name.$t + '<br/>';
s += '<b>Published:</b> ' + new Date(data.entry.published.$t).toLocaleDateString() + '<br/>';
s += '<b>Duration:</b> ' + Math.floor(data.entry.media$group.yt$duration.seconds / 60) + ':' + (data.entry.media$group.yt$duration.seconds % 60) + ' (' + data.entry.media$group.yt$duration.seconds + ' seconds)<br/>';
if (data.entry.gd$rating) {
s += '<b>Rating:</b> ' + data.entry.gd$rating.average.toFixed(1) + ' out of ' + data.entry.gd$rating.max + ' (' + data.entry.gd$rating.numRaters + ' ratings)<br/>';
}
s += '<b>Statistics:</b> ' + data.entry.yt$statistics.favoriteCount + ' favorite(s); ' + data.entry.yt$statistics.viewCount + ' view(s)<br/>';
s += '<br/>' + data.entry.media$group.media$description.$t.replace(/\n/g, '<br/>') + '<br/>';
s += '<br/><a href="' + data.entry.media$group.media$player.url + '" target="_blank">Watch on YouTube</a>';
$('#youtubeDataOutput').html(s);
}
$(document).ready(function() {
$('#youtubeDataQuery').submit(function(e) {
e.preventDefault();
var videoid = $('#youtubeVideoId').val();
var m;
if (m = videoid.match(/^http:\/\/www\.youtube\.com\/.*[?&]v=([^&]+)/i) || videoid.match(/^http:\/\/youtu\.be\/([^?]+)/i)) {
videoid = m[1];
}
if (!videoid.match(/^[a-z0-9_-]{11}$/i)) {
alert('Unable to parse Video ID/URL.');
return;
}
$.getScript('http://gdata.youtube.com/feeds/api/videos/' + encodeURIComponent(videoid) + '?v=2&alt=json-in-script&callback=youtubeDataCallback');
});
});
</script>
</div>
</body>
</html>
[/sourcecode]

How to Autocomplete world Cities

Demo

[sourcecode language="html"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="public/css/jquery.autocomplete.css" rel="stylesheet">
<script src="public/js/jquery.js"></script>
<script type="text/javascript" src="public/js/jquery.autocomplete.pack.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#city").autocomplete("http://ws.geonames.org/searchJSON", {
dataType: 'jsonp',
parse: function(data) {
var rows = new Array();
data = data.geonames;
for(var i=0; i<data.length; i++){
rows[i] = { data:data[i], value:data[i].name, result:data[i].name };
}
return rows;
},
formatItem: function(row, i, n) {
return row.name + ', ' + row.adminCode1;
},
extraParams: {
// geonames doesn't support q and limit, which are the autocomplete plugin defaults, so let's blank them out.
q: '',
limit: '',
featureClass: 'P',
style: 'full',
maxRows: 50,
name_startsWith: function () { return $("#city").val() }
},
max: 50
});

});
</script>
</head>

<body>
<form action="search.php" method="get" id="search_form">
What
<input type="text"  name="q" id="q">
Where
<input type="text"   name="city" id="city">
<button type="submit"  name="btnSearch" id="btnSearch">Search</button>
</form>
</body>
</html>


[/sourcecode]

jQuery popup dialog

[sourcecode language="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* Mask for background, by default is not display */
#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}

/* You can customize to your needs  */
.login-popup{
display:none;
background: #fff;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}

img.btn_close { Position the close button
float: right;

}

fieldset {
border:none;
}

form.signin .textbox label {
display:block;
padding-bottom:7px;
}

form.signin .textbox span {
display:block;
}

form.signin p, form.signin span {
color:#999;
font-size:11px;
line-height:18px;
}

form.signin .textbox input {
background:#666666;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
color:#fff;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font:13px Arial, Helvetica, sans-serif;
padding:6px 6px 4px;
width:200px;
}

form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000;  }

.button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color:#000;
border-width:1px;
border-radius:4px 4px 4px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color:#333;
cursor:pointer;
display:inline-block;
padding:6px 6px 4px;
margin-top:10px;
font:12px;
width:214px;
}
.button:hover { background:#ddd; }
</style>

<script type="text/javascript" src="public/js/jquery-1.7.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.login-window').click(function() {

//Getting the variable's value from a link
var loginBox = $(this).attr('href');

//Fade in the Popup
$(loginBox).fadeIn(300);

//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;

$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);

return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
</head>

<body>
<a href="#login-box">Login / Sign In</a>
<div id="login-box">
<a href="#"><img src="public/img/cross.png" title="Close Window" alt="Close" /></a>
<form method="post" action="#">
<fieldset>
<label>
<span>Username</span>
<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</label>
<label>
<span>Password</span>
<input id="password" name="password" value="" type="password" placeholder="Password">
</label>
<button type="button">Sign in</button>
<p>
<a href="#">Forgot your password?</a>
</p>
</fieldset>
</form>
</div>
</body>
</html>


[/sourcecode]

code zone jQuery Crash Course - Day 4 | Simple timed animation

[sourcecode language="javascript"]
<html>
<head>
<title>Simple Animation</title>
<style type="text/css">
#myDiv
{
width:300px;
height:200px;
background-color:#0C0;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

$('document').ready(function(){

$('#myLink').click(function(){

$('#myDiv').animate({"width" : "50px"},1000);
$('#myDiv').animate({"height" : "50px"},1000);
$('#myDiv').animate({"width" : "100px","height" : "100px"},2000);

});
});

</script>

</head>

<body>
<a href="#" id="myLink">Click Me</a>
<div id="myDiv">

</div>
</body>
</html>


[/sourcecode]

code zone jQuery Crash Course - Day 3 | Handling items and lists

Today I ' m going to show you how to create a dynamic list using jQuery. In the following code, user can add or remove item from the list simply by clicking the relevant link.

[sourcecode language="javascript"]
<html>
<head>
<title>Simple Animation</title>
<style type="text/css">

</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

$('document').ready(function(){
var size = $('option').size() + 1;

$('#addItem').click(function()
{
$('<option>' + size + '</option>').appendTo('#list');
size++;
});

$('#removeItem').click(function()
{
$('option:last').remove();
size--;
});

});

</script>

</head>

<body>
<a href="#" id="addItem">Add</a> | <a href="#" id="removeItem">Remove</a>
<select name="list"  id="list">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>

[/sourcecode]

code zone jQuery Crash Course - Day 2 | Introduction to animation basics

It 's very easy to add some animation in jQuery. You only need to change the code a little bit. Some code snippets are listed below to understand animation basics in jQuery.

[sourcecode language="javascript"]
$(document).ready(function()
{
$('div#content').hide();
$('a#link').click(function()
{
$('div#content').show('slow');
});

});
[/sourcecode]

Using slideDown() to control the fall  of content

This will cause to fall the content inside the div as a drop down content.

[sourcecode language="javascript"]
$(document).ready(function()
{
$('div#content').hide();
$('a#link').click(function()
{
$('div#content').slideDown('slow');
});

});
[/sourcecode]

Using fadeOut() to control the fading effect

[sourcecode language="javascript"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#content
{
background-color:#00F;
width:300px;
height:200px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{

$('a#link').click(function()
{
$('div#content').fadeOut('slow');
});


});
</script>
</head>

<body>
<a href="#" id="link">Click Me</a>
<div id="content">
</div>
</body>
</html>


[/sourcecode]

code zone jQuery Crash Course - Day 1

Create a new HTML file.
include the jQuery library in source code with <script>

Example 1 : Display alert message

[sourcecode language="javascript"]
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

alert("Page loaded");
});
</script>
[/sourcecode]

In jQuery, accessing HTML elements is based on CSS selectors. You can use the HTML element, element id attribute or element class name to for reference purposes.

View this file using web browser. If everything works fine, you 'll see the alert message.

Example 2 : Hide content

[sourcecode language="javascript"]
$(document).ready(function()
{
$('div#content').hide();

});
[/sourcecode]

Add the above code snippet within javaScript section and add a div container with some dummy text within body section. The div id is content for this scenario. When the browser loads the page you won't see the text within the div container.

Example 3 : Hide and display content

[sourcecode language="javascript"]
<html>
<head>

<title>jQuery Examples</title>
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
$('div#content').hide();
$('a#link').click(function()
{
$('div#content').show();
});

});
</script>
</head>

<body>
<a href="#" id="link">Click Me</a>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</body>
</html>
[/sourcecode]

code zone jQuery Crash Course

Welcome to code zone jQuery Crash Course. This is just the beginning of a comprehensive tutorial session covering jQuery technology. These tutorials are prepared with the target of those who are new to jQuery. In other words, this course is for absolute beginners. Let's get started!

What is jQuery?
This is how jQuery.com defines this technology "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

First of all, you need jQuery library which can be downloaded from http://docs.jquery.com/Downloading_jQuery
Use your favorite HTML editor for manipulating HTML and javaScript.
Copy the jQuery library into your project folder.

Day 1 - Simple jQuery application

Day 2 - Introduction to animation basics

Day 3 - Handling Items and lists

Day 4 - Simple timed animation

Day 5 - Working with images