Advertisements

Archive

Posts Tagged ‘HTML element’

twiter bootstrap Navbar page selection (class=’active’)

March 6, 2013 6 comments

Hello All,

I have noticed a very common problem in twitter-bootstrap navbar , when user click on any item or navigate on other page by clicking any item from navbar, item not remain selected/active.

Here is the solution for above problem
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta charset=”utf-8″>
<title>AXSyst</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”description” content=”Advanced Xpert Systems”>
<meta name=”author” content=””>
<!– Le styles –>
<link href=”css/bootstrap.css” rel=”stylesheet”>
<style type=”text/css”>
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
</style>
<link href=”css/bootstrap-responsive.css” rel=”stylesheet”>
<!– Le HTML5 shim, for IE6-8 support of HTML5 elements –>
<!–[if lt IE 9]>
<![endif]–>
<script src=”js/jquery.js”></script>  <!–THIS NEEDS TO BE PLACED HERE BECAUSE $(document).ready(function(){ WON’T WORK.  ALL OTHER JS ARE LOCATED IN _footer.php –>
</head>
<body>
<!–NavBar –>
<div>
  <div>
    <div>
      <a data-toggle=”collapse” data-target=”.nav-collapse”>
        <span></span>
        <span></span>
        <span></span>
      </a>
      <a href=”index.php”>MySite</a>
      <div>
        <ul id=ul_nav>
          <li id=”li_home”><a href=”index.php”>Home</a></li>
          <li id=”li_about”><a href=”about.php”>About</a></li>
          <li id=”li_cont”><a href=”contact.php”>Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!–NavBar end –>
Add following line of code to make selected node active in navbar….
———————————————————————————–
<script type=”text/javascript”>
function GetCurrentPageName() { 
//method to get Current page name from url. 
var PageURL = document.location.href; 
var PageName = PageURL.substring(PageURL.lastIndexOf(‘/’) + 1); 
 
return PageName.toLowerCase() ;
}
 
$(document).ready(function(){
var CurrPage = GetCurrentPageName();
 
switch(CurrPage){
case ‘index.php’:
 $(‘#li_home’).addClass(‘active’) ;
 break;
case ‘about.php’:
 $(‘#li_about’).addClass(‘active’) ;
 break;
case ‘contact.php’:
 $(‘#li_cont’).addClass(‘active’) ;
 break;
}
});
</script>
———————————————————————————–
Hope it helps !
 
Advertisements
Categories: Twitter bootstrap Tags: , , , , , , , , , ,

Validate INDIAN PAN Number Using Regular expression

November 29, 2012 Leave a comment

Indian PAN is as follows: AAAAA9999A:
Where First five characters are letters, next 4 numerals, last character letter
One rule there the fourth character is choosen from a list Alphabates as bellows.

C – Company
P – Person
H – HUF(Hindu Undivided Family)
F – Firm
A – Association of Persons (AOP)
T – AOP (Trust)
B – Body of Individuals (BOI)
L – Local Authority
J – Artificial Juridical Person
G – Govt

http://en.wikipedia.org/wiki/Permanent_account_number

Hence I will create a regular expression
as bellow

^[\w]{3}(p|P|c|C|h|H|f|F|a|A|t|T|b|B|l|L|j|J|g|G)[\w][\d]{4}[\w]$

Here I have a textbox and a regular expression validator in my aspx page as bellow.

<asp:TextBox ID="txtPan" runat="server" ></asp:TextBox>

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" 

     ControlToValidate="txtPan" runat="server" ErrorMessage="Invalid PAN"      ValidationExpression="^[\w]{3}(p|P|c|C|h|H|f|F|a|A|t|T|b|B|l|L|j|J|g|G)[\w][\d]{4}[\w]$">

</asp:RegularExpressionValidator>
Categories: ASP.NET Tags: , , , , , , ,

Comparing ListView with GridView,DataList and Repeater

April 13, 2012 Leave a comment

The ListView control is a new data presentation control that was added in ASP.Net 3.5.You may wonder why its added to the framework , and what it provide .

From what i have seen, ListView control was added to provide The following functionalities :

  1. A very flexible and customizable layout.
  2. A built in data paging support with the new DataPager control.
  3. Support data grouping (repeating items) in a flexible way.
  4. Built in support for deleting,inserting,paging,sorting,and updating the data.

Now , to compare the ListView control with the dataList,GridView and repeater control , lets look at the table below :

Supported Funcationalities
Control Paging Data Grouping Provide Flexible Layout Update,Delete Insert Sorting
ListView supported supported supported supported supported supported
GridView supported Not supported Not Supported supported Not Supported supported
DataList Not supported supported supported Not supported Not supported Not supported
Repeater Not supported Not supported supported Not supported Not supported Not supported


* Supported: means that it’s provided out of the box without any custom code or hacks.

* Not Supported: means that it’s not provided out of the box by the control but it could be possible to implement it using custom code \ hacks.

The GridView : it supports paging but it doesn’t provide a flexible layout , since its mainly used to display the data in a table based layout.And If we looked at data inserting , the Gridview doesn’t have a built in support for inserting data( since it doesn’t call the insert method of it underlying data source when you click on a button with a CommadName set to “Insert” ).

The DataList : it support data grouping ( through its RepeatColumns property) , but it doesn’t have a built in support for paging,inserting ,deleting , updating the data. and if you looked at its laout , you will find that by default  the datalist renders as html table and you will have to set its flowLayout to “Flow” to stop that behaviour.

The Repeater control : you will find that it provides a flexible layout but it doesn’t support data grouping ,inserting,deleting , updating  and paging through the data .

Summary :

The ListView control was added to provide a rich data control that can support all the required functionalities at the same time , so now you can easily display a fully customizable layout that supports Grouping,paging , inserting , deleting , updating and sorting the data.

Categories: ASP.NET Tags: , , , , , , , ,