TutorBoy Articles » jQuery

jQuery UI DatePicker Disable/Enable Specified Dates

Midhun Devasia — Fri, 03 Sep 2010 21:40:11 +0000

We all are familiar with jQuery UI DatePicker, it have many options to customize the functionality. Instead of that we can be able to use or modify some of the values/params. Some times we want to disable/enable some days in datepicker, jQuery doesn’t have any direct optional values for that. Here I’m mentioning the usage of beforeShowDay param in datepicker. The basic usage of the datepicker is $(selector).datepicker(); if you want to use params then $(‘#datepicker’).datepicker({minDate: new Date(2010, 10, 27), dateFormat: ‘mm/dd/yy’,}); beforeShowDay param will accept the a function and it pass each date to the function before its shown to the UI datepicker panel. So if the function return true then the date will active otherwise its disabled. by the help of this params we can enable or disable the dates. You can use some of the simple methods which I’m gonna describe below.

View Demo

jQuery files

Simple datepicker

$("#datepicker").datepicker();

Disable all dates till today

// get the current date
var date = new Date();
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

// Disable all dates till today
$('#datepicker2').datepicker({
		minDate: new Date(y, m, d),
		dateFormat: 'mm-dd-yy',
});

Disable all dates from today

// Disable all dates from today
$('#datepicker3').datepicker({
		maxDate: new Date(y, m, d),
		dateFormat: 'mm-dd-yy',
});

Disable all weekends

// Disable all weekends
$('#datepicker4').datepicker({
		dateFormat: 'mm-dd-yy',
		beforeShowDay: $.datepicker.noWeekends
});

Disable a list of dates

// Disable a list of dates
var disabledDays = ["9-21-2010", "9-24-2010", "9-27-2010", "9-28-2010", "9-3-2010", "9-17-2010", "9-2-2010", "9-3-2010", "9-4-2010", "9-5-2010"];
function disableAllTheseDays(date) {
	var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
	for (i = 0; i < disabledDays.length; i++) {
		if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
			return [false];
		}
	}
	return [true];
}
$('#datepicker5').datepicker({
		dateFormat: 'mm-dd-yy',
		beforeShowDay: disableAllTheseDays
});

Enable a list of dates

// Enable a list of dates
var enabledDays = ["9-21-2010", "9-24-2010", "9-27-2010", "9-28-2010", "9-3-2010", "9-17-2010", "9-2-2010", "9-3-2010", "9-4-2010", "9-5-2010"];
function enableAllTheseDays(date) {
	var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
	for (i = 0; i < enabledDays.length; i++) {
		if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1) {
			return [true];
		}
	}
	return [false];
}
$('#datepicker6').datepicker({
		dateFormat: 'mm-dd-yy',
		beforeShowDay: enableAllTheseDays
});

Disable a range of dates

// Disable a range of dates
var disabledDaysRange = [["9-1-2010 to 9-6-2010", "9-10-2010 to 9-15-2010", "10-27-2010 to 10-30-2010"], '9-17-2010'];
function disableRangeOfDays(d) {
	for(var i = 0; i < disabledDaysRange.length; i++) {
		if($.isArray(disabledDaysRange[i])) {
			for(var j = 0; j < disabledDaysRange[i].length; j++) {
				var r = disabledDaysRange[i][j].split(" to ");
				r[0] = r[0].split("-");
				r[1] = r[1].split("-");
				if(new Date(r[0][2], (r[0][0]-1), r[0][1]) <= d && d <= new Date(r[1][2], (r[1][0]-1), r[1][1])) {
					return [false];
				}
			}
		}else{
			if(((d.getMonth()+1) + '-' + d.getDate() + '-' + d.getFullYear()) == disabledDaysRange[i]) {
				return [false];
			}
		}
	}
	return [true];
}
$('#datepicker7').datepicker({
		dateFormat: 'mm-dd-yy',
		beforeShowDay: disableRangeOfDays
});

Enable a range of dates

// Enable a range of dates
var disabledDaysRange = [["9-1-2010 to 9-6-2010", "9-10-2010 to 9-15-2010", "10-27-2010 to 10-30-2010"], '9-17-2010'];
function disableRangeOfDays(d) {
	for(var i = 0; i < disabledDaysRange.length; i++) {
		if($.isArray(disabledDaysRange[i])) {
			for(var j = 0; j < disabledDaysRange[i].length; j++) {
				var r = disabledDaysRange[i][j].split(" to ");
				r[0] = r[0].split("-");
				r[1] = r[1].split("-");
				if(new Date(r[0][2], (r[0][0]-1), r[0][1]) <= d && d <= new Date(r[1][2], (r[1][0]-1), r[1][1])) {
					return [true];
				}
			}
		}else{
			if(((d.getMonth()+1) + '-' + d.getDate() + '-' + d.getFullYear()) == disabledDaysRange[i]) {
				return [true];
			}
		}
	}
	return [false];
}

$('#datepicker8').datepicker({
		dateFormat: 'mm-dd-yy',
		beforeShowDay: disableRangeOfDays
});

Enable only Friday

// Enable only Friday
$("#datepicker9").datepicker({
	dateFormat: 'dd-mm-yy',
	minDate: 1,
	beforeShowDay: enableFirday
});
// Custom function to enable friday only in jquery calender
function enableFirday(date) {
	var day = date.getDay();
	return [(day == 5), ''];
}

Note: All the above function works well with the dateformat mm-dd-yy. But you can change the values in the function mainly in this line (m+1) + ‘-’ + d + ‘-’ + y. Replace the – with your char usage the same dateformat in all the arrays and functions. Have fun

Simple Image Gallery In jQuery

Midhun Devasia — Sun, 29 Aug 2010 18:49:43 +0000

jQuery plug-in for a simple image gallery “simpleGallery()”. This will load all the images to the gallery container, then the plug-in will calculate the image count and place a navigation link and placed at the bottom-right of the gallery container. The images will change on mouse over of the links and the tooltip will shown at the top – center of the gallery container.

Download View Demo

Here is the source code and descriptions.

HTML

CSS

#simpleGallery {
	border:1px solid #d4d4d4;
	padding:5px;
	width:720px;
	height:540px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	margin:0 auto;
}
#simpleGallery img {
	z-index:0;
	display:inline;
	position:absolute;
}
.active-image{z-index:1000!important;}
#image-links, #image-tooltip{
	font-family:tahoma;
	font-size:12px;
	color:white;
	position:absolute;
	z-index:10001;
	background-color:black;
	line-height:15px;
}
#image-links a {text-decoration:none;}
#image-tooltip, #image-links, .transparent{
	filter:alpha(opacity=60); /*for IE*/
	-moz-opacity: 0.6; /*for ff*/
	opacity: 0.6;
	z-index:10001!important;
}
#image-tooltip{
	padding:5px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	margin-top:10px;
}

jQuery

$(document).ready(function(){
	// call the jquery simple gallery plugin function
	$("div#simpleGallery img").simpleGallery();
});
	// Simplte Gallery jQuery plug-in
(function($){
	$.fn.simpleGallery = function(){
		var i = 0;
		// get the navigation links
		$links = $("div#image-links");
		// oarse each item in the #simpleGallery
		this.each(function(){
			i++;
			$this = $(this);
			// set an id for each image elements
			$this.attr("id", "gotoImage"+i);
			//  Create navigation links from the image title attribute
			$links.append('#'+ i +'

');
		});
		var g = $("div#simpleGallery");
		// get the first img object
		var prev = $("div#simpleGallery :first-child");
		var toolTipDiv = $("#image-tooltip");
		toolTipDiv.html($(prev).attr("title"));
		toolTipDiv.css({"margin-left":(g.width() - $("#image-tooltip").width())/2});
		// set the position of the navigation at the bottom of the gallery container.
		$links.css({"text-align":"right","margin-top": g.height() - $links.height(), "margin-left": g.width() - $links.width()})
		// set the hover event of the links
		$("a.image-link").mouseover(function() {
		prev.removeClass();
			var imageId = $(this).attr("href");
			$(imageId).addClass("active-image");
			prev = $(imageId);
			toolTipDiv.html(prev.attr("title"));
			toolTipDiv.animate({opacity: "0"}, "fast");
			toolTipDiv.css({"margin-left":(g.width() - $("#image-tooltip").width())/2});
			toolTipDiv.stop(true, true).animate({opacity: ".7"}, "slow");
		}).mouseout(function(){
		});
	}
})(jQuery);

Download View Demo

jQuery Shaky/Vibrating Menu

Midhun Devasia — Fri, 27 Aug 2010 06:37:21 +0000

A simple Vibrating menu with jQuery and CSS. I used the ul li pattern to make the menus. When we move the mouse cursor over the a menu item, the active menu will stop the vibrating motion and other menus are start the shaky/vibrating motion. Logic behind the shaky/vibration is just changing the CSS properties of the elements, toggling the Top, Left positions of the elements in a period of time which is defined in the jQuery plug-in code.

View Demo

CSS

.menu    {margin: 0 auto;text-align: center;display:block;width: 600px;height: 60px;}
.menu ul {margin:0px;padding:0px;list-style:none;line-height:normal}
.menu li {float:left;margin-left:4px}
.menu a  {
	display: block;
	padding:5px;
	font-weight:normal;
	border:1px solid rgba(0,0,0, 0.05);
	-moz-border-radius: 2px;
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-webkit-border-radius: 2px;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	background-color: #749a02;
	color: #FFF;
	text-shadow: 1px 1px 1px rgba(255,255,255,0);
	text-decoration:none;
}

HTML


 
 Google.com
 Tutorboy.com
 FlashGamesForU.com
 Digg.com
 Yahoo.com

jQuery

// Load the jQuery

// wait for document to load
$(document).ready(function(){
 // call the shakymenu plugin function.
 $("div#menuBase ul#main li").shakyMenu();
});

jQuery Plug-in

jQuery plugin script for the shakyMenu(), function will parse all the DOM elements as per the CSS selector specified and activate the hover events for each elements. interval:30,duration:1000,shake:4 are the parameters which used. duration: duration of the shake/vibration, interval: shake period in milliseconds. Here we use the javascript setInterval, setTimeOut and clearInterval properties for the shake control.

// Here is the jQuery plugin code for the shakymenu
(function($){
	$.fn.shakyMenu = function() {
		// Setting the parameters value
		var params = $.extend({interval:30,duration:1000,shake:4}, params);
		// get the root element
		var first = this;
		// parse all the child nodes
		return this.each(function(){
		// assign the current child
		var $this = $(this);
		// set the mouse over action for the child
		$this.hover(function(){
			var t = this;
			// The interval function to make the vibration/shaky effect to the
			// other nodes.
			var I = function(){
				$(first).not(t).stop(true,false).css({position:"relative",
				left:Math.round(Math.random()*params.shake)-((params.shake+1)/2)+"px",
				top:Math.round(Math.random()*params.shake)-((params.shake+1)/2)+"px"});
			};
			// set the interval function as per the params values
			var sI = setInterval(I, params.interval);
			// function definition for the clear interval
			var cI = function(){
			// clear the interval
			clearInterval(sI);
			// and set the child positions position back to the original after the
			// animation(shaky/vibrating)
			$(first).stop(true,false).css({left:"0",top:"0"})
			};
			// set the timeout function to clear the interval function.
			setTimeout(cI, params.duration);
		}, function(){});
		});
	}
})(jQuery);//end of jquery plugin code.

View Demo

Vertical Floating Menu With Accordion Effect Using CSS & jQuery

Midhun Devasia — Wed, 23 Jun 2010 01:55:13 +0000

It is a combination of 3 types of menu styles, Floating, Sliding and Accordion with the css and jQuery. The menu will appear in the screen as a floating menu, on mouse over the menu will slide(visible) from left to outside. And on mouse out event the menu will slide to left. On the menu you can click on each item, and the sub-entries will shown with an animated effect. While window scrolling the menu will hide to left-side and floating on the same position.The two level menu style is done with nested ul, li elements.

Download Demo

HTML


 
 
 
 Recent Posts
 
 Link 1
 Link 2
 Link 3
 
 
 
 Archives
 
 Link 4
 Link 5
 Link 6

The above html is the layout of the UL li list. Replace with your content.

CSS

body {padding:0;margin:0;height:2000px;}
#floating {position:absolute;top:150px;font-size:.9em;}
#floating a {color:#FFF;text-decoration:none;}
#accordionMenu {width: 300px;}
#closeOpen {float:right;width:18px;}
#accordion {border:1px #666 solid;background-color:#DDD;margin-top:0;padding:0;float:left;list-style: none;width: 280px;}
#accordion ul {list-style: none;padding:0;display: none;}
#accordion li{cursor: pointer;padding:3px;list-style:none;font-weight:bold;background-color:#36A8FF;}
#accordion li ul li a{font-style:italic;}
#accordion li ul li{border-top:1px #666666 solid;}
#accordion li ul li:hover{background-color:#c0c0c0;}
#accordion li ul {display: none;}
#accordion li.current ul{display:block;}
#accordion .current ul{padding-left:10px;}

HTML Header

You need to download the latest jQuery and scrollTo plugin.

jQuery Script

In the above jQuery the floating and accordion are write separately, so you can disable a feature easily.

Download Demo

Chapter -2: jQuery Selectors Visibility Filter (Part III)

Midhun Devasia — Sun, 31 Jan 2010 05:30:19 +0000

:hidden Selector

Selects all elements that are hidden.
Elements can be considered hidden for several reasons:

They have a display value of none.
They are form elements with type=”hidden”.
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.

An element is assumed to be hidden if it or any of its parents consumes no space in the document. CSS visibility isn’t taken into account (therefore $(elem).css('visibiity','hidden').is(':hidden') == false).

Usage:

jQuery(':hidden')
//or
$(':hidden')

Example: http://api.jquery.com/hidden-selector/

:visible Selector

Selects all elements that are visible.
Elements can be considered hidden for several reasons:

They have a display value of none.
They are form elements with type=”hidden”.
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.

Usage:

jQuery(':visible')
//or
$(':visible')

Example: http://api.jquery.com/visible-selector/

Chapter -2: jQuery Selectors Hierarchy (Part II)

Midhun Devasia — Tue, 26 Jan 2010 10:06:28 +0000

2. Hierarchy

2.1 Child Selector (“parent > child”)

Selects all direct child elements specified by “child” of elements specified by “parent”.

// Example :
$('li > ul')

2.2 Descendant Selector (“ancestor descendant”)

Selects all elements that are descendants of a given ancestor.

// Example:
$('div p')

2.3 Next Adjacent Selector (“prev + next”)

Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.

// Example:
$('strong + em')

2.4 Next Siblings Selector (“prev ~ siblings”)

Selects all sibling elements that follow after the “prev” element, have the same parent, and match the filtering “siblings” selector.

// Example:
$('strong ~ em')

Chapter – 2 : Why jQuery Selectors?(Part I)

Midhun Devasia — Mon, 25 Jan 2010 19:59:40 +0000

Why?

jQuery requires a target to perform each action, for example, in order to hide or show an element on the page, first we must find that element. To do so, jQuery rely on jQuery’s selector expressions. Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document.

View Demo

List of jQuery Selectors.

In jQuery around 9 group of selector types are available. ie Basics, Hierarchy, Basic Filters, Content Filters, Visibility Filters, Attribute Filters, Child Filters, Forms, Form Filters.

1. Basics

1.1 Class Selector (“.class-name”) – Selects all elements with the given class.
1.2 ID Selector (“#id”) – Selects a single element with the given id attribute.
1.3 Element Selector (“element”) – Selects all elements with the given tag name.
1.4 Multiple Selector (“selector1, selector2, selectorN”) – Selects the combined results of all the specified selectors.
1.5 All Selector (“*”) – Selects all elements.
Usage example of Basics.

HTML


 Normal text
 Para text here....
 Bold text here....


 Heading
 Comment One
 Comment Two

jQuery

CSS

Chapter – 1 : Getting Started with jQuery

Midhun Devasia — Sat, 23 Jan 2010 14:33:55 +0000

1. What is $ in jQuery?

The $ represents the jQuery Function, and is actually a shorthand alias for jQuery. Prototype, jQuery, and most javascript libraries use the $ as the primary base object (or function). Most of them also have a way to relinquish the $ so that it can be used with another library that uses it. In that case you use “jQuery” instead of “$”. In fact, “$” is just a shortcut for “jQuery”. JavaScript allows upper and lower letters, numbers, and $ and _. The $ was intended to be used for machine-generated variables (such as $0001).

2. How to use?

You can load the jquery class from Google AJAX Libraries API.

or
You can also download the jQuery libraries files from the jQuery site http://hinturl.com/jquerydownload to your application folder and include directly to the code.

3. Write your first jQuery program?

Here the $(document) is the jQuery function which passes the document as the “selector“. And the .ready() is the event for document object. Refer http://hinturl.com/jquery-doument-events for other events.

And the above code you can write in this way also.

$() is replaced with jQuery().

jQuery: Web application framework – Tutorial

Midhun Devasia — Sat, 23 Jan 2010 11:40:49 +0000

jQuery: Web application framework

I wish to write few lines about jQuery before we starts.
jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used at about 20% of the 10,000 biggest websites, jQuery is the most popular JavaScript library in use today.

jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library.

jQuery contains the following features:

DOM element selections using the cross-browser open source selector engine Sizzle, a spin-off out of the jQuery project

DOM traversal and modification (including support for CSS 1-3)

Events

CSS manipulation

Effects and animations

Ajax

Extensibility through plugins

Utilities – such as browser version and the each function.

I think this is enough for today’s class . The Tutorial covers all the basic functions and requirements to develop a jquery plugin or component from scratch. So please go through all the related topics from the tutorial which is tagged as jquery from scratch.