CSS to Less

CSS to Less - It's about what are the motivating factor, which Less have that encourage developer to make use of this extended languages. Below post is not provide details information about Less, it provide introduction to features provided by Less. Post is helpful to those who are looking for brief introduction to features of Less, higher language developer who work sometimes with CSS and for the beginner.

CSS

CSS (Cascading style sheet) - it used with HTML element to to beautify web pages of web application. It use to define set of style(s) (i.e set of style rules), for mostly each element in web page to beatify each element. Style defined with CSS , gives each element same look. For Example

h1 {
 Color: red;
}

this style rule give each h1 element black color. If style changes i.e. color changed from read to green then it will affect all h1 element in web pages of web application.

Above brief explanation of what is CSS and why to use it in web application (find full details: https://www.w3.org/Style/CSS/Overview.en.html).

Following problem arise once CSS implemented for application

1. Every style rule go in one file, File size increases.
2. Modification becomes difficult Ex. same color used in multiple styles then one need to go every where and need to modify it.
3. If style sheet divided in multiple style sheet , browser create multiple request to download each individual CSS file.
4. If style sheet divided in multiple files then , modification of common color, font used becomes too difficult.
5. Nested element or Pseudo Style rules are difficult to understand and maintain as CSS file increases.

Less

Less (Leaner style sheet) which is CSS extension.  Less, have features like allow to define Variables & Mixins (like functions), Set of Inbuilt function, Support for arithmetic operators,  Tools supported Create single CSS file as output from multiple Less files etc. So feature provided by Less is some what equal to programming language and that in turn very much helpful to developer who are working more on programming language & less on CSS styles.

Browser only understand HTML + Javascript + CSS style rules when loading web page of application,  which means that it doesn't understand Less. So, Like Typescript transpile to Javascript with help of transpilers. Less style rules get converted to CSS style rules as output by various available transpilers/compilers (check list here : http://lesscss.org/tools/#online-less-compilers).

Following way Less helps to overcome problem associated with CSS.

1. Difficulty in modification of style property which having same value and located in different rules. Ex. Colors, Font-Size, etc.
   
   For example below CSS, each element style rule have color property. Now if there is need of changing this color value "#003152" to "red". As part of color changing exercise CSS developer needs to locate each rule and have to replace color value to red.
   
   

   h1 {
    color: #003152;
   }
   body {
       color: #003152;
   }
   a:active {
       color: #003152;
   }
   

   
   Locating each rule and changing color to "red" can lead to a problem if CSS file size is big or if the CSS style rules are located in different files.
   
   Solution - Less Variables
   This can be resolve in Less by making use of variable, as given in below code.
   
   

   @color: #003152;
   
   h1 {
    color:@color;
   }
   body {
       color: @color;
   }
   a:active {
       color: @color;
   }
   

   
   So one value of color stored in variable , change needs be done is change value of variable.
   Other use cases of variable is as below
   
   

   @color: red;
   @background-color: black;
   @base-font-size : 10px;
   @images: "./assets/images";
   @font-family: "Times New Roman", Times, serif";
   
   h1 {
    font-size: @base-font-size + 10px;
   }
   body {
       color: @color;
       font-family: @font-family;
       font-size: @base-font-size;
       background-color: @background-color;
   }
   .input {
     font-size: @base-font-size + 2px;
   }
   a:active {
       color: @color;
       font-size: @base-font-size + 2px;
   }
   .button {
     background-image: url("@{images}/backimage.ico");
   }
   

   
   Point to not in above Less code
   
   • As listed in above variable in LESS , allows to store  color values, string values, numeric values alone and with units (like %, px, etc.).
   • Less allows to perform numeric operation like =, - on numeric values Ex. @base-font-size stores numeric value and + operation performed in .input,he style rules.
   • Less allows string interpolation , Ex. in above code @image variable defines path , which can be used any where like used in .button style rule
   
   Advantage
   
   • Less Variable allows to store common values which can be used in multiple style rules not in single file but one can use same variable in multiple files (how to use in multiple files discussed below).
   • Developer can store common and keep changing values in variable, so if have to perform modification just changing variable works.
   • Less variable can easily allows to achieve multiple colored base Theme  as just changing variable values different value is easy task.
   • Variables in Less makes life too easy for developer who is working on CSS , specially those developer who are working on programming language like C#,java and some time work with CSS.
   
   
2. CSS style rules with common property need to be repeated in each rule.
   
   In CSS even though multiple style rules use same property and with same value , its required to be repeated that in each style rule as given in below example
   
   

   input {
       font-size: 12px;
       background-color: white; 
       height: 20px;
   }
   
   select {
       font-size: 12px;
       background-color: white; 
       height: 25px;
   }
   
   select[multiple] {
       font-size: 12px;
       background-color: white; 
       height: 250px;
   }
   

   
   so in above example each property get repeated for different input elements except height property which is having different value.
   
   Solution - Less Mixins
   Less solves this problem by providing Mixins. Below code show how Mixins solve problem of common properties.
   
   

   .input-base {
       font-size: @base-font-size + 2px;
       background-color: @input-backcolor; 
   }
   
   input {
       .input-base();
       height: 20px;
   }
   
   select {
       .input-base();
       height: 25px;
   }
   
   select[multiple] {
       .input-base();
       height: 250px;
   }
   

   
   so in style rules , .input-base is treated as Mixin which get called by all input style rules just to make use of common properties.
   
   Mixins like function in programming language , takes argument as input and also allows arguments with default value as in below code.
   
   

   .input-base (@height, @font-size: @base-font-size) {
       font-size: @font-size + 2px;
       background-color: @input-backcolor; 
       height:  @height;
   }
   
   input {
       .input-base(20px);
   }
   
   select {
       .input-base(25px);
   }
   
   select[multiple] {
       .input-base(250px, @base-font-size + 2px);
   }
   

   
   So in above code Mixin .input-base takes two argument like function as input. Based on input value Mixins copy property values to given style rule.
   
   Less Extend
   Less also have one another way for above problem, which making use of &:extend(.stylerule), like as given in below code.
   
   

   .input-base {
       font-size: @base-font-size + 2px;
       background-color: @input-backcolor; 
   }
   
   input {
       &:extend(.input-base);
       height: 20px;
   }
   
   select {
       &:extend(.input-base);
       height: 25px;
   }
   
   select[multiple] {
       &:extend(.input-base);
       height: 250px;
   }
   

   
   as name suggest extend , it extends CSS style rule. It's similar to inheritance in higher level programming language like C#,Java.
   
   Difference between &:extends and Mixins are
   
   • Mixins works like function i.e. takes argument as input, which is not possible with extend.
   • The way CSS generated by Mixins and Extend.
     
     Mixins generate CSS as below 
     

     input {
         font-size: 12px;
         background-color: white; 
         height: 20px;
     }
     
     select {
         font-size: 12px;
         background-color: white; 
         height: 25px;
     }
     
     select[multiple] {
         font-size: 12px;
         background-color: white; 
         height: 250px;
     }
     

     
     So Mixins copies each properties in each style rule , so it increase size of style sheet.
     
     Extend generate CSS as below
     

     .input-base,
     input,
     select,
     select[multiple] {
       font-size: 12px;
       background-color: white;
     }
     input {
       height: 20px;
     }
     select {
       height: 25px;
     }
     select[multiple] {
       height: 250px;
     }
     

     
     So extend generate less style sheet and instead of copying each property in each style rule it actually extends existing style rule.
     
   
   
3. Difficulty in maintaining Nested element style rules.
   
   In html document consist of nested element (like parent-child element). CSS allows to set style rule for this nested element relationship Example.  <li> child element under parent <ui> or <a> child element under <li> ,  <li> child element under parent <ui>. Example given below
   
   

   <ul>
     <li>
       <a href="http://google.com/" rel="noopener" target="_blank">google</a>
     </li>
     <li>
       <a href="http://localhost:8080/abc.com" rel="noopener" target="_blank">Test</a>
     </li>
   </ul>
   

   
   
   
   Below is style rules for nested elements
   
   

   ul li {
     font-size: 13px;
     color: red; 
   }

   ul li a {
     font-size: 13px;
     color: blue; 
   }
   

   Problem with above is very difficult to understand and read if developer is not aware of CSS nested styling rules.
   
   Less allows to write this nesting style rules as below which is easy to understand nesting (parent-child relation) and read.
   
   

   ul {
       li {
          a {
             font-size: @base-font-size;
              color: @font-color;
           }
       }
   }
   

   
   Above structure of CSS easily tell that a is child of li, and li is child of ui. and this will get apply to nesting structure which is like ui --> li --> a.
   
   
4. Difficulty with managing element pseudo style rules.
   
   CSS force to write separate rules for each pseudo class like anchor tag a element which allows to add style rule on focus or hover or input element allows to add style rule for focus.
   
   Example CSS style rules for anchor tag a & hover on anchor tag, and input tag & focus on input
   
   

   a {
     color: #b3b3b3;
   }
   a:active {
     color: #003152;
   }
   input[type=text] {
     width: 100px;
     transition: width .35s ease-in-out;
   }
   input[type=text]:focus {
     width: 250px;
     border: 2px solid green;
   }
   

   
   Solution - Less nesting rules can easily encapsulate pseudo element style rules as given below.
   
   

   input[type=text] {
     width: 100px;
     transition: width .35s ease-in-out;
     &:focus {
        width: 250px;
        border: 2px solid green;
     }
   }
   
   a {
     color: #b3b3b3;
     &:active {
       color: #003152;
     }
   }
   

   
   
5. Allows to in smaller manageable CSS files
   
   CSS allows to create smaller style rules files separately for different part of page like
   
   global.CSS
   navbar.CSS
   form-element.CSS
   etc.
   
   and with help of import statement CSS allows to import this files in each other or in one file. Example :
   
   In Application.CSS
   @import "global.css";
   @import "navbar.css";
   @import "form-element.css";
   
   But disadvantage are
   • Separate http request got created for each file when application loaded in browser and it will increase network traffic. Which means CSS doesn't combine all CSS file in one file.
     
     
     
   • One more disadvantage is if there need of changing common property like color , one needs to open each file and have locate style property to make change.
   
   Less allows importing of files same as CSS , but in LESS tools merge all different files as generate single CSS file.
   
   global.less
   variables.less ( this file contains all variables which is used by common properties like color, font-size, background color etc.)
   navbar.less
   form-element.less
   
   In Application.CSS
   @import "variables"
   @import "global"
   @import "navbar"
   @import "form-element"
   
   this will generate one file only, which get downloaded in on http reuqest. And as all common property value is replaced by variables which is stored in variable.less file , managing and changing common properties also becomes easy.
   
   
6. Less having some set of inbuilt function.
   
   Less have lot of inbuilt function that also very helpful, which are also helpful.
   
   Example: below function helps to get different colors.
   

   color: darken(@body-color, 20%);
   border-color: lighten ( @body-color, 20%);
   

   
   there are lot of different function in Less helps in build styles for properties, find all functions here : http://lesscss.org/functions/

Conclusion
CSS allows to beautify html pages but extension like Less is very helpful. Less helps to overcome issues one face with CSS, also provide easy to understand, manage and simplify style rules with the help of feature like variables, mixins, extends, nesting structure, in build set of functions etc. However above is just start or overview of Less. Read in depth here : http://lesscss.org/features/

CSS Selector

In this post is about CSS selector and how it woks. Following is explanation of most of the selector that is used in CSS.

In the following first is css example and than html code on which it will work, so to try by yourself create html page and put the css as well as related Html and see the result. In most of the select I provided demo link where you can visit and see the result.

In below post you might find some new CSS selector that are the part of new CSS3. All of the below examples and demo tried by me on latest Chrome version.

.Class -: Select all the element with given class name.
CSS

.MyIntro
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div class="MyIntro">
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>

---

#id -: Select all the element with given id name.
CSS

 #MyIntro
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div id="MyIntro">
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>

Point to Note : You can have more than one element having same classname in HTML page but you can have only one element with the ID.

---

HTMLElement - Select all the html element which name is given.
CSS

 p
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div>
<p>My name is Pranay Rana.</p>
<p>I am working as Soft Engg.</p>
</div>

---

HtmlElement HtmlElemnt - Select all the html element which are in html element.
CSS

div p
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div >
<p>My name is Pranay Rana.</p>
<Span>
 <p> data </p>
</Span>
</div>
<p>I am working as Soft Engg.</p>

in this example all p element inside div get highlighted with read color, but p element outside div doesnt get affected.

Demo 

---

HtmlElement > HtmlElemnt - Select all the html element which are child of html element.
CSS

div > p
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div >
<p>My name is Pranay Rana.</p>
<Span>
 <p> data </p>
</Span>
</div>
<p>I am working as Soft Engg.</p>

in this example all p element which are child of div get highlighted with read color, but p element which are not child of div doesnt get affected.

Demo 

---

HtmlElement + HtmlElemnt - Select all the html element which are immediate after html element.
CSS

div + p
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div >
<p>My name is Pranay Rana.</p>
</div>
<p>I am working as Soft Engg.</p>
<p> data </p>

in this example p element which is immediate after div get highlighted with read color, in this example "I am working as Soft Engg." this text get highlighted.

Demo

---

HtmlElement ~ HtmlElemnt - Select all the html element which are precedes html element.
CSS

div ~ p
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div >
<p>My name is Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>I am working as Soft Engg.</p>
<p>My Demo Page.</p>

in this example p element which is precedes div get highlighted  with read color, in this example "I am working as Soft Engg." and "My Demo Page." text get highlighted.

Demo

---

[attribute] - Select all the html element which is having attribute.
CSS

[data-name]
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div >
<p data-name="pranay">My name is Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo">My Demo Page.</p>

in this example any element which is having attribute "data-name"div get highlighted with red color, in this example "My name is Pranay Rana." and "My Demo Page." text get highlighted.

Demo

---

[attribute = data] - Select all the html element which is having attribute value equal to data.
CSS

[data-name = 'demo']
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div >
<p data-name="pranay">My name is Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo">My Demo Page.</p>

in this example any element which is having attribute "data-name" and value = "demo" get highlighted  with red color, in this example "My Demo Page." text get highlighted.

Demo

---

[attribute ^= data] - Select all the html element where attribute value begins with data.
CSS

[data-name ^= 'pra']
{
  font:15px arial,sans-serif;
  color:red;
}

So with the above html when apply this "My name is Pranay Rana."  text is get highlighted because its "data-name" attribute value begining with "pra".

Demo

---

[attribute $= data] - Select all the html element where attribute value end with data.
CSS

[data-name ^= 'pra']
{
  font:15px arial,sans-serif;
  color:red;
}

So with the above html when apply this "My name is Pranay Rana."  text is get highlighted because its "data-name" attribute value ending with "nay".

Demo

---

[attribute *= data] - Select all the html element where attribute value contains data.
CSS

[data-name *= 'rana']
{
  font:15px arial,sans-serif;
  color:red;
}

So with the above html when apply this "My name is Pranay Rana."  text is get highlighted because its "data-name" attribute value contains "rana".

Demo

---

[attribute ~= data] - Select all the html element where attribute value contains word data.
CSS

[data-name ~= 'page']
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div >
<p data-name="pranay_page">My name is Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>I am working as Soft Engg.</p>
<p data-name="demo page">My Demo Page.</p>

in this example any element where attribute "data-name"  value contains word = "page" get highlighted  with red color, in this example "My Demo Page." text get highlighted

Demo

---

:first-child - Select first element (first child) of parent.
CSS

li:forst-child
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

in this example "item1" element get highlighted  with red color.

Demo

---

:last-child - Select last element (last child) of parent.
CSS

li:last-child
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

in this example "item4" element get highlighted  with red color.

Demo

---

:nth-child(n) - Select all each element which n the child of parent.
CSS

li:nth-child(2)
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

in this example "second li" element get highlighted  with red color, in this example "item2" text get highlighted

Demo

---

:nth-child(n) - Select all each element which last n the child of parent counting from bottom .
CSS

li:nth-child(2)
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

in this example "second last li" element get highlighted  with red color, in this example "item3" text get highlighted

Demo

---

:only-child - Select child element which only child of parent .
CSS

p:only-child
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div>
    <p> pragraph 1</p>
</div> 
<div>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>

in this example "paraghaph 1" element get highlighted  with red color,which is only child of div element.

Demo

---

:first-of-type - Select first element of given type which is first comes under parent element.
CSS

p:first-of-type
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div>
    <p> pragraph 1</p>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
</div>

in this example "paragraph 1" element get highlighted  with red color.

Demo

---

:last-of-type - Select last element of given type which is last comes under parent element.
CSS

p:last-of-type
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div>
    <p> pragraph 1</p>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
</div>

in this example "paragraph 1" element get highlighted  with red color, that means here "pragraph 1" is first element of type p under div.

Demo

---

:nth-of-type(n) - Select nth element of given type which comes at nth place under parent element.
CSS

p:nth-of-type(2)
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div>
    <p> pragraph 1</p>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>  

in this example "paragraph 2" element get highlighted  with red color, that means here "pragraph 2" is 2th element of type p under div.

Demo

---

:nth-last-of-type(n) - Select nth last element of given type which comes at nth place under parent element from last.
CSS

p:nth-last-of-type(2)
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div>
    <p> pragraph 1</p>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>  

in this example "paragraph 3" element get highlighted  with red color, that means here "pragraph 3" is last element of type p under div from last.

Demo

---

:only-of-type - Select only element of given type which comes under parent element.
CSS

p:only-of-type
{
  font:15px arial,sans-serif;
  color:red;
}

Use

<div>
    <p> pragraph 1</p>
</div> 
<div>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>  

in this example "paragraph 1" element get highlighted  with red color, because p is only element of given type.

Demo

---

:empty - Select element which is empty i.e. donent have any child.
CSS

div:empty
{
  width:100px;
height:20px;
background:red;
}

Use

<div></div> 
<div>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>  

in this highlight all text in the document with red color.

Demo

---

::selection - highlight the text with the color selected.
CSS

::selection
{
  background:green;
}

Use

<div> <p> pragraph 1</p> </div> 
   <div>
    <p> pragraph 2</p>
    <p> pragraph 3</p>
    <p> pragraph 4</p>
</div>    

in this highlight all text with green which get select in document.

Demo

---

:not(HTMLElement) - it not apply the style to the HTMLElement specified.
CSS

:not(span)
{
  font:15px arial,sans-serif;
  color:red;
}
span
{
  color:black;
}

Use

 <p> pragraph 1</p>
 <p> pragraph 2</p>
 <p> pragraph 3</p>
 <p> pragraph 4</p>
 <span> span data</span>    

in this highlight all text which is in p element i.e. not apply style to span element.

Demo

---

:enable - select to all enable element.
:disable - select to all disable element.
CSS

:input[type="text"]:enabled
{
background:green;
}
input[type="text"]:disabled
{
background:red;
}

Use

Name: <input type="text" value="Pranay Rana" /><br>
Country: <input type="text" disabled="disabled" value="India" />    

here name is get highlighted with red color and country box is get highlighted with green.

Demo

Conclusion
Most of the selector are new here those are part of CSS3, I hope that helpful to understand well. I covered most of the CSS selector here but if there is something missing please place comment below regarding it.

Leave comment if you have any query or if you like it.  Pelease report if any link is not working or broken.

Cascading with jQuery AutoComplete

Source Code


In this post I am going to show how to achieve cascading functionality with the help of jQuery AutoComplete UI control rather than we are doing with the help of comobo-box controls till date.

By the following screen shot I am going to explain what I am going to achieve in this post and in later on post I am going to explain the part of the code did by me.

Screen 1: Loading Suggestion

When user start typing in country textbox  loader image shows that its loading suggestion for the character typed in textbox.

Screen 2: Display Suggestion

List of suggestion displayed to the end user , which is in turn fetch from the server.

Screen 3: Display State aftter country selection

Select State textbox get visible once user select country name from the suggestion list.

Screen 4: Display City after State selection

Select city textbox get visible once user select state name from the suggestion list.

Screen 5: Display Search button after selecting city

Search button get visible once user done with the selection of city name from the suggested cities.

Screen 6: Displaying Search data

Search Data get displayed in the gridview control once user click on search button.

Screen 7: "No Data Found" Error Message

Error message get displayed when user types in the textbox and suggestion is not available to display.

Screen 8: "Enter valid Data" Error Message

Alert Message of enter data get displayed when search button is press and one of the textbox value is not present.

Screen 9: "Enter valid Data" Error Message

Alert Message of enter data get displayed when search button is press and one of the textbox having value for which suggestion is not present.

As you can see in the screen shot when I type auto-complete functionality show me the suggestion and once I select suggestion , selected value get placed in the textbox and another row get visible which does the same functionality.

Now in the below post I am going to discuss about cascading thing with one textbox only but you can see whole by downloading the full source code of this post.

Aspx page i.e html markup
First start with the Aspx page, what the changes I did for the autocomplete textbox which is going to cascade other autocomplete textbox

<tr id="trCountry">
  <td>
   <label id="lblCountry" runat="server" text="Select Country" width="150px">   
   </label>
  </td>
  <td>
    <div style="float: left;">

TextBox id="txtCountry"
attached class="autosuggest", which tells that when you start typing in its going to display list of suggestion which fetched from the database using ajax and autocomplete plug-in.

<textbox class="autosuggest" font-size="10px" id="txtCountry" runat="server" 
                  width="250px"></textbox>
<span id="spCountry" style="display:none;color:Red;">No Data Found</span>

Span id="spCountry"
It get display when there is no suggestion avaialbe for the character typed in textbox.

<div style="display: none;">

As you see above div having style display=none that means the button and textbox both remains hidden when the page get display on browser.
Button id "btnCountry"
on click event get fire when of of the suggestion get selected. So this button fire up the server side event from javascript and make visible the next level textbox. How it fires the event

<button font-size="10px" id="btnCountry" onclick="btnCountry_Click" 
                runat="server" width="250px"></button>

TextBox id="txtCountryID"
this textbox stores the value of the country id which is going to be selected from the suggestion list.

<textbox id="txtCountryID" runat="server"></textbox>
       </div>
    </div>
  </td>
</tr>

this layout is same for the State and City next level selection textboxes that you can see in full source code.

jQuery/Javascript
Following is jQuery method that going be utilize for the showing the suggestion , which is provided by autocomplete plug-in.

autocomplete - method
method provided by the pug-in which is in turn get attach with the textbox control which than show the suggestion when user types in. In the above code its attached with the Country textbox, which is same for the State and city textbox that you can see in full code.

var pagePath = window.location.pathname;
         $(function() {

         $("#" + "<%=txtCountry.ClientID %>").autocomplete(
             {

Attribute of autocomplete
source - is from which suggestion will come up, as I am fetching data from the server side page/function I used jQuery ajax function to get the list from server.
Sucess - function attached with this attribute of the ajax function get the data for suggestion list as you can see if the data length is equal to 0 than it display span element which shows that data is not present.

source: function(request, response) {

                     $.ajax({
                     url: pagePath + "/GetCountry",
                         data: "{ 'id': '" + request.term + "'}",
                         dataType: "json",
                         type: "POST",
                         contentType: "application/json; charset=utf-8",
                         dataFilter: function(data) { return data; },
                         success: function(data) {
                             if (data.d.length == 0) 
                                 $("#spCountry").show();
                             else
                                 $("#spCountry").hide();
                             response($.map(data.d, function(item) {
                                 {
                                     value = item.Name + " : " + item.ID;
                                     return value;
                                 }
                             }))
                         },
                         error: function(XMLHttpRequest, callStatus, errorThrown) {
                             alert(callStatus);
                         }
                     });
                 },

minLength - no of char typed by use in textbox before the suggestion come up i.e after this many character typed by user than the source get query for suggestion. over here is having value 1 means its start showing suggestion once you start writing in it.

minLength: 1,

select - function associated with this attribute get fire when the use select the item from suggestion list. This is most useful function that do postback and do execute code on serverside by calling serverside button click function , button click function enable State row. As well as this break the string and assign text value to country textbox and id to countryid textbox which is hidden one and which value utilize by the state texbox to display suggestion.

select: function(event, ui) {
                     var str = ui.item.label.split(":");
                     $("#" + "<%=txtCountry.ClientID %>").val(str[0]);
                     $("#" + "<%=txtCountryID.ClientID %>").val(str[1]); 
                     $("#" + "<%=btnCountry.ClientID %>").click();
                 }
             });
         });

Validate function
The function get fire when user click on search button to search people resides in which city once done with selection of country,satate and city.

function Validate() {
      var retVal = true;
      if ($("#spCountry").is(":visible")||
            $("#spSatate").is(":visible") ||
            $("#spCity").is(":visible"))
          retVal = false;
      if($("#" + "").val()=="" ||
         $("#" + "").val()=="" ||
         $("#" + "").val()=="")
          retVal = false;
         if(!retVal) 
      alert("Enter Valid Data"); 
      return retVal;
  }

the code checks for is any of the span element associated with the textbox control is visible which display error message "No Data Found" and also check that is any on textbox contrains blank value. If its all proper it return true value otherwise return false.

CodeBehind Files - aspx.cs file
In cs file I designed class for the testing purpose the name of the class is Common which is going to be utilize by GetCountry, GetState and GetCity methods

public class Common
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int ParentID { get; set; }
}

ID - is the unique value to detect each element uniquely.
Name - is value string value for each element.
ParentID - is value to detect element is child of which element.

People class is used to bind data with the gridview control once user press the search button.

public class People
{
    public string Name { get; set; }
    public string Email { get; set; }
    public int CityID { get; set; }
}

Name- name of the person
Email - email Address
CityID - is the id of city which user belongs.

As I explained before when user start typing in the textbox suggestion list come from the serverside method, following is the one of the method you find other in full code. GetCountry method get called when start typing in Country textbox.

[WebMethod]
    public static List GetCountry(string id)
    {
        try
        {
            List<common> country = new List<common> 
            {
                new Common(){ ID=1 ,Name = "India",ParentID=0 },
                new Common(){ ID=2 ,Name = "USA",ParentID=0 },
                new Common(){ ID=3 ,Name = "Ireland",ParentID=0 },
                new Common(){ ID=4 ,Name = "Australia",ParentID=0 }
            };

As I am going to call the method from server side its having attribute WebMethod. In the above code I initialize the collection of country and country is parent element all element have the parentid 0.
Method has parameter called id which is contains the value of the textbox which is typed in textbox. ajax calling function in source pass the id as json parameter to method that you can see in above method of jQuery/javascript.

List lstcountry =
                        (from c in country
                         where c.Name.StartsWith(id)
                         select c).ToList();
            return lstcountry;
 
        }
        catch (Exception ex)
        {
            return null;
        }
    }

Above code as you can see apply linq query on the collection and locate the match element which starts by the character typed in textbox.

Conclusion
So the above post demonstrate that its easy to achieve the cascading with the help of the auto suggest functionality provided by jQuery autosuggest plug-in.

Note : 
Find download code at the start of article and if you have any problem in downloading source code and if you have any query regarding this please mail me at : pranayamr@gmail.com or post comment at below.

Handle Printing Data with HTML

Problem :
In my project I need to implement functionality where I have to print Order print receipt. But the real thing is I have to hide some part of page when I print page i.e hide  and I have to use same page for this.


Solution:
The easy solution for this problem is you need to give one more style sheet for the print purpose by which you can hide those element which are not required. For this you require to use attribute
media = print
of the STYLE element. Following is small code for this issue 

or when you linking style sheet

Summary
So by using media type as print you can print only those element that you want. Even you can print element with the different style.

Handling long text using TEXT-OVERFLOW : ECLLIPSIS

Problem :
1. I got requirement from the client that if the text is longer than text get truncated and display "..." at the end of the string.
2. But the twist is I have to display "..." in ASP.NET GridView control for each cell.

Example :

I am working on my blog post formatting this day.

I have to display this as

I am working on my blog post formatting this day.

Solution:

Make use of avaialbe CSS property
text-overflow: ellipsis;
which truncate text form the point where text is wraping and display "..." as we require to resolve our issue.

Solution for the fist problem :
So out css class for DIV element to get "..." will be like :

div
{
   border-bottom: 1px solid; 
   border-left: 1px solid; 
   border-right: 1px solid; 
   border-top: 1px solid;        
   overflow: hidden; 
   text-overflow: ellipsis; 
   width: 150px;
   white-space:nowrap;
}

Output:

I am working on my blog post formatting this day.

This property is that its works for div, p type element. i.e for the block element. So it resolves my first problem.

Solution for the problem 2
But the CSS text-overflow not working for the html table element directly. And GridView control get converted in table structure when its render on client browser.

So to resolve this issue we have to use another CSS property call
table-layout : fixed;
more about table-layout : http://www.w3schools.com/Css/pr_tab_table-layout.asp

table
{
table-layout: fixed; 
width: 200px;
}

table td
{
overflow: hidden; 
text-overflow: ellipsis;
white-space:nowrap;
}

Output:

My WebSite :	http://pranayamr.blogspot.com/
My WebSite2 :	http://ww.stackoverflow.com/

Support
text-overflow : ecllipsis is supported by IE6+, Google Chrome 

Summary
So text-overflow:eclipse reduce the cost of calculating no. char we can display in a given width and write some custom login to display "..." append with the string.

DIV TABLE

Introduction

This article demonstrates using div elements to effectively to build websites without using table elements on a page. Because there are a number of advantages to the div element most clients ask designers to develop websites using div elements rather than table elements. The code below is for beginners learning to use div elements to develop websites.

The following explains why to use DIV over TABLE elements.

Pros of Table Element: Most designers use table for a consistent look. Tables are also easy to maintain. Another advantage of table is that it is compatible with the most browsers.

Cons of Table Element: All this comes with a cost: Too many nested tables increase page size and download time. More table elements push important content down so search spiders are less likely to add content to search engines.

Pros of DIV Element: div with CSS we can achieve the same table based page structure and reduce the number of elements on the page, which allows the page to load faster. It also makes page more compatible with search engine spiders.

Cons of DIV Element: The major drawback of this is not all CSS elements are not browser compatible. Because of this we have to write some custom CSS to resolve issues.

Using the Code

I have created one simple application which shows how easily you can create you own pages with div elements only.

The following diagram demonstrates the layout of div elements.

Here is a list of the style sheet classes I have created for the page layout. Let’s get into more detail.

• divHeaderTable: Class assigned to header of the html page and its works as headertable
• divHeaderRow: Class assigned to the div element which works as header row of table. As height of header image is fix to 105 row having height element value 105px.
• divHeaderColumn: Class assigned to div element which works as header column of the table. As header part is divided in three part the width element having value 99%.
• divTable: Class assigned to the div element woks as the table in container part of html document.
• divRow: Class assigned to the div element woks as the row in container part of html document.
• divColumn: Class assigned to the div element woks as the table in container part of html document. As container form element are 4 per row the width element having value 24%.

body

{

            background-color: LightBlue;

            font-family: Verdana;

            font-size: 13px;

}

.divHeaderTable

{

            width: 100%;

            padding-bottom:5px;

            display:block;

}

.divHeaderRow

{

            width: 100%; /* add extra that you want to for header column */

            display:block;

            height:105px;

}

.divHeaderColumn

{

            float: left;

            width: 33%;

            display:block;

}

.divTable

{

            width: 100%;

            display:block;

            padding-top:10px;

            padding-bottom:10px;

            padding-right:10px;

            padding-left:10px;

}

.divRow

{

         width: 99%;

         display:block;

         padding-bottom:5px;

}

.divColumn

{

         float: left;

         width: 24%;

         display:block;

}

Following is HTML code of the page which shows how the classes assigned to the elements.

<!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>Gmind Solusion-DivElement Layout</title>

    <link href="CSS/StyleSheet.css"  rel="Stylesheet"  type="text/css"   />

</head>

<body>

 <div style="width:99%; height:565px;">

    <div class="divHeaderTable">

        <div class="divHeaderRow">

            <div class="divHeaderColumn">

                <img alt="Offshore Outsourcing software development company India"

                    title="Offshore Outsourcing software development company India"

                    src="Images/gmind.png" width="100%" height="105" />

            </div>

            <div class="divHeaderColumn">

                

            </div>

            <div class="divHeaderColumn">

                <div>

                    <img alt="Gmind" width="15" height="10" src="Images/smllindia.jpg" />

                    +91-9702989270

                </div>

                <div>

                    <img alt="Gmind" src="Images/smallusa.jpg" />

                    +91-9924839208

                </div>

                <div>

                </div>

                <div>

                </div>

            </div>

        </div>

    </div>

   

    <div id="menu" class="divHeaderTable" >

        <ul style="list-style-type:none;" >

            <li style="float:left"><a href="javascript:void(0);" >Home</a>   </li>

            <li style="float:left"><a href="javascript:void(0);" >About Us</a>   </li>

            <li style="float:left"><a href="javascript:void(0);" >Services</a>   </li>

            <li style="float:left"><a href="javascript:void(0);" >Technology</a>  </li>

            <li style="float:left"><a href="javascript:void(0);" >Outsourcing</a>  </li>

            <li style="float:left"><a href="javascript:void(0);" >Quality</a>  </li>

            <li style="float:left"><a href="javascript:void(0);" >Career</a>  </li>

            <li style="float:left"><a href="javascript:void(0);" >Blogs</a>  </li>

            <li style="float:left"><a href="javascript:void(0);" >Partner</a>  </li>

            <li><a href="javascript:void(0);" title="Contact Us">Contact Us</a>  </li>

        </ul>   

    </div>

   

    <div id="divHeader" class="divHeaderTable">

        <h4>User Registration</h4>

    </div>

   

    <div id="content" class="divTable">

       <div class="divRow">

        <div class="divColumn">

            <div>

                <label id="lblSolutation" > Solutation</label>

            </div>

            <div>

                <input type="text" id="txtSolutation" />

            </div>

        </div>

        <div class="divColumn">

            <div>

                <label id="lblFname" > First Name</label>

            </div>

            <div>

                <input type="text" id="Text1" />

            </div>

        </div>

        <div class="divColumn">

            <div>

                <label id="lblMname" > Middle Name</label>

            </div>

            <div>

                <input type="text" id="Text2" />

            </div>

        </div>

        <div class="divColumn">

            <div>

                <label id="lblLname" > Last Name</label>

            </div>

            <div>

                <input type="text" id="Text3" />

            </div>

        </div>

      </div>

     

       <div class="divRow">

       <div class="divColumn">

             <div>

                <label id="Label10" > Login Name</label>

            </div>

            <div>

                <input type="text" id="Text13" />

            </div>

        </div>

        <div class="divColumn">

             <div>

                <label id="Label9" > E-mail</label>

            </div>

            <div>

                <input type="text" id="Text12" />

            </div>

        </div>

        <div class="divColumn">

            <div>

                <label id="Label7" > Password</label>

            </div>

            <div>

                <input type="password" id="Text10" />

            </div>

        </div>

        <div class="divColumn">

            <div>

                <label id="Label8" > Confirm Password</label>

            </div>

            <div>

                <input type="password" id="Text11" />

            </div>

        </div>

      </div>

     

       <div class="divRow">

        <div class="divColumn" style="width:48%;">

            <div>

                <label id="Label1" > Address1</label>

            </div>

            <div>

                <textarea id="Text4" style="width:80%;" ></textarea>

            </div>

        </div>

        <div class="divColumn" style="width:48%;">

            <div>

                <label id="Label3" > Address2</label>

            </div>

            <div>

                <textarea id="Text6" style="width:80%;"> </textarea>

            </div>

        </div>

      </div>

     

       <div class="divRow">

        <div class="divColumn">

            <div>

                <label id="Label2" > State</label>

            </div>

            <div>

                <input type="text" id="Text5" />

            </div>

        </div>

        <div class="divColumn">

            <div>

                <label id="Label4" > City</label>

            </div>

            <div>

                <input type="text" id="Text7" />

            </div>

        </div>

        <div class="divColumn">

            <div>

                <label id="Label5" > Country</label>

            </div>

            <div>

                <input type="text" id="Text8" />

            </div>

        </div>

        <div class="divColumn">

            <div>

                <label id="Label6" > Pin Code</label>

            </div>

            <div>

                <input type="text" id="Text9" />

            </div>

        </div>

      </div>

     

      <br />

      <div class="divRow">

         <input type="submit" value="Submit" onclick="javascript:void(0);" />

          or  

        <a  href="javascript:void(0)">Cancel </a>

      </div>

    </div>

 </div>  

 <div style="text-align:center; background-color:Green;">

  Contact us to discuss your requirements

 </div>

</body>

</html>

Points of Interest

This not the only structure you can create with div and CSS so you can achieve different layouts with this also.

So from the above example you can see the div layout with CSS is easy and powerful. Because of this web pages download faster, avoid using more tags, and create web pages that are more appealing to search engines.