"An investment in knowledge pays the best interest"

Posts

Showing posts from February, 2012

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