"An investment in knowledge pays the best interest"

Posts

Showing posts from 2012

How to export php/html page to Excel,Word & CSV file format

This class can generate the necessary request headers to make the outputted HTML be downloaded as a file by the browser with a file name that makes the file readable by Excel(.xls),Word(.doc) and CSV(.csv). Step1: Create PHP file named 'ExportPHP.class.php' ExportPHP.class.php <?php class ExportPHP { // method for Excel file function setHeaderXLS ( $file_name ) { header( "Content-type: application/ms-excel" ); header( "Content-Disposition: attachment; filename=$file_name" ); header( "Pragma: no-cache" ); header( "Expires: 0" ); } // method for Doc file function setHeaderDoc ( $file_name ) { header( "Content-type: application/x-ms-download" ); header( "Content-Disposition: attachment; filename=$file_name" ); header( 'Cache-Control: public' ); } // method for CSV file function setHeaderCSV (

How to sort a file content alphabetically/ numerically using PHP with Linux command

Code <?php class sortFile { function sort ( $file ) { exec ( "cat > temp.txt" ); // Create a temp file exec ( "chmod 777 temp.txt" ); // Give permission for temp.txt exec ( "sort -k1 " . $file . " > temp.txt" ); // sort the first column(k1) of test.txt and save to temp.txt exec ( "rm test.txt" ); // delete test.txt exec ( "mv temp.txt " . $file . "" ); // rename temp.txt to test.txt } } $sortfile = new sortFile(); $sortfile -> sort ( "test.txt" ); ?>

JavaScript Auto Refresh

Demo Create a HTML page with the below code & the page will refresh every 5 seconds. Code <script type="text/JavaScript"> timedRefresh(5000); function timedRefresh(timeoutPeriod) { setTimeout("location.reload(true);",timeoutPeriod); } </script> <p>This page will refresh every 5 seconds. We are passing in the value '5000', which equals 5 seconds.</p>

How to Submit a Form Using Jquery

Demo Code <script src= "http://code.jquery.com/jquery-latest.js" ></script> <form action= "#" target= "_blank" > <input type= "text" /> <input type= "submit" /> </form> <span style= "color:red;" id= 'alert' ></span> <script> $( "form" ).submit( function () { if ($( "input:first" ).val() != "" ) return true ; $( "#alert" ).text( "Empty Text Box!!" ).show().fadeOut( 1500 ); return false ; }); </script>

How to draw circle in HTML using CSS

Demo Code <div style= "border:2px solid #a1a1a1; background:#dddddd; width:300px; height:300px; border-radius:150px;" ></div>

Simple Horizontal navigation bar using CSS

Demo Home Serive Whats New Contact Code <style type="text/css"> #Nav { list-style-type:none; margin:0; padding:0; padding-top:6px; padding-bottom:6px; } #Nav li { display:inline; } #Nav a:link,#Nav a:visited { font-weight:bold; color:#FFFFFF; background-color:black; text-align:center; padding:6px; text-decoration:none; text-transform:uppercase; } #Nav a:hover,#Nav a:active { background-color:#F0F0E0; color:black; } </style> <ul id="Nav"> <li><a href="#home">Home</a></li> <li><a href="#news">Serive</a></li> <li><a href="#contact">Whats New</a></li> <li><a href="#about">Contact</a></li> </ul>

How to get the color code from a Web page using JQuery

Demo Click on any box Code <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sampleTable div").click(function(){ $("#color").html($(this).css("background-color")); }); }); </script> </head> <body> <table id="sampleTable"> <tr> <td><div style="width:100px;height:100px;background:#ff0000"></div></td> <td><div style="width:100px;height:100px;background:#00FF00"></div></td> <td><div style="width:100px;height:100px;background:#0000FF"></div></td> </tr> </table> <p id="color">Click on any box</p> </body> </html>

Nice JQuery Tree Plugins

There are many Tree plugins for there to fulfill this requirement. I have picked top most roubust tree plugins there. Treeview Treeview is a another robust and Lightweight JQuery Plugin for creating expandable and collapsable trees in your website.It transforms unordered list into an expandable and collapsable tree. It is free to use and comes under MIT/GPL liecence. Demos: http://jquery.bassistance.de/treeview/demo/ Documentation: http://docs.jquery.com/Plugins/Treeview Download: http://github.com/jzaefferer/jquery-treeview DynaTree Dynatree is a optimized dynamic JQuery tree view plugin which creates Dom elements only when they are need. It has a support for for checkboxes,hierarchical selection and drag and drop. Dynatree also has ajax and lazy loading support. Licence: Open source (MIT and GPL License) Demo: http://wwwendt.de/tech/dynatree/doc/samples.html Download: http://code.google.com/p/dynatree/ Docum

Getting Browser Information using JQuery

Code <script src="http://code.jquery.com/jquery-latest.js"></script> <p style="color:blue">Browser information:</p> <script> jQuery.each(jQuery.browser, function(i, val) { $("<div>" + i + " : <span>" + val + "</span>") .appendTo( document.body ); });</script>

Select a textbox’s text on focus using jQuery

Demo Code <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ $("#txt").focus(function() { $(this).select(); }); }); </script> <input type="text" id="txt" value="Click Here to select all">

JavaScript Analog Clock(Gheos Analog Clock)

It Will look like this!!! Online Demo Ref: http://www.gheos.net/js/clock/ Code Just copy (Ctrl+C) and paste the following code into your HTML <SCRIPT LANGUAGE="JavaScript">var clocksize='100px';</SCRIPT> <SCRIPT SRC="http://gheos.net/js/clock.js"></SCRIPT>

Print a Web Page Using JavaScript

Demo Click here to Print This Page Code <A HREF="javascript:window.print()">Click to Print This Page</A>

jQuery E-mail Validation (Validate email address using JavaScript)

Demo Validate Code <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ function validateEmail($email) { var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; if( !emailReg.test( $email ) ) { return false; } else { return true; } } $("#butt").click(function(){ if($("#txt").val()!="") { if(validateEmail($("#txt").val())) alert('Okay!! Valid Email id'); else alert('Sorry!! Invalid Email id'); } else alert("Hey!! Please Type anything"); }); }); </script> <input type="text" id="txt"><button id="butt">Validate</button>

Mouse position at mouse pointer JavaScript

Demo Code <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ $("#divId").mousemove(function(event) { msg= event.pageX+ ", " + event.pageY; $("#pointer").css({"left":event.pageX+10,"top":event.pageY+10}).text(msg); }); }); </script> <div id="divId" style="width:200px;height:200px;border:1px solid #F0F0E0;background-color:FFFFF0"></div> <span style="position:absolute;cursor:default" id="pointer"></span>

Dynamically Adding and Removing Text Boxes using JavaScript

Demo Sl Name Mark 1 Name1 89 2 Name2 95 Add New Code <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ $("#butt").click(function(){ $("#tableId tbody").append("<tr><td><input type='text' ></td><td><input type='text'></td><td><input type='text' ><img src='img.png' onClick='remove($(this));'></td></tr>"); }); }); function remove(name) { name.closest('tr').remove(); } </script> <table id="tableId"> <thead> <tr> <th >Sl</th> <th >Name</th> <th >Mark</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Name1</td> <td>89&

JavaScript Clock(Digital Clock)

Demo Code <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function showTime() { var today=new Date(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); // add a zero in front of numbers<10 h=checkTime(h); m=checkTime(m); s=checkTime(s); $("#clock").text(h+":"+m+":"+s); t=setTimeout('showTime()',1000); } function checkTime(i) { if (i<10) { i="0" + i; } return i; } </script> <body onload="showTime()"> <div id="clock"></div> </body>

JavaScript search (jQuery)

Demo Input Algeria Brazil China Czech Republic Dominica Ecuador Finland Germany Honduras Code <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ $("#txtBox").keyup(function(){ $("#list li").each(function(){ $(this).css('background-color','white'); if((($(this).text()).toLowerCase()).indexOf(($("#txtBox").val()).toLowerCase())>=0) $(this).css('background-color','#F0F0E0'); }); }); }); </script> Input<input type="text" id="txtBox"/> <ul id="list"> <li>Algeria</li> <li>Brazil</li> <li>China</li> <li>Czech Republic</li> <li>Dominica</li> <li>Ecuador</li> <li>Finland</li> <li>Germany</li> <li>Honduras</li> <

Find sub string position JavaScript

Demo Water is a chemical substance with the chemical formula H2O Find Position Code <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ $("#butt").click(function(){ var position=($("#str").text().toLowerCase()).indexOf($("#txtBox").val()); if(position>0) alert(position); else alert("Not Found"); }); }); </script> <span id="str"> Water is a chemical substance with the chemical formula H2O </span> <br/> <input type="text" id="txtBox"/> <button id="butt">Find Position</button>

Flexigrid with PostgreSQL DataBase

Lightweight but rich data grid with re-sizable columns and a scrolling data to match the headers, plus an ability to connect to an XML or JSON data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration. How to Use Adding the Flexigrid to your webpage couldn't be easier. Just download the code from http://www.flexigrid.info and copy the required files into your site's directories. You must also have a version of jQuery running on your site for this to work which can be found at jquery.com. You will find a flexigrid.js file in the downloaded archive. Include this file in the head section of your site as you would normally do along with the provided CSS file (you will need to copy across the entire contents of the 'css' directory including the images). After creating a tab

Highlight the row on mouse hover

Demo Sl Name Mark 1 Name1 90 2 Name2 80 3 Name3 95 Code <script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#table tr").hover( function() { $(this).find("td").css('background-color', '#FF9966') }, function() { $(this).find("td").css('background-color', "WHITE"); } ); }); </script> <style type="text/css">  </style> <table width="50%" id="table" style="border-collapse:collapse"> <thead> <tr> <th bgcolor="#2A7FAA"><span class="style2">Sl</span></th> <

JavaScript Counter (JavaScript Timer)

Demo Input Time(hh:mm:ss) Start Timer : : Code <script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script> <script type="text/javascript"> function init() { var x=($("#time").val()).split(":"); timer.init(x[0],x[1],x[2]); } var timer = { minutes :0, seconds : 0, elm :null, samay : null, sep : ':', init : function(h,m,s) { h = parseInt(h,10); m = parseInt(m,10); s = parseInt(s,10); if(h < 0 || m < 0 || s <0 || isNaN(h) || isNaN(m) || isNaN(s)) { alert('Invalid Values'); return; } this.hours = h; this.minutes = m; this.seconds = s; timer.start(); }, start : function() { this.samay = setInterval((this.doCountDown),1000); }, doCountDown : function() { if(timer.seconds == 0) { if(timer.minutes == 0)

Move selected elements into other list box JavaScript

Demo C C++ Java Cobol Python >> > < << Code <script src="jquery.js" ></script> <script> $(document).ready(function(){ $("#butt2").click(function(){ $("#availableSubjectList option:selected").each(function () { $(this).remove(); $("#allocatedSubjects").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"); }); }); $("#butt3").click(function(){ $("#allocatedSubjects option:selected").each(function () { $(this).remove(); $("#availableSubjectList").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"); }); }); $("#butt4").click(function(){ $("#allocatedSubjects option")

Age Calculator JavaScript

Demo DoB(dd/mm/yyy) Find Code <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" > $(document).ready(function(){ $('button').click(function(){ // The number of milliseconds in one day var ONE_DAY = 1000 * 60 * 60 * 24 today=new Date(); x=($('input').val()).split("/"); var bday=new Date(x[2],parseInt(x[1]-1),x[0]); // Convert both dates to milliseconds var date1_ms = bday.getTime() var date2_ms = today.getTime() // Calculate the difference in milliseconds var difference_ms = Math.abs(date2_ms - date1_ms) // Convert back to days and return $("span").text(Math.round((difference_ms/ONE_DAY)/365)+ " Years "+Math.round((difference_ms/ONE_DAY)%365) +" Days "); }); }); </script> DoB(dd/mm/yyy)<input type="text"><button>Fi

Image fade effect on mouse hover

Code <img src="img.jpg" style="opacity:0.4;filter: alpha(opacity=40)" onmouseover="this.style. opacity=1;this.filters.alpha. opacity=100" onmouseout="this.style. opacity=0.4;this.filters. alpha.opacity=40" />

Key Code Test Page (Javascript)

Input value: onKeyPress onKeyUp onKeyDown event.keyCode event.charCode event.which

Traverse the cursor through text box with navigation(arrow) keys

Code <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> Traverse the cursor through text box with navigation keys <script> $(document).ready(function(){ $('input').keyup(function(e){ if(e.which==39) $(this).closest('td').next().find('input').focus(); else if(e.which==37) $(this).closest('td').prev().find('input').focus(); else if(e.which==40) $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus(); else if(e.which==38) $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus(); }); }); </script> </head> <body> <table> <tr> <td><input type="tex

CSS Color Chart (Color Code)

Neutral Colors Color Name Color Code Color Name Color Code Pearly Gates #FFFFF2 Pale Olive #FBF5E6 Ultra Pure White #FFFFFF Frosted Lime #F6F9ED White Orchid #FDFDF0 Green Veil #EEF3E2 Gray Cliffs #EBECE4 Far Horizon #ECF1EF Plantation White #FFFFFE Warm Summer #FCF6CF Ivory Tusk #FDFCDC Eggshell Cream #FEFEF2 Toasted Meringue #F1EDC2 Light Sand #FEFFEF Carmel Tan #FEF0C9 Wedding Veil #FFFFFD Subtle White #FEFFF1 Warm Shadow #FEF6E4 Sand Box #FEF5CA Frosted Peach #FCF8DC Dusted Pink #FEEECD Porcelain White #FEF9ED Light Adobe #FFEECA Barely Blushing #FEEED4 Dusty Trail #FEF1E1 Ostrich Feather #FEF1E9 White Sail #FFFFF3 Morning Fog #FDF2EE Dove Beige #FEE0C6 General Purpose Colors Color Name Color Code Color Name Color Code aliceblue #F0F8FF antiquewhite #FAEBD7 antiquewhite1 #FFEFDB antiquewhite2 #EEDFCC antiquewhite3 #CDC0B0 antiquewhite4 #8B8378 aquamarine #7FFFD4 aquamarine1 #7FFFD4 aquamarine2 #76EEC6 aquamarine3 #66CDAA aquamarine4 #458