Posts

Showing posts from 2012

Differences between Html4 and Html5

-
HTML5 has several goals which differentiate it from HTML4. The primary one is  consistent, defined error handling . As you know, HTML purposely supports 'tag soup', or the ability to write malformed code and have it corrected into a valid document. The problem is that the rules for doing this aren't written down anywhere. When a new browser vendor wants to enter the market, they just have to test malformed documents in various browsers (especially IE) and reverse-engineer their error handling. If they don't, then many pages won't display correctly (estimates place roughly 90% of pages on the net as being at least somewhat malformed). So, HTML5 is attempting to discover and codify this error handling, so that browser developers can all standardize and greatly reduce the time and money required to display things consistently. As well, long in the future after HTML has died as a document format, historians may still want to read our documents, and having a complet
1 comment
Read more

What is Html5

-
Introducing HTML5 HTML5 introduces a number of new tags and makes several others obsolete. That doesn’t mean an earlier version, such as HTML4.01, won’t display properly in the latest web browsers, as they all have excellent backwards compatibility. However, you should swap obsolete tags for their HTML5 alternatives. If you’ve already built a website, you should be familiar with using <div> to define a block on the page, which you can then style, up using CSS. This has been retained in HTML5, along with <span> (to pick out inline blocks for individual formatting) and joined by specific block types including <nav>, which is used to define a navigation element, such as a menu. Many new tags help to define the content of a page rather than just position it within the flow. For example, <figure> ties an image to its caption, let ting you style the pair as a single block and to sub-style the contents- image and caption – individually inside it. Even if you don’t
1 comment
Read more

Php and Javascript Cookies

-
Set cookie through PHP and get through JavaScript <?php //Page: set_cookie.php //$_SERVER['HTTP_HOST'] = 'http://www.webduos.com '; // localhost create problem on IE so this line // to get the top level domain $myDomain = ereg_replace('^[^\.]*\.([^\.]*)\.(.*)$', '\1.\2', $_SERVER['HTTP_HOST']); $setDomain = ($_SERVER['HTTP_HOST']) != "localhost" ? ".$myDomain" : false; setcookie ("site", 'http://only-your-views.blogspot.com', time()+3600*24*(2), '/', "$setDomain", 0 ); // You can change (2) to any negative value (-2) for deleting it. It is number of days for cookie to keep live. Any -ve number will tell browser that it is useless now. ?> Page: get_cookie.html <script> function readCookie(name) { var cookiename = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' '
Post a Comment
Read more

Slider Navigation using Jquery

-
Html Structure The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: <ul id="navigation">  <li class="home"><a title="Home"></a></li>  <li class="about"><a title="About"></a></li>  <li class="search"><a title="Search"></a></li>  <li class="photos"><a title="Photos"></a></li>  <li class="rssfeed"><a title="Rss Feed"></a></li>  <li class="podcasts"><a title="Podcasts"></a></li>  <li class="contact"><a title="Contact"></a></li> </ul> The list is getting an ID because we want to refer to it later in the JavaScript. With jQuery, we will make the link items slide out whenever we hover over the
Post a Comment
Read more

How to Create Custom Ajax Tabs with Jquery

-
HTML : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />      <title>Tabs Demo</title>      <link rel="stylesheet" href="./main.css" />      <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>      <script type="text/javascript" src="./main.js"></script> </head> <body>      <div id="page">           <ul id="tabs">                <li><a href="./tabs/tab-1.html">Tab 1</a></li>                <li><a href="./tabs/tab-2.html">Tab 2</a></li>                <li><a href="./tabs/ta
Post a Comment
Read more

Input Validation Using Filter Functions

-
The filter_input() function was introduced in PHP 5.2.0 and allows you to get an external variable by name and filter it. This is incredibly useful when dealing with $_GET and $_POST data. Let’s take as an example a simple page that reads a value passed in from the URL and handles it. We know this value should be an integer between 15 and 20. One way of doing would be something like: <?php if (isset($_GET["value"])) { $value = $_GET["value"]; } else { $value = false; } if (is_numeric($value) && ($value >= 15 && $value <= 20)) { // run my code } else { // handle the issue } This is a really basic example and already we are writing more lines that I would like to see. First, because we can’t be sure $_GET is set, the code performs an appropriate check so that the script doesn’t fall over. Next is the fact that $value is now a “dirty” variable because it has been directly assigned from a $_GET value. We would need to take
2 comments
Read more

Jquery Table Sorter

-
To use the tablesorter plugin, include the   jQuery   library and the tablesorter plugin inside the   <head>   tag of your HTML document: <script type="text/javascript" src="/path/to/jquery-latest.js"></script> <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>   Tablesorter works on standard HTML tables. You must include THEAD and TBODY tags: <table id="myTable" class="tablesorter"> <thead> <tr>     <th>Last Name</th>     <th>First Name</th>     <th>Email</th>     <th>Due</th>     <th>Web Site</th> </tr> </thead> <tbody> <tr>     <td>Smith</td>     <td>John</td>     <td>jsmith@gmail.com</td>     <td>$50.00</td>     <td>http://www.jsmith.com</td> </tr> <tr>     <td>B
Post a Comment
Read more

Using Cookies with PHP

-
A cookie is set with the following code: setcookie(name, value, expiration) <?php $Month = 2592000 + time(); //this adds 30 days to the current time setcookie(AboutVisit, date("F jS - g:i a"), $Month); ?>      The above code sets a cookie in the visitor's browser called "AboutVisit". The cookie sets the value to the current date , and set's the expiration to be be in 30 days (2592000 = 60 seconds * 60 mins * 24 hours * 30 days.) Now let's retrieve the cookie. <?php  if(isset($_COOKIE['AboutVisit'])) {  $last = $_COOKIE['AboutVisit'];  echo "Welcome back! <br> You last visited on ". $last;  } else {   echo "Welcome to our site!";   }   ?>   This code first checks if the cookie exists. If it does, it welcomes the user back and tells them when they last visited. If they are new, it skips this and prints a generic welcome message. TIP:   If you are calling a cooking on the same pag
1 comment
Read more

Fading effect to Html popup

-
<!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=utf-8" /> <title>Untitled Document</title> <script type='text/javascript'> // Browser safe opacity handling function function setOpacity( value ) {  document.getElementById("styled_popup").style.opacity = value / 10;  document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')'; } function fadeInMyPopup() {  for( var i = 0 ; i <= 100 ; i++ )    setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i ); } function fadeOutMyPopup() {  for( var i = 0 ; i <= 100 ; i++ ) {    setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );  }  setT
Post a Comment
Read more

Regex password validation in javascript

-
In this first example, the password must be at least 8 characters long and start and end with a letter.  var  re = /^[A-Za-z]\w{6,}[A-Za-z]$/; if  (!re.test(myString)) { alert( "Please enter a valid password!" ); } In this second example, the password length doesn't matter, but the password must contain at least 1 number, at least 1 lower case letter, and at least 1 upper case letter.  var  re = /^\w*(?=\w*\d)(?=\w*[a-z])(?=\w*[A-Z])\w*$/ if  (!re.test(myString)) { alert( "Please enter a valid password!" ); } Password Regular Expression Pattern is as follows: ( ( ?= . * \d ) ( ?= . * [ a - z ] ) ( ?= . * [ A - Z ] ) ( ?= . * [ @#$ % ] ) . { 6 , 20 } ) Explanation : ( # Start of group ( ?= . * \d ) # must contains one digit from 0 - 9 ( ?= . * [ a - z ] ) # must contains one lowercase characters ( ?= . * [ A - Z ] ) # must contains one uppercase characters ( ?= . * [ @#$ % ] ) # must contains one special symbols in the
Post a Comment
Read more

Add and delete columns dynamically in an HTML table

-
To add new rows to a table (or table section) you can use insertRow, but there isn't an equivalent insertColumn in the  DOM table methods . So what you can do is iterate the rows in the table (or table section), and call insertCell for each row. Javascript:   tableaddcolumn.js // 2006-08-21 - Created // 2006-11-05 - Modified - head and body function addColumn(tblId) { var tblHeadObj = document.getElementById(tblId).tHead; for (var h=0; h<tblHeadObj.rows.length; h++) { var newTH = document.createElement('th'); tblHeadObj.rows[h].appendChild(newTH); newTH.innerHTML = '[th] row:' + h + ', cell: ' + (tblHeadObj.rows[h].cells.length - 1) } var tblBodyObj = document.getElementById(tblId).tBodies[0]; for (var i=0; i<tblBodyObj.rows.length; i++) { var newCell = tblBodyObj.rows[i].insertCell(-1); newCell.innerHTML = '[td] row:' + i + ', cell: ' + (tblBodyObj.rows[i].cells.length - 1) } } function deleteColumn(tblId) { v
1 comment
Read more

Add and delete rows dynamically in an HTML table

-
Explanation A row is inserted at the end of the table using the  insertRow  method, and two cells are added. One cell has just text, and the other cell has an HTML input. There is more than one way to accomplish this. The technique here uses  document.createTextNode  and  document.createElement  to create the text and HTML input, respectively. If you enter text into the text boxes, they are not affected when new rows are added. Each row gets a unique name, so if the values are being submitted to a server-side page, it can look for txtRow1, txtRow2, etc. The Remove button deletes the last row using table method  deleteRow . The JavaScript does a check to prevent the header or first row from being deleted. The JavaScript // Last updated 2006-02-21 function addRowToTable() { var tbl = document.getElementById('tblSample'); var lastRow = tbl.rows.length; // if there's no header row in the table, then iteration = lastRow + 1 var iteration = lastRow; var row = tbl.i
Post a Comment
Read more

Simple Tooltip for multiple rows

-
There are many, many jQuery tooltip plugins out there, and some of them are very good. But when someone on the jQuery Google Group asked (a year ago) which plugin could handle displaying tooltips for 2,000 links on a page, I wasn't able to find one. So, I decided to throw together a quick little plugin myself and was surprised by how easy it was. Javascript: $('<div id="livetip"></div>').hide().appendTo('body'); var tipTitle = ''; $('a').live('mouseover', function(event) {   var $link = $(this);   tipTitle = this.title;   this.title = '';   $('#livetip')   .css({     top: event.pageY + 12,     left: event.pageX + 12   })   .html('<div>' + tipTitle + '</div><div>' + this.href + '</div>')   .show(); }).live('mouseout', function(event) {   this.title = tipTitle;   $('#livetip').hide(); }); This script does the followin
Post a Comment
Read more