Sorting HTML Tables using Javascript:




I'm already demonstrated how to use HTML tables on the client for a very simple client-side paging solution. I've heard from several people who point out the performance problems with large sets of data. I agree. This solution is best for a fairly fixed amount of data. In this post I've add the sorting function in that same table so now the sorting and paging available in same table Here just put a class name "sort" to the table tag
For example:
<table id="tablepaging" class="sap sort" align="center" > Incase if you want to remove sorting for a particular column in a table just put a class name "unsort" to the corresponding header tag
For example:
<th> class="unsort">Geometry </th>     Online Demo:
Name Major English Tamil Calculus Geometry
Student01 Languages 80 70 75 80
Student02 Mathematics 90 88 100 90
Student03 Languages 40 40 35 60
Student04 Mathematics 50 68 100 70
Student05 Languages 45 45 65 75
Student06 Mathematics 75 65 50 55
Student07 Mathematics 85 68 90 90
Student08 Languages 100 90 90 85
Student09 Mathematics 80 50 65 75
Student10 Languages 85 100 100 90
Student11 Languages 86 85 100 100
Student12 Mathematics 100 75 70 85
Student13 Languages 100 80 100 90
Student14 Languages 50 45 55 90
Student15 Languages 95 35 100 90
Student16 Languages 100 50 30 70
Student17 Languages 80 100 55 65
Student18 Mathematics 30 49 55 75
Student19 Languages 68 90 88 70
Student20 Mathematics 40 45 40 80
Student21 Languages 50 45 100 100
Student22 Mathematics 100 99 100 90
Student23 Languages 85 80 80 80
student24 Languages 100 91 13 82
Read more ...

Centering a popup div using css

Posted by Prince | 8:49:00 PM | | 0 comments »

    

Centering a popup div using css

      In one of my project I'm struggling to align a pop up division to center of screen using java script.

       I tried using screen.width and screen.height to get center. But no use.
And finally I got the following solution while surfing the web and I'm relaxed.

Code:

<!DOCTYPE HTMLPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"><head>

<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<title>popup using css</title>
<style>

#divBackground{
visibility
:hidden;
position
:fixed;
left
:0;
top
:0;
width
:100%;
height
:100%;
display
:none;
background-color
:#000;
filter
:alpha(opacity=60);
-moz-opacity
:.6;
opacity
:.6;
z-index
:9;
}

#divPopup{
position
:fixed;
top
:50%;
left
:50%;
margin-top
:-81px;/* half of the height plus a little to the top */
margin-left
:-150px;/* half of the width */
visibility
:hidden;
display
:none;
border
:1pxsolid#000;
background-color
:#FFF;
color
:#333;
padding
:0;
height
:300px;
width
:350px;
z-index
:10;
font-size
:12px;
}

#divPopupHead{
position
:absolute;
top
:0;
left
:0;
width
:100%;
background-color
:#2B60DE;
color
:#fff;
font-weight
:bold;
padding
:2px0;
z-index
:-1;
}

#divClosePopup{
float
:right;
text-align
:right;
cursor
:pointer;
padding-right
:10px;
}

#divClosePopupa{
text-decoration
:none;
color
:#333;
}

#divClosePopupa:hover{
color
:#FF0000;
}

#divPopupContent{
clear
:both;
padding
:10px;
}
</style>

<!--[ifIE]>
<styletype="text/css"> *{
padding:0;

margin:0;
}
html,body{
height:100%;
overflow:auto;
}
#divBackground{
position:absolute;
}
#divPopup{
position:absolute;
}
</style>
<![endif]-->

<scriptlanguage="javascript"type="text/javascript">

functionshowPopup(){
//Showpopup
document.getElementById('divBackground').style.visibility='visible';
document
.getElementById('divPopup').style.visibility='visible';
document
.getElementById('divBackground').style.display='block';
document
.getElementById('divPopup').style.display='block';
}

functionhidePopup() {
//Hidepopup
document.getElementById('divBackground').style.visibility='hidden';
document
.getElementById('divPopup').style.visibility='hidden';
document
.getElementById('divBackground').style.display='none';
document
.getElementById('divPopup').style.display='none';
}

</script>
</head>
<body>
<div id='divBackground'></div>
 
<div id='divPopup'>
   
<div id='divPopupHead'>Popupusingcss</div>
   
<div id='divClosePopup'onclick='hidePopup()'><ahref='#'>X</a></div>
 
<div id='divPopupContent'>
Welcome to .NetCluster
</div>
<a href='javascript:showPopup();'>Click for online demo</a>
</body>
</html>
Online Demo:




Popup using css

Click for online demo




Read more ...

Client-Side Paging with Tables:  

Most of the times, you don't need to paginate on the client side: if you have an enough small set of records to be displayed, I would suggest you to choose a scrollable <div/>.
Server-side web pagination is really needed when you have to display hundreds of records. You may fetch results from the DB using an offset and loading a single page for each HTTP request. SO I tried with the following script for client side paging in my HTML table.

I demonstrated how to use HTML tables on the client for a very simple client-side paging solution. I have heard from several people who point out the performance problems with large sets of data. I agree. This solution is best for a fairly fixed amount of data.

Step#1:
Include the following css in your page header;




<style type="text/css">

.pg-normal {
color
: #000000;
font-size
: 15px;
cursor
: pointer;
background
: #D0B389;
padding
: 2px 4px 2px 4px;
}

.pg-selected {
color
: #fff;
font-size
: 15px;
background
: #000000;
padding
: 2px 4px 2px 4px;
}

table
.yui {
font-family
:arial;
border-collapse
:collapse;
border
: solid 3px #7f7f7f;
font-size
:small;
}

table
.yui td {
padding
: 5px;
border-right
: solid 1px #7f7f7f;
}

table
.yui .even {
background-color
: #EEE8AC;
}

table
.yui .odd {
background-color
: #F9FAD0;
}

table
.yui th {
border
: 1px solid #7f7f7f;
padding
: 5px;
height
: auto;
background
: #D0B389;
}

table
.yui th a {
text-decoration
: none;
text-align
: center;
padding-right
: 20px;
font-weight
:bold;
white-space
:nowrap;
}

table
.yui tfoot td {
border-top
: 1px solid #7f7f7f;
background-color
:#E1ECF9;
}

table
.yui thead td {
vertical-align
:middle;
background-color
:#E1ECF9;
border
:none;
}

table
.yui thead .tableHeader {
font-size
:larger;
font-weight
:bold;
}

table
.yui thead .filter {
text-align
:right;
}

table
.yui tfoot {
background-color
:#E1ECF9;
text-align
:center;
}

table
.yui .tablesorterPager {
padding
: 10px 0 10px 0;
}

table
.yui .tablesorterPager span {
padding
: 0 5px 0 5px;
}

table
.yui .tablesorterPager input.prev {
width
: auto;
margin-right
: 10px;
}

table
.yui .tablesorterPager input.next {
width
: auto;
margin-left
: 10px;
}

table
.yui .pagedisplay {
font-size
:10pt; 
width: 30px;
border
: 0px;
background-color
: #E1ECF9;
text-align
:center;
vertical-align
:top;
}
</style>


Step#2
Copy & paste the following script  in your page header;
<script type="text/javascript">

function Pager(tableName, itemsPerPage) {

this.tableName tableName;

this
.itemsPerPage itemsPerPage;

this
.currentPage 1;

this
.pages 0;

this
.inited = false;

this
.showRecords = function(from, to) {

var rows = document.getElementById(tableName).rows;

// i starts from 1 to skip table header row

for (var 1i < rows.lengthi++) {

if (i < from || i > to)

rows[i].style.display 
'none';

else

rows[i].style.display '';

}

}

this.showPage = function(pageNumber) {

if (! this.inited) {

alert("not inited");

return;

}

var oldPageAnchor = document.getElementById('pg'+this.currentPage);

oldPageAnchor.className 'pg-normal';

this
.currentPage pageNumber;

var 
newPageAnchor = document.getElementById('pg'+this.currentPage);

newPageAnchor.className 'pg-selected';

var 
from (pageNumber - 1) * itemsPerPage + 1;

var 
to from + itemsPerPage - 1;

this
.showRecords(from, to);

}

this.prev = function() {

if (this.currentPage > 1)

this.showPage(this.currentPage - 1);

}

this.next = function() {

if (this.currentPage < this.pages) {

this.showPage(this.currentPage + 1);

}

}

this.init = function() {

var rows = document.getElementById(tableName).rows;

var 
records (rows.length - 1);

this
.pages = Math.ceil(records / itemsPerPage);

this
.inited = true;

}

this.showPageNav = function(pagerName, positionId) {

if (! this.inited) {

alert("not inited");

return;

}

var element = document.getElementById(positionId);

var 
pagerHtml '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> ';

for 
(var page 1page <= this.pagespage++)

pagerHtml +
'<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';

pagerHtml +'<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';

element.innerHTML pagerHtml;

}

}

</script>

Stet#3

Define an ID on the table you want to paging that is "tablepaging" ; place an empty div in the place you want to display the navigation bar. that is "pageNavPosition"; include an initialization script at the bottom of your page.

<table id="tablepaging" class="yui" align="center">
<thead>
<tr> 
<th>Name </th>
<th>Major </th>
<th>Sex </th>
<th>English </th>
<th>Tamil </th>
<th>Calculus </th>
<th>Geometry </th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Student01 </td>
<td>Languages </td>
<td>M </td>
<td>80 </td>
<td>70 </td>
<td>75 </td>
<td>80 </td>
</tr>
<tr class="odd">

<td>Student02 </td>
<td>Languages </td>
<td>M </td>
<td>80 </td>
<td>70 </td>
<td>75 </td>
<td>80 </td>
</tr>
.

.
.

</tbody>
</table>
<div id="pageNavPosition" style="padding-top: 20px" align="center">
</div>
<script type="text/javascript"><!--
var pager = new Pager('tablepaging'5);
pager.init();
pager.showPageNav('pager''pageNavPosition');
pager.showPage(1);
</script>

Online Demo:




Name

Major

Sex

English

Tamil

Calculus

Geometry

Student01

Languages

M

80

70

75

80

Student02

Mathematics

M

90

88

100

90

Student03

Languages

F

85

95

80

85

Student04

Languages

M

60

55

100

100

Student05

Languages

F

68

80

95

80

Student06

Mathematics

M

100

99

100

90

Student07

Mathematics

M

85

68

90

90

Student08

Languages

M

100

90

90

85

Student09

Mathematics

M

80

50

65

75

Student10

Languages

M

85

100

100

90

Student11

Languages

M

86

85

100

100

Student12

Mathematics

F

100

75

70

85

Student13

Languages

F

100

80

100

90

Student14

Languages

F

50

45

55

90

Student15

Languages

M

95

35

100

90

Student16

Languages

F

100

50

30

70

Student17

Languages

F

80

100

55

65

Student18

Mathematics

M

30

49

55

75

Student19

Languages

M

68

90

88

70

Student20

Mathematics

M

40

45

40

80

Student21

Languages

M

50

45

100

100

Student22

Mathematics

M

100

99

100

90

student23

Mathematics

M

82

77

0

79

Student23

Languages

F

85

80

80

80

student24

Languages

F

100

91

13

82
Read more ...

Add/Remove row using  javascript:

Sometimes we need a row-based control that can dynamically add/remove rows on the fly, without being bound to a database. For example, we give the user a row of text-boxes to enter a subject, Mark,and etc... If they need more than one row to enter multiple subjects, they click an Add button for each extra subject they need. Each row also has a Remove button in case the user needs to remove a subject.You have use the following code spinets to dynamically Add/Remove rows.

Following is the source.

Code


 <script language="javascript" type="text/javascript">

var counter 0
function addNewRow() {

// Get the main Div in which all the other divs will be added var Container = document.getElementById('divContainer');

// Create a new div for holding text and button input elements var newDiv = document.createElement('div');

// Create a new text input var newText = document.createElement('input'); newText.type "text";

//for testing
newText.value = counter++;

// Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type "button";
newAddButton.value = " Add "; var newDelButton = document.createElement('input'); newDelButton.type "button";
newDelButton.value = "Remove"

// Append new text input to the newDiv newDiv.appendChild(newText);

// Append new button inputs to the newDiv newDiv.appendChild(newAddButton); newDiv.appendChild(newDelButton);

// Append newDiv input to the divContainer div Container.appendChild(newDiv);

// Add a handler to button for deleting the newDiv from the divContainer

newAddButton.onclick addNewRow; newDelButton.onclick = function() {
Container.removeChild(newDiv);
};
}

</script>

<div id="divContainer">
 
<div>   
    <input type="text" > 
    <input type="button" value="Add" onclick="addNewRow();">
 
</div>
</div>



Online Demo:
 This is an example for above code.



Read more ...

C# DateTime Format

Posted by Prince | 5:11:00 PM | | 0 comments »


String Format for DateTime [C#]

This example shows how to format Date Time using String.Format method. All formatting can be done also using DateTime.ToString method.

Custom DateTime Formatting
There are following custom format specifiers y (year), M (month), d (day), h (hour 12), H (hour 24), m (minute), s (second), f (second fraction), F (second fraction, trailing zeroes are trimmed),t (P.M or A.M) and z (time zone).
Following examples demonstrate how are the format specifiers rewritten to the output.[C#]

// create date time 2008-03-09 16:05:07.123
DateTime dt = new DateTime(2008, 3, 9, 16, 5, 7, 123);

String.Format("{0:y yy yyy yyyy}", dt);  // "8 08 008 2008"   year
String.Format("{0:M MM MMM MMMM}", dt);  // "3 03 Mar March"  month

String.Format("{0:d dd ddd dddd}", dt);  // "9 09 Sun Sunday" day
String.Format("{0:h hh H HH}",     dt);  // "4 04 16 16"      hour 12/24
String.Format("{0:m mm}",          dt);  // "5 05"            minute

String.Format("{0:s ss}",          dt);  // "7 07"            second
String.Format("{0:f ff fff ffff}", dt);  // "1 12 123 1230"   sec.fraction
String.Format("{0:F FF FFF FFFF}", dt);  // "1 12 123 123"    without zeroes

String.Format("{0:t tt}",          dt);  // "P PM"            A.M. or P.M.
String.Format("{0:z zz zzz}",      dt);  // "-6 -06 -06:00"   time zone


You can use also date separator / (slash) and time sepatator : (colon). These characters will be rewritten to characters defined in the current DateTimeForma­tInfo.DateSepa­rator andDateTimeForma­tInfo.TimeSepa­rator.[C#]

// date separator in german culture is "." (so "/" changes to ".")
String.Format("{0:d/M/yyyy HH:mm:ss}", dt); // "9/3/2008 16:05:07" - english (en-US)
String.Format("{0:d/M/yyyy HH:mm:ss}", dt); // "9.3.2008 16:05:07" - german (de-DE)


Here are some examples of custom date and time formatting:[C#]

// month/day numbers without/with leading zeroes
String.Format("{0:M/d/yyyy}", dt);// "3/9/2008"
String.Format("{0:MM/dd/yyyy}", dt);// "03/09/2008"

// day/month names

String.Format("{0:ddd, MMM d, yyyy}", dt);// "Sun, Mar 9, 2008"
String.Format("{0:dddd, MMMM d, yyyy}", dt);// "Sunday, March 9, 2008"

// two/four digit year
String.Format("{0:MM/dd/yy}", dt);// "03/09/08"

String.Format("{0:MM/dd/yyyy}", dt);// "03/09/2008"

Standard DateTime Formatting

In DateTimeForma­tInfo there are defined standard patterns for the current culture. For example property ShortTimePattern is string that contains value h:mm tt for en-US culture and value HH:mm for de-DE culture.
Following table shows patterns defined in DateTimeForma­tInfo and their values for en-US culture. First column contains format specifiers for the String.Format method.
SpecifierDateTimeFormatInfo propertyPattern value (for en-US culture)
tShortTimePatternh:mm tt
dShortDatePatternM/d/yyyy
TLongTimePatternh:mm:ss tt
DLongDatePatterndddd, MMMM dd, yyyy
f(combination of D and t)dddd, MMMM dd, yyyy h:mm tt
FFullDateTimePatterndddd, MMMM dd, yyyy h:mm:ss tt
g(combination of d and t)M/d/yyyy h:mm tt
G(combination of d and T)M/d/yyyy h:mm:ss tt
mMMonthDayPatternMMMM dd
yYYearMonthPatternMMMM, yyyy
rRRFC1123Patternddd, dd MMM yyyy HH':'mm':'ss 'GMT' (*)
sSortableDateTi­mePatternyyyy'-'MM'-'dd'T'HH':'mm':'ss (*)
uUniversalSorta­bleDateTimePat­ternyyyy'-'MM'-'dd HH':'mm':'ss'Z' (*)
(*) = culture independent
Following examples show usage of standard format specifiers in String.Format method and the resulting output.
[C#]


        String.Format("{0:t}", dt);  // "4:05 PM" ShortTime

String.Format("{0:d}", dt);  // "3/9/2008" ShortDate
String.Format("{0:T}", dt);  // "4:05:07 PM" LongTime
String.Format("{0:D}", dt);  // "Sunday, March 09, 2008" LongDate

String.Format("{0:f}", dt);  // "Sunday, March 09, 2008 4:05 PM" LongDate+ShortTime
String.Format("{0:F}", dt);  // "Sunday, March 09, 2008 4:05:07 PM" FullDateTime
String.Format("{0:g}", dt);  // "3/9/2008 4:05 PM" ShortDate+ShortTime

String.Format("{0:G}", dt);  // "3/9/2008 4:05:07 PM" ShortDate+LongTime
String.Format("{0:m}", dt);  // "March 09" MonthDay
String.Format("{0:y}", dt);  // "March, 2008" YearMonth

String.Format("{0:r}", dt);  // "Sun, 09 Mar 2008 16:05:07 GMT" RFC1123
String.Format("{0:s}", dt);  // "2008-03-09T16:05:07" SortableDateTime
String.Format("{0:u}", dt);  // "2008-03-09 16:05:07Z" UniversalSortableDateTime





Read more ...

Related Posts Plugin for WordPress, Blogger...