ITORIAN BLOG

First of all I will talk on hide and show methods and then will setup the demonstration page. Introduction Download .hide() and .show() methods, without any parameters can be as smart shorthand methods for .css('display', 'string'), where 'string' is the appropriate display value. The effect, as might be expected, is that the matched set of elements will be immediately hidden or shown without animation. .hide() method sets the inline style attribute of the matched set of elements to display: none. Even smart part here is that it remembers the value of the display property typically blocks or inline before it was changed to none. And .show() method restores display properties of the matched set of elements to whatever they initially were before display: none was applied. Setup the Demonstration Page Let's setup the demonstration page, find the code below. Using jQuery I will hide the second <p>. In above image you

Introduction Download We web developers sometimes need to apply styles that have not been defined in a stylesheet or inline. For this jQuery offers .css() method for such occations. .css method acts as getter and setter. To get the style property, we simply pass the name of the property as a string like .css('fontSize') and to set the style property, .css() method provides two different ways: Way 1: Single Property .css('fontSize','14px') Way 2: Multiple Properties .css({   'property1': 'value1',   'property-2': 'value2' }) Let's have a HTML Content that will consume this service. < body >     < h1 > Font Size Controller </ h1 >     < div id ="fontController">       < button id ="fontController-large"> Bigger </ button >       < button id ="fontController-small"> Smaller </ button >     </

Introduction Download Comparing Web Applications to Windows Applications has been always a debate topic. Now, I'm trying to add one more topic in this debate. We can add Keyboard Shortcuts to our Web Application (Websites) so that when user types first letter, we will have the page behave as if the corresponding button were pressed/clicked. We need to know which key was pressed when our keyup handler gets triggered. We can inspect the event object for this. The .keyCode property of the event contains an identifier for the key that was pressed and for alphabetic keys; this identifier is the ASCII value of the uppercase letter. So we can create a map or object literal of letters and their corresponding buttons to press/click. When the user presses a key, we will see if its identifier is in the map and if so, trigger the action. Now, I'm going to add this feature to my one of the article " Example on jQuery Event Bubbling Situation ". Download the at

Introduction Download Before getting started here, please review the last post [ Simple Style Switcher using jQuery and CSS ], so that you can understand the basics of the jQuery codes used in this post. Complete Page Code (You will find Event Bubbling Situation in this code): <% @ Page Language ="C#" AutoEventWireup ="true" CodeFile ="Default.aspx.cs" Inherits ="Default2" %> <! 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 >     < title > Exploring jQuery </ title >     < script src ="Scripts/jquery-1.4.1.js"             type ="text/javascript"></ script >     < style type ="text/css">         .hidden { display : none ; }         .hover { cursor : point

Introduction Download This article shows how to create simple style switcher using jQuery and CSS. Look at the animated image below that we are going to produce.   Creating HTML Body Look at the body that I'll be using; you need to create the same. < body >     < div id ="NoStyleDIV" class ="switcher">     < b > Style Switcher </ b >     < br />< br />         < button id ="switcher-default">             Default         </ button >         < button id ="switcher-red">             Red         </ button >         < button id ="switcher-blue">             Blue         </ button >         < button id ="switcher-green">             Green         </ button >     </ div >     < br />< br />     < div id ="data">         < b > What is ITORIAN

Introduction This article shows how to handle multiple scripts on web page. Actually the traditional mechanism for registering even handlers through JavaScript is to assign a function to the DOM (Document Object Model) element's corresponding attribute. For example, suppose we had a function:         function doStuff() {             document.writeln( "my test line" );         } Now, we could then either assign it within our HTML markup: < body onload ="doStuff();"> </ body > Or, we could assign it from within JavaScript code:~ window.onload = doStuff(); Here is the complete design: Both approaches will cause the function to execute when the page is loaded. But the advantage of the second is that the behavior is more cleanly separated from the markup. This strategy works quite well with one function. Let's suppose we have another function:         function doStuff() {             document.writeln

Introduction In this series you are going to learn all about jQuery and CSS Selectors. This post specifically shows how to style specific cell or cells. Let's first look at the problem that we will solve in this post. Problem I have following table (screenshot): And it's HTML Markup:         < table >             < tr >                 < td >                     Name                 </ td >                 < td >                     Subject/Papers                 </ td >                 < td >                     Qualifications                 </ td >                 < td >                     Join Year                 </ td >              </ tr >             < tr >                 < td >                     Mr. Ranjeet Singh                 </ td >                 < td >                     IP, MySQL, Oracle