Simple Page Styling

Simple jQuery Page Styling and Client Side Logic for ASP.NET Applications

jQuery can be utilized for dynamic page styling. For example:

$("#legend").addClass('bold_div');

jQuery can also be used to provide dynamic, client-side page logic. For example if a checkbox is clicked, then a textbox could be displayed for the user to provide further information. If the checkbox is unchecked, then the textbox could be hidden. For example:

$("#chkByEmail").change(function() {

if (this.checked) {

$("#txtByEmail").show();

$("#lblByEmail").show();

}

else {

$("#txtByEmail").hide();

$("#lblByEmail").hide();

}

});

As an example, take the form below:

The code to show the corresponding textboxes and label when the checkbox is clicked is below:

$(document).ready(function() {

$("#legend").addClass('bold_div');

$("#txtByEmail").hide();

$("#lblByEmail").hide();

$("#txtByPhone").hide();

$("#lblByPhone").hide();

$("#txtByFax").hide();

$("#lblByFax").hide();

$("#chkByEmail").change(function() {

if (this.checked) {

$("#txtByEmail").show();

$("#lblByEmail").show();

}

else {

$("#txtByEmail").hide();

$("#lblByEmail").hide();

}

});

$("#chkByPhone").change(function() {

if (this.checked) {

$("#txtByPhone").show();

$("#lblByPhone").show();

}

else {

$("#txtByPhone").hide();

$("#lblByPhone").hide();

}

});

$("#chkByFax").change(function() {

if (this.checked) {

$("#txtByFax").show();

$("#lblByFax").show();

}

else {

$("#txtByFax").hide();

$("#lblByFax").hide();

}

});

The $("#legend").addClass('bold_div'); is shown to illustrate how to add a style to the header "Patient Information" when the cascading style sheet class is added:

.bold_div

{

font-size: x-large;

font-weight: bold;

}

When the checkboxes are click, the corresponding textboxes and labels are revealed:

Franc Stratton's .NET (TM) Web Application, OOP, and SOA Architecture & Programming Site

A site devoted to ASP.NET (TM), SilverLight (TM) and Browser-Based WPF (TM) Applications, IIS Services, and OOP Architectures