A K Chauhan's Blog » JavaScript

Change text box value in uppercase using jQuery

admin — Tue, 27 Sep 2011 00:15:27 +0000

We can bind this functionality with text box KeyUp event. So, when type anything this code will change the text box value in uppercase with each keystroke.

Code Snippet:-

<script type="text/javascript">
$(document).ready(function() {
	$('#variable').keyup(function() {
		$(this).val($(this).val().toUpperCase());
	});
});
script>

jQuery get selected text from SELECT (or DROPDOWN) list box

admin — Thu, 08 Sep 2011 14:49:22 +0000

Most of the time in JavaScript we want to do following things with Select (or dropdown) list box.

- Get the value of selected option
- Get the text of selected option
- Get the text of option using its value

We can use jQuery for all of the above tasks. jQuery provide very simple one line solution for all of them. Find below code snippet of all three one by one.

Code Snippet:

// Select list box
<select id="dropdown">
    <option value="0">Sundayoption>
    <option value="1">Mondayoption>
    <option value="2">Tuesdayoption>
    <option value="3" selected="selected">Wednesdayoption>
    <option value="4">Thursdayoption>
    <option value="5">Fridayoption>
    <option value="6">Saturdayoption>
select>
 
// Get the value of selected option
var selectedvalue = $('#dropdown').val();
alert(selectedvalue); // 3
 
 
// Get the text of selected option
var selectedText = $('#dropdown option:selected').text();
alert(selectedText); // Wednesday
 
// Get the text of option using its option value (eg: 5)
var textThroughValue = $("#dropdown option[value='5']").text();
alert(textThroughValue); // Friday

How know Base Path of Drupal in JavaScript

admin — Mon, 17 May 2010 10:45:54 +0000

Sometimes you want to know about the Base Path of your Drupal installation in JavaScript. You may want to know about this path for sending the AJAX request at correct URL relatively, load the image or some other type of file on client side through JavaScript etc.

Drupal provide a variable called Drupal.settings.basePath for this purpose in JavaScript. But this variable is only available if you include any custom JavaScript file or JavaScript block in your module. By default Drupal doesn’t include the ‘jquery.js‘ and ‘drupal.js‘ file in generated output. It only add these files if you add your custom JavaScript file or JavaScript block. We can include our custom JavaScript file in Drupal like this:-

drupal_add_js(drupal_get_path('module','my_module'). '/my_module.js');

The my_module.js file should reside in same directory where my_module module exist. This will force Drupal to add jquery.js and drupal.js files in output.

These two files initialize the Base Path variable. In drupal.js file, on top you can see the initialization of setting object in Drupal object. Like this:-

var Drupal = Drupal || { 'settings': {}, 'behaviors': {}, 'themes': {}, 'locale': {} };

Drupal generate some JavaScript code in Script block inside head tag of each page for extending the settings object with the help of jQuery. Like this:-

jQuery.extend(Drupal.settings, { "basePath": "/" });

You can test the Base Path by adding following code in my_module.js file.

$(document).ready(function() {
	alert(Drupal.settings.basePath);
});

This will alert the Base Path for Drupal installation after loading of the page.

Create Simple Carousel using jQuery

admin — Mon, 15 Feb 2010 03:42:15 +0000

Carousel

You can see the working demo here.

Carousel is a way to present content in the form of slideshow on web page. Here I’m showing how easily you can create a horizontal carousel using jQuery. You can play with the given code and easily create vertical carousel, circular carousel, auto-scrolling carousel etc.

I’m using jQuery for animation. So, you need jQuery JavaScript library for it. You can download latest jQuery JavaScript library from jquery.com.

So, how it work.

Your basic structure of HTML for Carousel should be like this:-


   
    	some content...
        some content...
        some content...
        some content...
        some content...
        some content...
        .....

What you need to do before applying “my_carousel” ID to your Carousel DIV.

1. Put any HTML content which you want to display in your LI’s.
2. Create CSS for your Carousel DIV.
3. You also need two images, or button to scroll your content in left and right direction.
4. Assign “btnprev” class to your left button or image.
5. Assign “btnnext” class to your right button or image.
6. Assign “my_carousel” ID to you Carousel DIV.

How JavaScript Code work:-

So, when browser load the page JavaScript look for “my_carousel” ID in HTML and apply all the require attributes and events to your DIV, UL, and LI.

Important JavaScript variables and their purpose:-

step – How many LI’s you want to scroll on click of left and right button.
current – Index or Number of left most visible LI in carousel.
maximum – Total number of LI in carousel.
visible – Number of visible LI’s.
speed – Animation speed.
liSize – Width of one LI in pixels.
carousel_height – Carousel DIV height.
ulSize – Width of UL. You can calculate it like this liSize * maximum.
divSize – Width of CArousel DIV. You can calculate it like this liSize * visible.

Assign require attributes to DIV, UL, and LI.

$('#my_carousel').css("width", divSize+"px").css("height", carousel_height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
 
$('#my_carousel ul').css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute");

Here we changed the width, height, visibility, overflow, and position of Carousel DIV. The Carousel DIV overflow = hidden property is very important here, through it we are just showing the require(visible) LI’s which we want to show at a time. We just hide the remaining LI’s.

We also changes the width, left and position of UL.

Assign Click event to left and right buttons/images

Left button/image

$('.btnprev').click(function() { 
	if(current - step < 0 || current - step > maximum - visible) {return; }
	else {
		current = current - step;
		$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
	}
	return false;
});

So, we have assigned a click event on previous button. So, we are first checking the index of current LI. If the current LI is the first LI we will not do anything. We will simply return from the function. If the current LI is not the first LI then scroll the content of UL to left hand side by using the jQuery “animate” function. For more information about animate function click here. And we also changed the current to current left most most visible LI.

Right button/image

$('.btnnext').click(function() { 
	if(current + step < 0 || current + step > maximum - visible) {return; }
	else {
		current = current + step;
		$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
	}
	return false;
});

Similarly we assigned the clicked event on next button and followed the same logic what we used for previous click. We just changed it slightly to check last LI when we click on next button. If the current is last LI we will do nothing.

Complete JavaScript Code:-

<script language="javascript">
	$(function() {
		var step = 2; 
		var current = 0; 
		var maximum = $('#my_carousel ul li').size(); 
		var visible = 2; 
		var speed = 200; 
		var liSize = 331;
		var carousel_height = 161;
 
 
		var ulSize = liSize * maximum;   
		var divSize = liSize * visible;  
 
		$('#my_carousel ul').css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute");
 
		$('#my_carousel').css("width", divSize+"px").css("height", carousel_height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
 
		$('.btnnext').click(function() { 
			if(current + step < 0 || current + step > maximum - visible) {return; }
			else {
				current = current + step;
				$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
			}
			return false;
		});
 
		$('.btnprev').click(function() { 
			if(current - step < 0 || current - step > maximum - visible) {return; }
			else {
				current = current - step;
				$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
			}
			return false;
		});
	});
script>

Round Number upto 2 decimal places in JavaScript

admin — Sat, 16 Jan 2010 22:41:33 +0000

JavaScript’s Math.round() function doesn’t provide facility to round off a number up to 2 or more decimal places. So, here I’m showing a simple JavaScript code using which you can round off numbers up to 2 decimal places. You can change this for more decimal places.

var retailPrice = 9.99;
var percentage = 0.2525; /* 25.25% */
var decimalPlace = 100; /* 100 for 2 decimal place. 1000 for 3 decimal place.*/
 
var wholeSalePrice = Math.round(percentage * retailPrice * decimalPlace) / decimalPlace;
 
alert(wholeSalePrice); /* This will show 2.52 */

JavaScript List Search using jQuery

admin — Thu, 29 Oct 2009 20:58:27 +0000

List Search using jQuery

Here in this example we are using jQuery to filter the list of products. We have list of products in UL and LI. We have associated the “KeyUp” event on the top search textbox. So when somebody type in the textbox we filter the list on the basis of entered value.

We are using the RegExp for comparing the string for matching characters. First we created the regular expression “rg” from the given text and compare the product name (string) with the help of search function.

The search function return the position of string where match is found or ‘-1′ in case of no match.

So, we selected all the LI’s exist inside the ‘product_list‘ ID and match each product name one by one. We hide the LI if its text not match the current search text and display the LIs with matching text.

HTML Code: -


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sales Vu</title>
<link rel="stylesheet" href="pm-common-new.css" type="text/css" />

</head>
<body style="padding-left:20px;">
<div class="top-bar">
    <div class="top-left-corner"><img src="images/top-left-corner.png" /></div>
    <div class="top-mid-bg">Product Management</div>
    <div class="top-right-corner"><img src="images/top-right-corner.png" /></div>
</div>
<div class="body-part">
    <div class="body-part-top">
        <div class="search-container">
            <div class="search-box" style="float:left; width:257px;">
                <div style="float: left; width: 70px; padding-top: 4px; font-weight: bold;">Search </div> 
                <div class="text-field-box">
                    <input name="" type="text"  id="search" autocomplete="off" class="search-box-bg" />
                </div>
                <div class="text-field-cancel-button">
                    <a href="javascript:void(0);" id="search_clear" ><img src="images/search-box-cancel.png" border="0" id="search_clear" /></a>
                </div>
            </div>
        </div>
        <div class="modifier-product">
            <div class="modifier-product-right" style="float:left;">
                <div class="modifier-product-right-top">
                    Product
                </div>
                <div class="modifier-product-right-mid">
                    <div class="modifier-product-right-detail" id="product_list">
                        <div class="modifier-product-right-detail-heading">
                            <div class="product-list-heading">Product</div>
                            <div class="price-list-heading">Price ($)</div>
                        </div>
                        <div class="product-list">
                            <ul>
                            	<li>
                                    <div class="product">Banana Split</div>
                                    <div class="price">3.00</div>
                                </li>
                                <li>
                                    <div class="product">Bird Lite</div>
                                    <div class="price">2.45</div>
                                </li>
                                <li>
                                    <div class="product">Butter</div>
                                    <div class="price">2.00</div>
                                </li>
                                <li>
                                    <div class="product">Chicken With Coke</div>
                                    <div class="price">3.45</div>
                                </li>
                                <li>
                                    <div class="product">Chips With Coke</div>
                                    <div class="price">3.75</div>
                                </li>
                                <li>
                                    <div class="product">Corono Lite</div>
                                    <div class="price">2.00</div>
                                </li>
                                <li>
                                    <div class="product">Eggs</div>
                                    <div class="price">0.50</div>
                                </li>
                                <li>
                                    <div class="product">Limca</div>
                                    <div class="price">1.05</div>
                                </li>
                                <li>
                                    <div class="product">Sprite</div>
                                    <div class="price">1.20</div>
                                </li>
                                <li>
                                    <div class="product">test product</div>
                                    <div class="price">3.00</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="modifier-product-right-bottom">
                     
                </div>
            </div>
        </div>
    </div>
    <div class="body-part-bottom">
        <img src="images/body-bottom.png" />
    </div>
    </div>
</body>
</html>
<script src="jquery.js" type="text/javascript"></script>
<script src="pm_new.js" type="text/javascript"></script>

JavaScript Code: -

// JavaScript Document
$(document).ready(function () {
	$('#search').keyup(function(event) {
		var search_text = $('#search').val();
		var rg = new RegExp(search_text,'i');
		$('#product_list .product-list .product').each(function(){
 			if($.trim($(this).html()).search(rg) == -1) {
				$(this).parent().css('display', 'none');
 				$(this).css('display', 'none');
				$(this).next().css('display', 'none');
				$(this).next().next().css('display', 'none');
			}	
			else {
				$(this).parent().css('display', '');
				$(this).css('display', '');
				$(this).next().css('display', '');
				$(this).next().next().css('display', '');
			}
		});
	});
});
 
$('#search_clear').click(function() {
	$('#search').val('');	
 
	$('#product_list .product-list .product').each(function(){
		$(this).parent().css('display', '');
		$(this).css('display', '');
		$(this).next().css('display', '');
		$(this).next().next().css('display', '');
	});
});

Initialize LightBox using JSON string and Run it from Flash

admin — Tue, 25 Aug 2009 06:19:50 +0000

Lightbox is the most popular way of showing large image on click on thumbnail over the web. Lot of websites are using the LightBox. Normally, We use lightbox using the “rel” attribute of anchor tag. We use lightbox this way:-

<a href="images/image-1.jpg" rel="lightbox" title="thumb"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

Here, we provided the “rel” attribute as “lightbox” in hyperlink. What lightbox script do is when page load completed its check all the hyperlinks of page and if rel=”lightbox” is exists them it push this link into an array.
Lightbox extract the “href” and “title” attributes of each link having rel=”lightbox” and push all of them into array. “href” is normally the URL of larger image. Lingtbox also add “click” event on all of these hyperlinks and when user click on any particular thumbnail the lightbox starts.

Here, I’m showing a way in which you can initialize the lightbox by using the JSON string. Basically, this JSON string contains the “href” and “title” information which we want to show. We can create this string dynamically using any server side scripting language. Here is one of sample JSON string.

<script language="javascript">
	var img_json = [['pics/photo-80.jpg', 'Title 01'],['pics/photo-128.jpg', 'Title 02'],['pics/photo-160.jpg', 'Title 03'],['pics/photo-165.jpg', 'Title 04'],['pics/photo-205.jpg', 'Title 05'],['pics/photo-206.jpg', 'Title 06']];
script>

You can learn more about JSON here.

We also need to do some small changes in lightbox javascript file so it use our JSON string for image array instead of create array by checking the “rel” attribute in whole page.

You can download the customized lightbox javascript file from here.

You can see the working demo here.

1. Remove the “imageLink” parameter from start function because now we not starting LightBox by not clicking any thumbnail.

start: function(imageLink)

function to

start: function()

2. Now we are initializing the “imageArray” using JSON string.

this.imageArray = [];

this.imageArray = img_json;

3. Comment these line of code inside start function bacause we not want to check whole page links for lightbox.

/*if ((imageLink.rel == 'lightbox')){
           // if image is NOT part of a set, add single image to imageArray
           this.imageArray.push([imageLink.href, imageLink.title]);         
  } else {
            // if image is part of a set..
            this.imageArray = 
                $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
                collect(function(anchor){ return [anchor.href, anchor.title]; }).
                uniq();
 
            while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
  }*/

4. Add function startLightBox() at the end of Lightbox class. This function start the lightbox when we click on the link having id=”start”.

startLightBox: function() {
	var th = this;
	Event.observe($('start'), 'click', function () {
	 	th.start();
	});
}

5. Add this line in initialize() function to call “startLightBox()” function which create the click event on link having id=”start”.

this.startLightBox();

After completing all the five changes in lightbox.js you need to create a link with id = “start” in your HTML file. When you click on this link its starts the LightBox. Here is the code for HTML file.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Initialize LightBox using JSON string and Run it from Flash</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<a href="#" id="start">Start LightBox</a>
</body>
<script language="javascript">
	var img_json = [['pics/photo-80.jpg', 'Title 01'],['pics/photo-128.jpg', 'Title 02'],['pics/photo-160.jpg', 'Title 03'],['pics/photo-165.jpg', 'Title 04'],['pics/photo-205.jpg', 'Title 05'],['pics/photo-206.jpg', 'Title 06']];
</script>
</html>

Manage (Add, Edit, & Delete) cookies in jQuery

admin — Wed, 15 Jul 2009 15:46:45 +0000

Setting and deleting cookies with jQuery is really easy (especially in comparison to regular JavaScript) but this feature is not included in the jQuery core. For this we need a plug-in. This post shows how to set and get the value of cookies with jQuery.

First download the jQuery cookie plugin for here: http://plugins.jquery.com/project/Cookie

Set a cookie

Setting a cookie with jQuery is as simple as this, here we are creating a cookie called “example” with a value “demo”:

$.cookie("example", "demo");

This is a session cookie and will be destroy when user close his/her browser. To make the same cookie for suppose 7 days. We can do it like this:

$.cookie("example", "demo", { expires: 7 });

The above example will create the cookie at the root level. If you wanted to make it apply only to e.g. “/admin” and make it for 7 days you can do it like this:

$.cookie("example", "demo", { path: '/admin', expires: 7 });

Get the cookie’s value

Getting the cookie’s value is also very easy in jQuery. The following would alert the value of “example” cookie:

alert( $.cookie("example") );

Delete the cookie

And finally, to delete a cookie set its value to null.
Note:- Setting it to e.g. an empty string doesn’t remove it; it just clears the value.

$.cookie("example", null);

Unscape HTML in JavaScript

admin — Mon, 13 Jul 2009 07:03:44 +0000

This function strips tags and converts the entity forms of special HTML characters to their normal form. I created this function with the help of code of Prototype JavaScript library.

<script language="javascript">
function unscapeHTML(str) {
	var div = document.createElement('div');
    div.innerHTML = str.replace(/<\/?[^>]+>/gi, '');
 
	if (div.childNodes[0]) {
		if (div.childNodes.length > 1) {
			var retStr;
 
			for (var i = 0; i < div.childNodes.length; i++) {
				retStr += div.childNodes[i].nodeValue;
			}
 
			return retStr;
		}
		else {
			return div.childNodes[0].nodeValue;
		}
	}
	else {
		return '';
	}
}
script>

How you can use it.

<script language="javascript">
var1 = 'x > 10';
alert(unscapeHTML(var1));
// This will alert 'x > 10' 
 
var2 = 'Pride & Prejudice
';
alert(unscapeHTML(var2));
// This will alert 'Pride & Prejudice'
script>

Getting Browser Information using JQuery

admin — Tue, 23 Jun 2009 14:26:48 +0000

One day every browser will act in same way and support same web standards. However, that’s not today. In a sufficiently complicated web application, it’s important to know which browser user is using so we can know which JavaScript functions are available and which CSS properties it supports. Here, I am showing how you know about the users browser using JQuery. We can find lot of information about users browser like its name, version number etc through jQuery.

At the highest level, JQuery offers an object called browser that contains some simple flags to determine which one of the major browsers is currently being used – Safari, Opera, IE, or Mozilla.

   $(document).ready(function(){
 
    var browser;
    if($.browser.mozilla)
      browser = "Firefox";
    else if($.msie)
      browser = "Internet Explorer";
    else if($.browser.opera)
      browser = "Opera";
    else if($.browser.safari)
      browser = "Safari";
    else
      browser = "Unknown";
 
    $('#browserName').append(browser);
  });

Create a DIV so in your page so you can see the output of this JavaScript.

 <div id="browserName">Your Browser: </div>

When you execute the code, the output should look something like below. If you are using Safari.

Your Browser: Safari