Posts

Showing posts with the label CSS

Using Shortcut Key in Web Applications using jQuery

Image
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

Example on jQuery Event Bubbling Situation

Image
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

Simple Style Switcher using jQuery and CSS

Image
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

Handling Multiple Scripts on Web Page

Image
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

jQuery and CSS Selectors Part-6

Image
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               

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System

Lambda two tables and three tables inner join code samples