A K Chauhan's Blog » HTML

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>

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>

A Simple Modal Window Using CSS And JQuery

admin — Sun, 24 May 2009 16:16:41 +0000

Simple Modal Window Using CSS and jQuery

In this tutorial, I’m going to share how to create a simple attractive light weight modal window with jQuery and CSS. I like jQuery, because it makes everything so simple and so easy.

You can view the working demo here.

Right, let’s start, this example will show you how to create a modal window that will display the content of a DIV using its #ID.

For jQuery, please include jQuery file in your page where you want to use this model window.

1. HTML code

# 
# <a name="modalwindow" href="#open">Open</a>
#
<div>
#
#     
#
<div class="window">
#         <strong>Testing of Modal Window</strong> |
#
#         
#         <a class="close" href="#">Close window</a>
#
#</div>
#
#     
#
#</div>

2. CSS code

 
# /* Z-index of #hide must lower than #container .window */
# #hide {
#   position:absolute;
#   z-index:9000;
#   background-color:#000;
#   display:none;
# }
#
# #container .window {
#   position:absolute;
#   width:440px;
#   height:200px;
#   display:none;
#   z-index:9999;
#   padding:20px;
# }
#
#
# /* Customize your modal window here, you can add background image too */
# #container #openbox {
#   width:375px;
#   height:203px;
# }

3. Jquery code

# $(document).ready(function() {
#
#     //select all the a tag with name equal to modalwindow
#     $('a[name=modalwindow]').click(function(e) {
#         //Cancel the link behavior
#         e.preventDefault();
#         //Get the A tag
#         var id = $(this).attr('href');
#
#         //Get the screen height and width
#         var hideHeight = $(document).height();
#         var hideWidth = $(window).width();
#
#         //Set heigth and width to hide to fill up the whole screen
#         $('#hide').css({'width':hideWidth,'height':hideHeight});
#
#         //transition effect
#         $('#hide').fadeIn(1000);
#         $('#hide').fadeTo("slow",0.8);
#
#         //Get the window height and width
#         var winH = $(window).height();
#         var winW = $(window).width();
#
#         //Set the popup window to center
#         $(id).css('top',  winH/2-$(id).height()/2);
#         $(id).css('left', winW/2-$(id).width()/2);
#
#         //transition effect
#         $(id).fadeIn(2000);
#
#     });
#
#     //if close button is clicked
#     $('.window .close').click(function (e) {
#         //Cancel the link behavior
#         e.preventDefault();
#         $('#hide, .window').hide();
#     });
#
#     //if hide is clicked
#     $('#hide').click(function () {
#         $(this).hide();
#         $('.window').hide();
#     });
#
# });
#

Show image when its completely received by browser

admin — Sun, 17 May 2009 12:54:23 +0000

Click on Image to see demo

See demo here

In this example, I am showing how to display image when its completely received by browser. We need this kind of thing when we are changing any Image through JavaScript and want to show some loader until image is not completely receive by client browser. I am using Image onload event for this purpose. Its fires when image is load by browser. When user click on prev or next link we hide the image by adding the ‘hide‘ class to ‘‘. So, user will see the loader image which we placed in the background of image container. When browser load the next image we removed the ‘hide‘ class from ‘‘ and changed its ‘src‘ from older image to new image. I am also using jQuery for adding and removing CSS class from HTML Element. Check out the Javascript, CSS and HTML code below.

HTML Code:-

<div class="container">
    <div class="prev"><a id="prev" href="javascript:void(0);">«Prev</a></div>
    <div class="image-container"><img id="pic" src="img/blank.jpg" class="hide" /></div>
    <div class="next"><a id="next" href="javascript:void(0);">Next»</a></div>
    <div class="clear-float"></div>
</div>

CSS Code:-