Cookies handling using javascript

This simple post explained the cookie handling including create,get and delete cookies by using javascript.In one of my ruby project I'm struggled with retained client side paging (Paging using javascript) on that time I'm using this client side cookies to over come that problem.I thing you may use this concept to client side paging,sorting,keep dropdown sclected index and other client side actions.


Code:


<script src="../cookies.js"></script>
 

Step 1: Check cookies is enabled

Before go to create cookie you have to check if the cookies are allowed.

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

    
function isCookiesEnabled () {
        
if (testSessionCookie())
            
alert ("Session coookies are enabled")
        
else
            alert 
("Session coookies are not enabled");
    
}

</script>


  Click to see if session cookies are allowed:


Step 2: Create cookie:

        The next step you can give a name and value for your cookie.
 
<script type="text/javascript" language="javascript">

    
function setCookie(){

        
if (testSessionCookie()) {

               
var myName = document.getElementById('addCookiName').value;

            var 
myValue = document.getElementById('addCookiValue').value;

            
createCookie (myName, myValue);
            alert 
("Session cookie created");
        
}
        
else
        
{
            
alert ("Sorry - session cookies are currently disabled.");
        
}     

}
</script>

Demo: 

Create cookie:

Cookie name:

Cookie value:


 
Step: 3: Get value from cookies by using its name


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

    
function getCookie () {
        
var myCookieName = document.getElementById('getCookiName').value;
        if 
(getCookieValue (myCookieName))
            
alert ('The value of the Cookie is "' + getCookieValue (myCookieName) + '"')
        
else
            alert 
("Cookie not found");
    
}

</script
 

Demo:

Get value from cookie by using it's name
Cookie name:

Step 4:

And finally you can delete value from cookie by using the following nethod


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

    
function deleteCookies () {
        
var myCookieName = document.getElementById('deleteCookiName').value;
        if
(myCookieName !""){
            
if (!getCookieValue (myCookieName))
                
alert ('Cookie does not exist')
           
else  {
                deleteCookie(myCookieName)
;
                alert 
("Cookie deleted successfully");

            
}
        }        
else

        
{

            
alert ('Cookie does not exist')
        }

    }

</script>

Demo: 

Delete value from cookie by using it's name
Cookie name:


You can download full source code from here...
Read more ...

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


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:




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

Related Posts Plugin for WordPress, Blogger...