css3-xhtml tutorial: December 2011

Thursday 29 December 2011

HTML5 Input Type - search

The search type is used for search fields, like a site search, or Google search.
The search field behaves like a regular text field.

Input Type - color

The color type is used for input fields that should contain a color.
The Opera browser will allow you to select a color from a color picker, Google's Chrome will only allow hexadecimal color values to be submitted:

Syntax:

Color: <input type="color" name="user_color" />

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Color: <input type="color" name="user_color" />
<input type="submit" />
</form>

</body>
</html>

HTML5 Input Type - Date Pickers

For selecting date and time, HTML5 has several new input types:

date - Selects date, month and year
month - Selects month and year
week - Selects week and year
time - Selects time (hour and minute)
datetime - Selects time, date, month and year (UTC time)
date time-local- Selects time, date, month and year (local time)

select a date from a calendar:

Syntax:

Date: <input type="date" name="user_date" />

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Date: <input type="date" name="user_date" />
<input type="submit" />
</form>

</body>
</html>

select the below input type from a calendar

Input type "month":
Input type "week"
Input type "time":
Input type "datetime"
Input type "datetime-local"

HTML5 Input Type - range

The range that should contain a value from a range of numbers for input fields. This input type is displayed as a slider bar.
You can set number which are accepted:

Syntax:

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10" />
<input type="submit" />
</form>

</body>
</html>

The following attributes specify the range type:

Attribute	Value	Description
max	number	Specifies the maximum value allowed
min	number	Specifies the minimum value allowed
step	number	Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
value	number	Specifies the default value

HTML5 Input Type - Number

The input element number that should contain a numeric value for input fields .

Syntax:

Points: <input type="number" name="points" min="1" max="15" />

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Points: <input type="number" name="points" min="1" max="15" />
<input type="submit" />
</form>

</body>
</html>

The following attributes specify for the number type:

Attribute	Value	Description
max	number	Specifies the maximum value allowed
min	number	Specifies the minimum value allowed
step	number	Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
value	number	Specifies the default value

HTML5 Input Type - url

The URL should contain a URL address for input fields .
When the form is submitted, the value of the url field is automatically validated .

Syntax:

URL_Homepage: <input type="url" name="user_url" />

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Homepage: <input type="url" name="user_url" /><br />
<input type="submit" />
</form>

</body>
</html>

HTML5 Input Type - email

The email type contain an e-mail address, which is used for input fields.
When the form is submitted, the value of the email field is automatically validated .

Syntax:

E-mail: <input type="email" name="user_email" />

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>

</body>
</html>

HTML5 Input Types

HTML5 allows new features for better input control and validation.
It has several new input types for forms.Such as:

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

Browser Support

Input type	IE	Firefox	Opera	Chrome	Safari
email	No	4.0	9.0	10.0	No
url	No	4.0	9.0	10.0	No
number	No	No	9.0	7.0	5.1
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	5.1
search	No	4.0	11.0	10.0	No
color	No	No	11.0	12	No

Note: Opera has the best support for the new input types. However, you can already start using them in all major browsers. If they are not supported, they will behave as regular text fields.

The sessionStorage

The session Storage, stores the data for one session.
The data is deleted when the user closes the browser window.

create and access a session Storage

Syntax:

<script type="text/javascript">
sessionStorage.name="My name is sessonStorage";
document.write(sessionStorage.name);
</script>

Example:

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">

sessionStorage.name="My name is sessonStorage";
document.write(sessionStorage.name);

</script>

</body>
</html>

count the number of times the user has visited in the current page session.

Syntax:

<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

Example:

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">

if (sessionStorage.pagecount)
    {
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
    }
else
    {
    sessionStorage.pagecount=1;
    }
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

</script>

<p>Refresh the page to see the counter increase.</p>

<p>Close the browser window, and try again, and the counter has been reset.</p>
</body>
</html>

The localStorage - HTML5

HTML5 uses JavaScript to store and access the data.
The local Storage object stores the data with no time limit. The data will be available the next day, week, or year.

create and access the data in a local Storage

Syntax:

<script type="text/javascript">
localStorage.lastname="Localstorage";
document.write(localStorage.lastname);
</script>

Example:

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">

localStorage.lastname="Localstorage";
document.write("My Name: " + localStorage.lastname);

</script>

</body>
</html>

count the number of times the user has visited in a page.
Syntax:

<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

Example:

<html>
<body>

<script type="text/javascript">

if (localStorage.pagecount)
    {
    localStorage.pagecount=Number(localStorage.pagecount) +1;
    }
else
    {
    localStorage.pagecount=1;
    }
document.write("Visits: " + localStorage.pagecount + " time(s).");

</script>

<p>Refresh the page to see the counter increase.</p>

<p>Close the browser window, and try again, and the counter will continue.</p>
</body>
</html>

Web Storage in HTML5

HTML5 offers two new objects for storing data on the client:

localStorage - To store data with no time limit.
session Storage -To store the data for one session.

Earlier, the data was stored with cookies. But now cookies are not suitable for storing large amounts of data , because they are passed every request to the server, it makes slow and in-effective.

In HTML5, the data is not passed every server request, but used only when asked for. It is possible to store large amounts of data without affecting the website's performance.

The data can store in different areas for different websites, and a website can only access data stored by itself.

CSS Tutorial

Before you start CSS you should have a basic knowledge of the HTML / XHTML.

CSS stands for Cascading Style Sheets.
The Styles define how to display HTML elements.
Styles were added to HTML 4.0 to solve a problem.
External Style Sheets can save a lot of work.
External Style Sheets are stored in CSS files.
An HTML document can be displayed with different styles.
The World Wide Web Consortium (W3C) created CSS to solve the problem.
All browsers support CSS today.
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file.

Wednesday 28 December 2011

Example in JavaScript - background effects in color

Example: JavaScript Background Effects in color

<html>
<head>
<title>JavaScript BG Effects in color</title>

<script language="javascript">

</script>
</head>
<body vlink="#fff" bgcolor="maroon">

<center>
<table width="600" cellspacing="10" cellpadding="0">
<tbody>
<tr>
</tbody>
</table>
<br>
<br>
<basefont size="3"></basefont>
<font size="6">

<br>
<br>
</font>
<table width="486" cellspacing="0" cellpadding="3" border="0">
<tbody>
</table>
<center>
<form>
<b>
Please enter your favorite
<br>
color and then click the button.
<br>
<input type="text" name="text">
<input type="button" onClick="test(form)" value="click for color!" name="button">
</b>
</form>
</center>
<b>
<p> </p>
<p>

</b>
</body>
</html>

Transition method

Example: Transition method

<!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>transition</title>
<style type="text/css">

   textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}


     ul a {
       -webkit-transition: padding .5s;
       -moz-transition: padding .5s;
       -o-transition: padding .5s;
       transition: padding .5s;
      }

    a:hover {
       padding-left: 6px;
    }

</style>
</head>

<body>

<center>
<h3> Transition</h3>
      <ul>
       <li>
          <a href="#"> One Over Me </a>       </li>
       <li>
          <a href="#"> Two Over Me </a>       </li>
       <li>
          <a href="#"> Three Over Me </a>       </li>
       <li>
          <a href="#"> Four Over Me </a>       </li>
        <li>
          <a href="#"> Five Over Me </a>       </li>

    </ul>
    </center>
</body>
</html>

Slide Accordion

Slide Accordion: When you click on a heading, it will show the next paragraph.

Example:

<!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>Slide Accordion </title>

<script type="text/javascript" src="../html/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $(".accordion h2:first").addClass("active");
    $(".accordion p:not(:first)").hide();

    $(".accordion h2").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h2").removeClass("active");
    });

});
</script>

<style type="text/css">
body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
    width: 480px;
    border-bottom: solid 1px #c4c4c4;
}
.accordion h2 {
    background: #e9e7e7 ;
    padding: 7px 15px;
    margin: 0;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    border:1px solid #333;
    border-bottom: none;
    cursor: pointer;
}
.accordion h2:hover {
    background-color: #222; color:#fff
}
.accordion h2.active {
    background-position: right 5px;
}
.accordion p {
    background:#CCCCCC;
    margin: 0;
    padding: 10px 15px 20px;
    border-left:1px solid #333;
    border-right:1px solid #333;
}
</style>
</head>

<body>

<div class="accordion">
<center><h1>Slide Accordian</h1></center>
    <h2>heading1</h2>
    <p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <h2>heading2</h2>
    <p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <h2>heading3</h2>
    <p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <h2>heading4</h2>
    <p>Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <h2>heading5</h2>
    <p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>

</body>
</html>

Best basic accordian menu in jQuery

The Accordion is a web control that allows you to provide multiple panes and display them one at a time.
Accordion menus are used widely in navigation, sliding, minimizing and maximizing content.
Such accordions practically are expandable whenever needed, you can really save some space and be able to show a lot of information using this technique.
It is a dynamic animated page for wave. Items smoothly slide open and slide closed again when you're done.

Tuesday 27 December 2011

How to Check checkbox checked property using jQuery

Use below code structure:

if($("#checkkBoxId").is(':checked'))
             $("#txtAge").show();
           else
 $("#txtAge").hide();

jquery grid plugins

Flexigrid: http://flexigrid.info/
Sigma Grid: http://www.sigmawidgets.com/products/sigma_grid2/
jQuery Grid: http://www.trirand.com/blog/
jqGridView: http://plugins.jquery.com/project/jqGridView
Ingrid: http://reconstrukt.com/ingrid/
DataTable : http://www.datatables.net/index
Slickgrid : http://code.google.com/p/slickgrid/
TableSorter: http://tablesorter.com/
dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/

Best jQuery Grid

Best jQuery grid plugins for your websites:

Flexigrid: http://flexigrid.info/
jQuery Grid: http://www.trirand.com/blog/
jqGridView: http://plugins.jquery.com/project/jqGridView
Ingrid: http://reconstrukt.com/ingrid/
SlickGrid http://github.com/mleibman/SlickGrid
DataTables http://www.datatables.net/index

How to redirect the user from one page to another?

window.location.replace(...) will best simulate an HTTP redirect. If you want to simulate someone clicking on a link, use location.href. If you want to simulate an HTTP redirect, use location.replace.

// similar behavior as an HTTP redirect
window.location.replace("http://myurl.com");
// similar behavior as clicking on a link
window.location.href = "http://myurl.com";

How to find if something is hidden in jQuery?

How do you test to see if that element is currently hidden or visible on the screen?

You can use the "hidden" and "visible" selectors.

$(element:hidden;

$(element:visible);

$(element).is(":visible") // Checks for display:[none|block],

$(".list").each(function()
{
    if ($(this).css("visibility") == "hidden")
    {
        // handle non visible state
    }
    else
    {
        // handle visible state
    }
})

Run an animation called myfirst, with all the animation properties set:

Syntax 1:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

The same animation as above, using the shorthand animation property:

Syntax 2:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

Change the background through animation property

Change the background color when the animation is 25%, 50%, and again   when the animation is 100% complete:@keyframes myfirst

Syntax :
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}

Example

<!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>animation-rotation </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee;color:#fff }
div
{
width:200px;
height:200px;
background: #663366;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
</style>
</head>
<body>
<div>Hello World.
<p> The div element changes the background effect.</p>
</div>
</body>
</html>

Change the background color and position bChange the background color and position by using keyframe rule or animation propertyu using keyframe rule or animation property

Syntax 2: Change the background color and position by using key frame rule or animation property.

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Example:

<!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>animation-rotation </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee;color:#fff }
div
{
width:200px;
height:200px;
background: #663366;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div>Hello World.
<p> Hover over the div element above, to see the Animation effect.</p>
</div>
</body>
</html>

keyframes rule or the animation property

Syntax : @keyframes rule or the animation property

@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
Example:
<!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>animation-backcolor </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{
width:300px;
height:300px;
background:#663399;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
</style>
</head>
<body>
<div>Hello World. Hover over the div element above, to see the transition effect.
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</div>
</body>
</html>

CSS3 Animations

CSS3 Animations

An animation is an effect that lets an element gradually change from one style to another.
With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.
You can change as many styles as many times as you want.
Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.
0% is the beginning of the animation, 100% is when the animation is complete.
For best browser support, you should always define both the 0% and the 100% selectors.
When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
Specify the name of the animation
Specify the duration of the animation

Browser Support

Internet Explorer and Opera do not yet support the @keyframes rule or the animation property.
Firefox requires the prefix -moz-, while Chrome and Safari require the prefix -webkit-.

CSS3 @keyframes Rule

To create animations in CSS3, you will have to learn about the @keyframes rule.
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

The following table lists are the @keyframes rule and all the animation properties:
Property Description

@keyframes - Specifies the animation
animation - A shorthand property for all the the animation properties, except the animation-play-state property
animation-name - Specifies the name of the @keyframes animation
animation-duration - Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0
animation-timing-function - Describes how the animation will progress over one cycle of its duration. Default "ease"
animation-delay - Specifies when the animation will start. Default 0
animation-iteration-count -Specifies the number of times an animation is played. Default 1
animation-direction- Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"
animation-play-state - Specifies whether the animation is running or paused. Default

Syntax 1: @keyframes rule or the animation property.

@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

Example:

<!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>animation-backcolor </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{
width:300px;
height:300px;
background:#663399;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
</style>
</head>
<body>
<div>Hello World. Hover over the div element above, to see the transition effect.
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</div>
</body>
</html>

Transition the card - in rotating and linear method

Transition-rotate

<!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>transition-rotate </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{color:#fff;
width:100px;
height:100px;
background:#663366;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer, Firefox and Opera does not support the rotateX method.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">World. This is a DIV element.</div>
</body>
</html>

Transition-linear

<!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>transition-linear </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{color:#fff;
width:100px;
height:100px;
background: #663366;
transition-property:width 1s linear 1s;
/* Firefox 4 */
-moz-transition:width 1s linear 1s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 1s;
/* Opera */
-o-transition:width 1s linear 1s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div>Hello. Hover over the div element above, to see the transition effect.</div>
<div id="div2">World. The transition effect will wait 2 seconds before starting.</div>
</body>
</html>

Rotating the Card

Rotating the Card :

when we hover over the card, it should flip around, and display the “back-side” of the card (at the least the illusion of the “back-side”). For this effect, use transformations and the rotateY function.

Syntax1: css

.box:hover {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

An Effective Shadow

An Effective Shadow
We learned earlier about shadow of box by by using the: after pseudo class.

Syntax: css

.box:after {
    background: none repeat scroll 0 0 #EEEEEE;
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.4);
    content: "";
    height: 99px;
    left: 15%;
    position: absolute;
    top: 27%;
    width: 26%;
    z-index: -1;
}

Monday 26 December 2011

CSS3 border-radius property

The CSS3 border-radius property can be used to give borders rounded corners in design elements without the need to include images.

Syntax:
div {
border:1px solid;
border-radius:25px;
}

CSS3	Mozilla equivalent	WebKit equivalent
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

Add remove css class using JQuery

You can do this by using the addClass and removeClass functions in jquery.

For add new class or properties use add class

$("#link").click(function(){
   $(#mydiv).addClass('myClass');
});

For remove existing class or properties use remove class

$("#link").click(function(){
   $("#mydiv").removeClass('myClass');
});

script detect iPhone and iPod browsers

Add this JavaScript code to detect  iPhone & iPod.

 if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  //code
}

Jquery :

jQuery(document).ready(function($){

var deviceAgent = navigator.userAgent.toLowerCase();

var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);

if (agentID) {

// code here

}

});

Detect Internet Explorer using jquery

If you love jQuery like I do then here is the simple snippet that you can use to detect browser.

if (jQuery.browser.msie) {

// do sth.

}

For detecting a specific version of Internet Explorer only:

// Select Internet Explorer above 6

if (jQuery.browser.msie && jQuery.browser.version > 6) {

// do sth.

}

// Select Internet Explorer 7 and below

if (jQuery.browser.msie && jQuery.browser.version <= 7) {

// do sth.

}

// Select just Internet Explorer 6

if (jQuery.browser.msie && jQuery.browser.version == '6.0') {

// do sth.

}

// Select just Internet Explorer 7

if (jQuery.browser.msie && jQuery.browser.version == '7.0') {

// do sth.

}

// Select just Internet Explorer 8

if (jQuery.browser.msie && jQuery.browser.version == '8.0') {

// do sth.

}

// Select just Internet Explorer 9

if (jQuery.browser.msie && jQuery.browser.version == '9.0') {

// do sth.

}

detect oS in jquery

It is very easy to detect the OS using jquery. Below are jqury function that may help you.
$(‘#osInfo’).html(“Your OS is: <b>” + $.client.os + “</b>”);
//To detect Mac OS:
if((navigator.platform.indexOf(“Mac”) != -1)) {
// code
}
$.browser.linux();
$.browser.mac();
$.browser.win();

Detect Firefox Browser using jquery

In this tutorial we'll show you JavaScript function for Firefox Browser detection.

if (jQuery.browser.mozilla) {

// do sth.

}

// Select Firefox 1.5.x to 2.x

if (jQuery.browser.mozilla && jQuery.browser.version.substr(0, 3) == '1.8') {

// do sth.

}

// Select Firefox under 3.x

if (jQuery.browser.mozilla && jQuery.browser.version < '1.9') {

// do sth.

}

// Select Firefox 3.0.x and above

if (jQuery.browser.mozilla && jQuery.browser.version.substr(0, 3) == '1.9') {

// do sth.

}

// Select just Firefox 2.0.x

if (jQuery.browser.mozilla && jQuery.browser.version == '1.8.1') {

// do sth.

}

// Select just Firefox 3.0.x

if (jQuery.browser.mozilla && jQuery.browser.version == '1.9') {

// do sth.

}

// Select just Firefox 3.5.x

if (jQuery.browser.mozilla && jQuery.browser.version == '1.9.1') {

// do sth.

}

// Select just Firefox 3.6.x

if (jQuery.browser.mozilla && jQuery.browser.version == '1.9.2') {

// do sth.

}

// Select just Firefox 7.x

if (jQuery.browser.mozilla && jQuery.browser.version.substr(0, 1) == '7') {

// do sth.

}

Measuring length of font

Pixels are the smallest unit on a display. Pixels can be a useful way to specify font size, but the drawback is that if you specify pixels, that overrides the custom font size option in Internet Explorer.

pt (points): A point is equal to 1/72 inch. Points (and picas) are classic typeface measurements. Most browsers default to a 12-point serif typeface.

mm (millimeters): A millimeter is .0394 inches, so one inch contains roughly 26 millimeters. One centimeter contains 10 millimeters. Much of the world uses this metric system.

em: Em is a unit of measurement derived from the approximate width of the letter m of a font. This is considered generally the best way to specify font size in CSS, although few designers follow this advice.

% (percent): Percentages are excellent for specifying relative size (it can be relative to an ancestor, the parent, and so on).

PHP interview question answers

What’s the difference between include and require?
– If the file is not found by require(), it will cause a fatal error and halt the execution of the script. If the file is not found by include(), a warning will be issued, but execution will continue.
I am trying to assign a variable the value of 0123, but it keeps coming up with a different number, what’s the problem?
- PHP Interpreter treats numbers beginning with 0 as octal.
Would I use print “$a dollars” or “{$a} dollars” to print out the amount of dollars in this example? – In this example it wouldn’t matter, since the variable is all by itself, but if you were to print something like “{$a},000,000 mln dollars”, then you definitely need to use the braces.
How do you define a constant?
- Via define() directive, like define (“MYCONSTANT”, 100);
How do you pass a variable by value?
- Just like in C++, put an ampersand in front of it, like $a = &$b
Will comparison of string “10″ and integer 11 work in PHP?
- Yes, internally PHP will cast everything to the integer type, so numbers 10 and 11 will be compared.
When are you supposed to use endif to end the conditional statement?
- When the original if was followed by : and then the code block without braces.
Explain the ternary conditional operator in PHP?
- Expression preceding the ? is evaluated, if it’s true, then the expression preceding the : is executed, otherwise, the expression following : is executed.
How do I find out the number of parameters passed into function?
- func_num_args() function returns the number of parameters passed in.
If the variable $a is equal to 5 and variable $b is equal to character a, what’s the value of $$b?
- 100, it’s a reference to existing variable.

jquery Zebra Striped Table row

Using jQuery its easy to create Zebra Stripes effect(alternating colored backgrounds) on table rows.
For this we need to define a css class and through jQuery we will apply style to each odd number table rows.

<style>.altRow{background-color: #f0f0f0; }</style>
jQuery:

<script type="text/javascript">

$(function() {
  
        $("table tr:odd").addClass("altRow");

      });

</script>

jQuery grid plugins

There are so many jQuery grid plugins. Each having different features and capabilities. Below I listed the best jQuery grid plugins which you can use in your projects

Flexigrid: http://flexigrid.info/ : Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.
jQuery Grid: http://www.trirand.com/blog/ :
jqGridView: http://plugins.jquery.com/project/jqGridView jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.
Ingrid: http://reconstrukt.com/ingrid/ :Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.
DataTable : http://www.datatables.net/index : DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Slickgrid : http://code.google.com/p/slickgrid/
TableSorter: http://tablesorter.com/:tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/
Sigma Grid: http://www.sigmawidgets.com/products/sigma_grid2/

Styling the Box: Transition

Styling the Box: Transition

If the instructed element have any changes to their state, then the change can possible by transition (transition: all 1s).

Syntax: css

.box {
background: #e3e3e3;
border: 1px dashed #666;
margin: auto;
width: 400px;
height: 200px;
cursor: pointer;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}

HTML:

<body>
<div class="box">
<div>Hello</div>
<div> World </div>
</div>
</body>

Data perfectly Horizontally and Vertically Centered -Flexible box model

Horizontally and Vertically Centered:

By using flexible box model we can create data perfectly in center. Due to containing this data we can use the body element as a wrapper.

Example: Create a container .box, and then add two divs: one for the front size, and the other for the back.

HTML:

<body>
<div class="box">
<div>Hello</div>
<div> World </div>
</div>
</body>

Syntax: css

body, html { height: 100%; width: 100%; }
body {
     display: -moz-box;
     display: -webkit-box;
     display: box;
     -moz-box-orient: horizontal;
     -webkit-box-orient: horizontal;
     box-orient: horizontal;
       -moz-box-pack: center;
     -moz-box-align: center;
       -webkit-box-pack: center;
     -webkit-box-align: center;
     box-pack: center;
     box-align: center;
}

css3 Transitions - Multiple changes

Multiple changes:
To add a transitional effect for more than one style, add more properties, separated by commas:

Syntax: Add effects on the width, height, and the transformation:

div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

The two examples below sets all transition properties:
Example:1
Use all transition properties in one example:
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

Example:2

The same transition effects as above, using the shorthand transition property:
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

css

Multiple changes:
To add a transitional effect for more than one style, add more properties, separated by commas:
Sytax:   Add effects on the width, height, and the transformation:
div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
The following table lists are the transition properties:Property    Description
transition    A shorthand property for setting the four transition properties into a single property
transition-property    Specifies the name of the CSS property to which the transition is applied
transition-duration    Defines the length of time that a transition takes. Default 0
transition-timing-function    Describes how the speed during a transition will be calculated. Default "ease"
transition-delay    Defines when the transition will start. Default 0

The two examples below sets all transition properties:
Example:1
Use all transition properties in one example:
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
Example:2
The same transition effects as above, using the shorthand transition property:
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

css3 Transition

css3 Transition:

Without using JavaScript or Flash animations, CSS3 is the ability to apply animations to the instruct elements. IE9 still won’t support CSS transitions.
CSS3 transitions are effects that let an element gradually change from one style to another.
Let’s try for the simple effect. When you hover a link in a sidebar, the text will slide to the right ever slightly.

Note: If the duration is not specified, the transition will have no effect, because default value is 0.
The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

Syntax:1

div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
Specify :hover for <div> elements:
div:hover
{
width:300px;
}

Example:

ul a {
-webkit-transition: padding .5s;
-moz-transition: padding .5s;
-o-transition: padding .5s;
transition: padding .5s;
}
a: hover { padding-left: 6px; }

HTML:

<ul>
<li> <a href="#"> One Over Me </a></li>
<li> <a href="#"> Two Over Me </a> </li>
<li> <a href="#"> Three Over Me </a> </li>
<li> <a href="#"> Four Over Me </a> </li>
<li> <a href="#"> Five Over Me </a> </li>
</ul>

Note: We don’t directly apply the transition to the hover state of the anchor tag, because, if we did, the animation would only take effect during mouseover. On mouseout, the element would immediately return to its intial state.

Transition will accept three parameters:
The property to transition. (Set this value to all if needed)
The duration
The easing type

Browser Support:

Internet Explorer does not yet support the transition property.
Firefox 4 requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Opera requires the prefix -o-.

css3 Transition:
Without using JavaScript or Flash animations, CSS3 is the ability to apply animations to the instruct elements. IE9 still won’t support CSS transitions.
CSS3 transitions are effects that let an element gradually change from one style to another.
Let’s try for the simple effect. When you hover a link in a sidebar, the text will slide to the right ever slightly.
Note: If the duration is not specified, the transition will have no effect, because default value is 0.
The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

CSS3 3D Transforms - The rotateX(), rotateY() Method

CSS3 3D Transforms

CSS3 allows you to format your elements using 3D transforms.

The 3D transforms methods are:

rotateX()
rotateY()

Browser Support:

Internet Explorer, Firefox, and Opera does not yet support the 3D transform methods.
Chrome and Safari requires the prefix -webkit-.
Let’s see the difference between a 2D transform and a 3D transform:

A. The rotateX() Method:
With the rotateX() method, the element rotates around its X-axis at a given degree.

Syntax:

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

B. The rotateY() Method:

With the rotateY() method, the element rotates around its Y-axis at a given degree.
Syntax:
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

css3 Transform - The matrix() Method

The matrix() Method:

The matrix() method combines all of the 2D transform methods into one.
The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

Syntax: How to rotate a div element 30 degrees, using the matrix method

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

Example:

<!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> matrix Method </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; color:#fff }
div
{
width:100px;
height:75px;
background-color: #660066;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">World. This is a DIV element.</div>
</body>
</html>

Result: