ITORIAN BLOG

Preface Download This post shows how to create a Fancy and Animated Hide and Show of Paragraph Tag in ASP.NET using jQuery. Please assume this post as addition to my last post titled "Animated Hide and Show of Paragraph Tag using jQuery". If you review my last post, you will notice that I have used two different <a> tags that is <a href="#" class="show"> and <a href="#" class="hide">, and by using jQuery .hide() and .show() methods I switched both one by one. But it is not the right way, if jQuery has compound effects. If we use Compound Effects, only a single <a> tag will do all this, even rest coding will become short and quick. Setup Demonstration Page Let's setup the demonstration page, find the code below: Steup jQuery Methods Let's setup the jQuery methods, find the code below: This toggling can be achieved by first checking the visibility of the matched el

Preface Download In the last post, I already described how to use .hide and .show jQuery methods. In this post I am just going to add jQuery animations to existing code. So, please go through my last post to understand this post better. Here is the one (source: from my last post) screen having NO ANIMATION: Introduction Animated actions speak louder than simple text. jQuery let us add impact to our actions through a set of simple visual effects, even craft out own more sophisticated animations. To setup the demonstration page, please read this post "Simple Hide and Show of Paragraph tag using jQuery". I wish you setup your demonstration page, if so, here you go. Speeding Animations As in last post, when you click on <a href="#" class="show">Show More</a>, calls the following method $('a.show').click(function () {    $('p').eq(1).show();    $('a.show').hide();    $(&#

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 Before diving to define both terms, let's look at the image given below. In above image, there is a <div> that has <span> and <p>. For any event, there are multiple elements that could logically be responsible for reacting. When the link on this page is clicked, <div>, <span> and <a> all should get the opportunity to respond. On the other hand <p> element is not part of this interaction at all. Event Capturing It is a strategy that allow multiple elements to respond to the user interaction (like click, mouse move etc). In Event Capturing, even is first given to the most all-encompassing element and then to successively more specific ones. In the above example, first the <div> gets passed the event, then the <span> and at the end <a>. Event Bubbling It is just opposite strategy where the event gets sent to the most specific element and after this element has an opportunity to

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