Check all checkboxes using JavaScript

Posted by Prince | 7:49:00 PM | | 1 comments »

Javascript Check and Uncheck All Checkboxes:
This is a simple script to check all check boxes in a form using javascript.
You can check all the check boxes inside the table by clicking another one check box placed in header of that table.
In that same way you can uncheck all checkboxes.If you unchecking a single check box from inside the table then the header(main) check box is automatically go to unchecked state.
Read more ...
Read more »

Find IP Address using Javascript

Posted by Prince | 1:22:00 PM | | 0 comments »


How to find IP Address using Javascript?
   I'm using an external tool to find the Ip address through javascript.If you want you can use this
<html>
<head>
<title>What Is Your Ip</title>
<script language="JavaScript">
<!--
 var ip_list = {};
function FoundIp(ip, type) {
 // type: 4=ipv4 6=ipv6 0=unknown (autodetect)
if (type == 0) {
type = 4;
if (ip.indexOf(':') != -1) type = 6;
}
ip_list[ip] = type;
}

function MyIpIs() {
for(ip in ip_list) {
document.getElementById('myIp').innerHTML = ip;
} 
}
// -->
</script>
<script language="JavaScript" src="http://only-ip4.wimip.fr/ip.php"></script>
</head>
<body onload="MyIpIs();">
 <span>Your IP Address Is:</span>
<span id="myIp"></span>
</body>
</html>



Online Demo:
In this example I'm using an external tool to find the Ip address through javascript.If you want you can use this
Your IP Address Is:
Read more ...

Javascript text counter

Posted by Prince | 7:23:00 PM | | 0 comments »

This javascript function counts the number of remaining characters in a given input element  and trims the string if the length is bigger that the maximum allowed value.

Code for Javascript text counter:
<html>
<head>
<title>Java script text counter</title>
<script language="javascript" type="text/javascript">
 
function charCounter(element,length,counterField,counterType){

if(element != null){

if(counterType == 'increment'){

counterField.value = element.value.length;

}else{

if(element.value.length > length)

element.value = element.value.substring(0,length);

else

counterField.value = length - element.value.length;

}

}

}

</script>

</head>
<body>
<div>
<textarea id="txtDescription" name="Description" onkeyup="javascript:charCounter(this,50,txtCounter,'');" onkeydown="javascript: charCounter(this,50,txtCounter,'')" rows="3" cols="30"></textarea>
</div>
<div>
<input readonly="readonly" name="txtCounter" id="txtCounter" size="4" maxlength="4"
value="0" type="text" /> characters left
</div>
</body>
</html>


Demo:
 characters left


Read more ...

Sorting HTML Tables using Javascript

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

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

Subscribe to: Posts (Atom)
Related Posts Plugin for WordPress, Blogger...