Amoraboti - Program
Rashed - Uz - Zaman (Rasel)
  Home About Me Brainstorming Facebook Fan Page Contact    
  Author
I'm Rz Rasel
From Bangladesh

  Archives
April 2010
May 2010
January 2011
February 2011
January 2012
February 2012
March 2012

  Current
Current Posts

  Previous Posts
d
e
2
B
Php:- Check For Valid Email Address
How To Insert Unicode Values To MySQL Using Java
Multiple Checkbox Select/Deselect JavaScript And j...
Dynamically Add/Remove rows in HTML table using Ja...
Dynamically add button, textbox, input, radio elem...
Changing Form Input (Textbox) Style on Focus using...

  My Link
Islam And We
My Diary (Bangla)
My Diary (English)
My Lyrics (Bangla)
My Lyrics (English)
My Poem (Bangla)
My Poem (English)
My Story (Bangla)
My Story (English)
General Knowledge
Fun And Jokes
Lyrics (Bangla)
Lyrics (English)
Lyrics (Hindi)
Quotations
 
 
  Multiple Checkbox Select/Deselect JavaScript And jQuery  
  Friday, February 11, 2011  
 
<HTML>

<HEAD>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<TITLE>Rz Rasel</TITLE>

<STYLE>

body, input{

font-family: Calibri, Arial;

margin:0px;

}

h1 {

margin: 0 0 0 20px;

}

html, body, #container { height: 100%; }

body > #container { height: auto; min-height: 100%; }


#header {

height:50px;

background-color:#ddd;

border-bottom:1px solid #aaa;

width:100%;

}

#footer {

font-size: 12px;

clear: both;

position: relative;

z-index: 10;

height: 3em;

margin-top: -3em;

text-align:center;

}


table {

width: 300px;

border: 1px solid;

border-collapse:collapse;

margin: 0 0 0 20px;

}

th {

background-color:#3E6DB0;

color: white;

padding: 5px;

}

</STYLE>

</HEAD>

<BODY>

<div id="container">

<div id="header">

<H1>Multiple Checkbox Select/Deselect</H1>

</div>

<p>&nbsp;</p>


<table border="1">

<tr>

<th><input type="checkbox" id="selectall"/></th>

<th>Cell phone</th>

<th>Rating</th>

</tr>

<tr>

<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>

<td>BlackBerry Bold 9650</td>

<td>2/5</td>

</tr>

<tr>

<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>

<td>Samsung Galaxy</td>

<td>3.5/5</td>

</tr>

<tr>

<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>

<td>Droid X</td>

<td>4.5/5</td>

</tr>

<tr>

<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>

<td>HTC Desire</td>

<td>3/5</td>

</tr>

<tr>

<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>

<td>Apple iPhone 4</td>

<td>5/5</td>

</tr>

</table>


</div>

<div id="footer">

Copyright &copy; Rz Rasel

</div>


</BODY>

<SCRIPT>

$(function(){


// add multiple select / deselect functionality

$("#selectall").click(function () {

$('.case').attr('checked', this.checked);

});


// if all checkbox are selected, check the selectall checkbox

// and viceversa

$(".case").click(function(){


if($(".case").length == $(".case:checked").length) {

$("#selectall").attr("checked", "checked");

} else {

$("#selectall").removeAttr("checked");

}


});

});

</SCRIPT>

</HTML>

 
  posted by Rz Rasel At 11:40 AM, ,  
     
  Dynamically Add/Remove rows in HTML table using JavaScript  
   
 
<HTML>

<HEAD>

<TITLE>Rz Rasel</TITLE>

<SCRIPT language="javascript">

function addRow(tableID) {

var table = document.getElementById(tableID);


var rowCount = table.rows.length;

var row = table.insertRow(rowCount);


var cell1 = row.insertCell(0);

var element1 = document.createElement("input");

element1.type = "checkbox";

cell1.appendChild(element1);


var cell2 = row.insertCell(1);

cell2.innerHTML = rowCount + 1;


var cell3 = row.insertCell(2);

var element2 = document.createElement("input");

element2.type = "text";

cell3.appendChild(element2);


}


function deleteRow(tableID) {

try {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;


for(var i=0; i<rowCount; i++) {

var row = table.rows[i];

var chkbox = row.cells[0].childNodes[0];

if(null != chkbox && true == chkbox.checked) {

table.deleteRow(i);

rowCount--;

i--;

}


}

}catch(e) {

alert(e);

}

}


</SCRIPT>

</HEAD>

<BODY>

Dynamically Add/Remove rows in HTML table using JavaScript

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />


<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />


<TABLE id="dataTable" width="350px" border="1">

<TR>

<TD><INPUT type="checkbox" name="chk"/></TD>

<TD> 1 </TD>

<TD> <INPUT type="text" /> </TD>

</TR>

</TABLE>


</BODY>

</HTML>

 
  posted by Rz Rasel At 11:20 AM, ,  
     
  Dynamically add button, textbox, input, radio elements in html form using Js  
   
 
<HTML>

<HEAD>

<TITLE>Rz Rasel</TITLE>

<SCRIPT language="javascript">

function add(type) {



//Create an input type dynamically.

var element = document.createElement("input");



//Assign different attributes to the element.

element.setAttribute("type", type);

element.setAttribute("value", type);

element.setAttribute("name", type);



var foo = document.getElementById("fooBar");



//Append the element in page (in span).

foo.appendChild(element);



}

</SCRIPT>

</HEAD>

<BODY>

Dynamically add button, textbox, input, radio elements in html form using JavaScript.

<FORM>

<H2>Dynamically add element in form.</H2>

Select the element and hit Add to add it in form.

<BR/>

<SELECT name="element">

<OPTION value="button">Button</OPTION>

<OPTION value="text">Textbox</OPTION>

<OPTION value="radio">Radio</OPTION>

</SELECT>



<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>



<span id="fooBar">&nbsp;</span>



</FORM>

</BODY>

</HTML>
 
  posted by Rz Rasel At 11:05 AM, ,  
     
  Changing Form Input (Textbox) Style on Focus using jQuery  
   
 
<HTML>

<HEAD>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<TITLE>Rz Rasel</TITLE>

<STYLE>

body, input{

font-family: Calibri, Arial;

}

input {

font-size: 15px;

}

.focus {

border: 2px solid #AA88FF;

background-color: #FFEEAA;

}

</STYLE>

</HEAD>

<BODY>

<H2>Changing Form Input (Textbox) Style on Focus using jQuery</H2>

<FORM id="sample">


<TABLE>

<TR>

<TD>Name </TD>

<TD><INPUT type="text"/></TD>

</TR>

<TR>

<TD>Age</TD>

<TD><INPUT type="text"/></TD>


</TR>

<TR>

<TD>Phone no.</TD>

<TD><INPUT type="text"/></TD>

</TR>

</TABLE>

</FORM>

</BODY>

<SCRIPT>

$('input[type="text"]').focus(function() {

$(this).addClass("focus");

});


$('input[type="text"]').blur(function() {

$(this).removeClass("focus");

});


</SCRIPT>


</HTML>

 
  posted by Rz Rasel At 10:44 AM, ,  
     
  Duration Calculator Between Two Dates  
  Wednesday, February 2, 2011  
 

http://www.codeproject.com/KB/datetime/DateDurationCalculation1.aspx

Introduction

I was looking for a Duration calculator between two dates which gives duration in number of years, number of months and number of days together. It can be defined as Age Calculator which is able to give any one’s exact age in years, months and days.

But unfortunately I didn't find exactly what I was looking for. Most of the calculators give output either in years or in months or in weeks or in days and so on and even in milliseconds, but not all the information together.

I realize that there should be something to calculate duration between two dates and give output in years, months and days together.

Problem

In most of the solutions for this problem, I found that the difference is calculated by the following procedure:

First calculate ‘TimeSpan’ from difference between two dates. Then from the time span, calculate days, from days calculate months, and from months or days calculate years.

This calculates right up to day calculation. But when you calculate month from day, then there is conflict. Because, the length of all the months (length means days) is not the same. Some months contain 28 days, some 30 and 31 for regular years. So, two months could be equivalent to 59 (January + February) days, 61 (March + April) days, 62 (July + August) days and even 60 (February leap year + March) days for leap year. After that when calculating years, there is another conflict, does the year contain 365 days or 366 days (in case of leap year)?

Actually this problem can be easily solved for a single year by adding many conditions. But for a long duration, it is difficult to trace all the leap years and finally generate accurate duration in days, months and years.

Background

Before starting the calculation, we just try to recollect our arithmetic operation basics. When we subtract 19 from 23 (23-19) then what happens? First we try to subtract the first digit ‘9’ (right side of 19) from first digit ‘3’ (right side of 23). Then we find that 3 is less than 9. So, add 10 with ‘3’ and subtract ‘9’ from (3+10); after that we add ‘1’ with ‘1’ second digit of 19 and subtract from the second digit ‘2’ of 23. We add 10 because the base of all the digits is 10.

In the same way, when we try to subtract one date from another (ignoring time) then we have to consider three different type/based numbers, that is day of the month; month of the year and year itself. Let's say we want to subtract date2 from date1 [date format YYY-mm-dd].

  • date1: 2000- 3- 1
  • date2: 1999- 4-10
  • dura: 0y - 10m - 21d

Here date1 is greater than date2, but day of the date1 ‘1’ is smaller then the day of the date2 ‘10’. So according to the arithmetic rule, before subtracting ‘10’ from ‘1’, we have to add a certain number (say x) with ‘1’ to the day of date1. Here x is equivalent to days (considering days is base of a month) of the month of date2. And also add ‘1’ with ‘4’ the month of date2. The number (x) will be different for different months, because different months contain different number of days. For example: for January x = 31, for February x= 28 or 29(for leap year) and so on.

After calculating days, we subtract the month of date2 ‘4’ including ‘1’ (according to day calculation) that is ‘4+1’ from ‘3’. As month of date1 (4+1=5) is less than the month of date2 ‘3’, we have to add 12 with month of date1 and add ‘1’ with year of date2. We are adding ‘12’ with month of date1 because each year contains exactly 12 months.

Finally, the year calculation is a simple arithmetic calculation.

Using the Code

Duration Calculation

Global Variables

Collapse

private int[] monthDay = new int[12] { 31, -1, 31, 30, 31, 30, 31, 31, 30, 31, 30,
31 };
private DateTime fromDate;
private DateTime toDate;
private int year;
private int month;
private int day; 
  • int[] monthDay’ defines Number of days in month, index 0=> January and 11=> December. February contain either 28 or 29 days, that's why here value is -1 which means it will be calculated later.
  • DateTime fromDate’ contain the start date value or smaller date value between two dates.
  • DateTime toDate’ contains the end date value or bigger date value between two dates.
  • int year’ contains year(s) of the output.
  • int month’ contains month(s) of the output.
  • int day’ contains day(s) of the output.

Prepare Data for Calculation

To calculate duration, we need two dates:

Collapse

public DateDifference(DateTime d1, DateTime d2)

Here d1 is the first date and d2 is the second date.

Collapse

if (d1 >d2)
{
    this.fromDate = d2;
    this.toDate = d1;
}
else
{
    this.fromDate = d1;
    this.toDate = d2;
} 

From the two dates, we identify which date is bigger. The bigger one is set as toDate and the smaller one is fromDate so that we always get a positive duration.

Calculation

Day Calculation

Collapse

increment = 0; 
if (this.fromDate.Day > this.toDate.Day)
{ 
    increment = this.monthDay[this.fromDate.Month - 1]; 
}

If ‘this.fromDate.Day’ is greater than ‘this.toDate.Day’, then we store the value in ‘increment’ which will be added to ‘this.toDate.Day’. To get the proper number ‘int[] monthDay’ will help us.

Collapse

if (increment== -1)
{
    if (DateTime.IsLeapYear(this.fromDate.Year))
    {
        increment = 29;
    } 
    else
    {
        increment = 28;
    }
}

Here we check if the month is February? If it is, then what are the number of days?

Collapse

if (increment != 0)
{    
    day = (this.toDate.Day+ increment) - this.fromDate.Day;
    increment = 1; 
}
else
{       
    day = this.toDate.Day - this.fromDate.Day;
}

The simple arithmetic operation is completed. And now ‘increment’ contains the number which will be added to ‘this.fromDate.Month’.

Up to this day, calculation is completed and ‘day’ contains the output’s day(s) result.

Month Calculation

Collapse

if ((this.fromDate.Month + increment) > this.toDate.Month)
{   
    this.month = (this.toDate.Month+ 12) - (this.fromDate.Month + increment);
       increment = 1;
}
else
{    
    this.month = (this.toDate.Month) - (this.fromDate.Month + increment);
    increment = 0;
}

Month calculation is very simple and almost like Day calculation. Here if ‘this.toDate.Month’ is smaller than the result of ( ‘this.fromDate.Month’ + ‘increment’), then just add ‘12’ to ‘this.toDate.Month’ and add ‘1’ to ‘this.fromDate.Year’ (which is stored in ‘increment’); Otherwise, it is just simple subtraction.

Here we add 12 because each year contains exactly 12 months.

Year Calculation

Collapse

this.year = this.toDate.Year - (this.fromDate.Year + increment);

This is just simple arithmetic operation. Nothing to say.

Final Results

Collapse

public int year;
public int month;
public int day;

These are the variables which contain the results of the calculation.

Collapse

public override string ToString()
{    
    return this.year + "Year(s), " + this.month + " month(s), " + this.day + " day(s)";
} 

To get the formatted output, we override the tostring method.

Output

Here is the output for the corresponding input. Input Date format is (yyyy-mm-dd) for user friendly view.

Collapse

Input:
2000-12-1  
1999-2-3
Output: 1 Year(s), 9 month(s), 26 day(s)  
 
Input:
1984-2-14 
2008-8-20 
Output: 24 Year(s), 6 month(s), 6 day(s)  
 
Input: 
2008-7-14  
1960-6-14 
Output: 48 Year(s), 1 month(s), 0 day(s)  
 
Input: 
2008-7-14  
1960-6-14 
Output: 48 Year(s), 1 month(s), 0 day(s)  
 
Input: 
2008-7-13  
1960-5-5 
Output: 48 Year(s), 2 month(s), 8 day(s) 

Conclusion

This article will help you to find out the duration of dates in year, month and day format. The whole code is uploaded here, so anyone can play with it. And if there are any suggestions or corrections, please feel free to share.

 
  posted by Rz Rasel At 4:07 PM, ,  
     
  Get Cursore Position In JavaScript  
   
 

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Rz Rasel</title>


<script type="text/javascript">

window.onload = init;

function init() {

if (window.Event) {

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = getCursorXY;

}


function getCursorXY(e) {

document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);

document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

}

</script>


</head>


<body>

<input type="text" id="cursorX" size="3"> X-position of the mouse cursor

<br /><br />

<input type="text" id="cursorY" size="3"> Y-position of the mouse cursor

</body>

</html>


 
  posted by Rz Rasel At 6:36 AM, ,  
     
  Hide And Prevent Copy Of Web Content Using JavaSript Html Css  
  Tuesday, February 1, 2011  
 
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

.rz_hide_content_by_image_and_save_copy

{

background: transprant url(abc.png);

background-color: #333333;

margin: 0px;

visibility: visible;

display: block;

position: absolute;

z-index: 100000;

-moz-opacity: .01;

filter:alpha( opacity = 1 );

opacity: .01;

}

</style>

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

function rz_hide_content_by_image_and_save_copy( arg_HideImgId, arg_HiedContentId )

{

var hideById = document.getElementById( arg_HideImgId );

var hideItId = document.getElementById( arg_HiedContentId );

//hideById.style.width = screen.availWidth;

//hideById.style.height = screen.availHeight;

//hideById.style.width = screen.availWidth;

//hideById.style.height = 444 + "px";

hideById.className = "rz_hide_content_by_image";

hideById.style.width = hideItId.offsetWidth + "px";

hideById.style.height = hideItId.offsetHeight + 0 + "px";

alert( window.innerWidth + " " + window.pageXOffset + " " + document.documentElement.clientWidth + " " + self.innerWidth + " " + document.body.clientWidth );

alert( window.innerHeight + " " + window.pageYOffset + " " + document.documentElement.clientHeight + " " + self.innerHeight + " " + document.body.clientHeight );

}

</script>

</head>


<body onload="rz_hide_content_by_image_and_save_copy( 'rz_all_content_img_hider', 'rz_cotainer' );">

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td>Rz Rasel</td>

</tr>

<tr>

<td><p>Rz Rasel</p>

<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0099CC">

<tr>

<td id="rz_cotainer">

<div id="rz_all_content_img_hider" class="rz_hide_content_by_image_and_save_copy"></div>

<div id="rz_cotainer1"><p>Rz Rasel</p><p>Rz Rasel</p><p>Rz Rasel</p></div>

<p>Rz Rasel</p><p>Rz Rasel</p><p>Rz Rasel</p>

.photos ul.thumbs li img<br />

{<br />

position: absolute;<br />

top: -180px;<br />

left: -145px;<br />

}

<br />

&nbsp;</td>

</tr>

</table><p>Rz Rasel</p></td>

</tr>

</table>

</body>

</html>

 
  posted by Rz Rasel At 1:28 PM, ,  
     
  Hide All Content Of Website Using JavaScript Html Css  
   
 
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

.rz_body_hide_content_by_image

{

background: transprant url(abc.png);

background-color: #333333;

top: 0px;

left: 0px;

position: absolute;

width: 100%;

z-index: 100000;

-moz-opacity: .1;

filter:alpha( opacity = 10 );

opacity: .1;

}

</style>

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

function rz_body_hide_content_by_image( arg_HideImgId, arg_HiedContentId )

{

var hideById = document.getElementById( arg_HideImgId );

var hideItId = document.getElementById( arg_HiedContentId );

//hideById.style.width = screen.availWidth;

//hideById.style.height = screen.availHeight;

//hideById.style.width = screen.availWidth;

//hideById.style.height = 444 + "px";

//hideById.style.width = hideItId.offsetWidth + 10 + "px";

hideById.style.height = hideItId.offsetHeight + 25 + "px";

alert( window.innerWidth + " " + window.pageXOffset + " " + document.documentElement.clientWidth + " " + self.innerWidth + " " + document.body.clientWidth );

alert( window.innerHeight + " " + window.pageYOffset + " " + document.documentElement.clientHeight + " " + self.innerHeight + " " + document.body.clientHeight );

}

</script>

</head>


<body onload="rz_body_hide_content_by_image( 'rz_all_content_img_hider', 'rz_cotainer' );">

<div id="rz_all_content_img_hider" class="rz_body_hide_content_by_image"><!--Rz Rasel --></div>

<table id="rz_cotainer" width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td>Rz Rasel</td>

</tr>

<tr>

<td>

Rz Rasel<p>Rz Rasel</p>

<p>Rz Rasel</p>

<p>Rz Rasel</p>

<p>Rz Rasel</p>

<p>Rz Rasel</p>

<p>Rz Rasel</p>

<p>Rz Rasel</p>

<p>Rz Rasel</p>

<p>Rz Rasel</p>

<p>Rz Rasel</p>

<p>Rz Rasel</p>

</td>

</tr>

</table>

</body>

</html>

 
  posted by Rz Rasel At 1:20 PM, ,  
     
 
  Problem In Font
Download then zip file unzip and install in your system. Or normal font file just install in your system font folder. Rz Rasel
Bangla Font
Bangla Font

  Find Me In Facebook
 
 

   aaaa
 

   aaaa
 
 
Copyright © 2010 - Amoraboti - Program. ® All right reaserved. Design and developed by:- Rz Rasl