Friday 27 February 2015

Learn css and css3

Learn jquery ui

Learn photoshop in easy steps

Responsive photo gallery


Mobile Look Of Above Layout




Create index.html

Create style.css

Monday 23 February 2015

Mouse hover pop up div or you can use as tooltip




Learn Jquery UI

Learn jquery ui


Registration Form with HTML5 and CSS3





First create index.html



create style.css


Sunday 22 February 2015

Horizontal Toggle(show and hide)Menu






Friday 20 February 2015

Responsive Shopping-cart layout Using Html and CSS only






First create index.html

Finally create style.css

Thursday 19 February 2015

Responsive Menu Using Html and Css only







Create index.html

Create style.css

Ajax Beginners Tutorial

What Is Ajax?


Ajax stands for Asynchronous JavaScript and XML, 
it is to update the web page, using data fetched from the Internet, without refreshing the web page in the browser. You saw an example of that with Google Suggest, where a drop-down list appears in the browser without a page refresh.

Example:-



Note: please make data.txt file and put in same folder then you will get same information which is mention in that data.txt file.

You can also give a complete URL for the data you want to fetch, like this:

Example:-




Creating the XMLHttpRequest Object:-

syntax:-

XMLHttpRequestObject = new XMLHttpRequest();

Example:-




Ajax which function you want to call?

You tell the XMLHttpRequest object. That object has a property named onreadystatechange
that you assign the callback function to. As an example of how it might work, suppose you have
a callback function simply named callback. Here’s how you could have the XMLHttpRequest

object call that function, by assigning that function to the onreadystatechange property:

Example:-




The readyState property tells you how the data downloading is going.


  • 0 Uninitialized
  • 1 Loading
  • 2 Loaded
  • 3 Interactive
  • 4 Complete

  • 200 OK
  • 201 Created
  • 204 No Content
  • 205 Reset Content
  • 206 Partial Content
  • 400 Bad Request
  • 401 Unauthorized
  • 403 Forbidden
  • 404 Not Found
  • 405 Method Not Allowed
  • 406 Not Acceptable
  • 407 Proxy Authentication Required
  • 408 Request Timeout
  • 411 Length Required

  • 413 Requested Entity Too Large
  • 414 Requested URL Too Long
  • 415 Unsupported Media Type
  • 500 Internal Server Error
  • 501 Not Implemented
  • 502 Bad Gateway
  • 503 Service Unavailable
  • 504 Gateway Timeout
  • 505 HTTP Version Not Supported

Using the readyState Property:-

Example:-






Using the status Property:-

Example:-





An Ajax example using PHP:-

Example:-




Sending data to server:-

Example:-


Tuesday 17 February 2015

Mobile Website Layout

Mobile Layout / Mobile Website



create index.html

Create style.css

Responsive Grid Layout


Responsive Grid Layout Desktop view


Mobile View


Responsive Grid Layout

First create index.html

create style.css

Responsive 3 column Layout using Html and Css





Responsive 3 column Layout using html and css only


Mobile Look of above layout



Responsive 3 coloumn layout using Html and Css only

First create index.html

second create style.css

JavaScript Interview Questions And Answers


  1. What is javascript?
       JavaScript is not a stand-alone programming language like Java. When JavaScript was first
developed, its name was LiveScript, but Netscape contracted with Sun
Microsystems to name it JavaScript.

                   To run properly, client-side JavaScript is written within HTML documents.
Server-side JavaScript, called LiveWire, can work with back-end server
processes.

                JavaScript is a scripting language, JavaScript is object-based, it derives functionality from a
collection of built-in objects. With JavaScript, you can also create your own
objects.JavaScript is platform-independent.

   2. Where you place javascript?
    
       You can place javascript in various place in your webpage.
       <body>...</body> In body
       OR you can declare in both head or body
       call javascript through external file to give url
       you can give herf="" link after footer or before closing body, it will make fast your website.

  3. what are the variables in javascript? and how to declare and define javascript?

javascript having 3 types of variables like Numbers eg. 243, 433.40 etc. Strings of text e.g. "How are you". Boolean e.g. true or false.

there are two types to declare variables:-

Global Variables: A global variable has global scope which means it is defined everywhere in your JavaScript code.

Local Variables: A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

Example:-

<script type="text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
   var myVar = "local";  // Declare a local variable
   document.write(myVar);
}
//-->
</script>

4. How to declare variables?


<script type="text/javascript">
<!--
var book;
var address;
//-->
</script>


<script type="text/javascript">
<!--
var book, address;
//-->
</script>

initialization:-

<script type="text/javascript">
<!--
var book = "javascript";
var address;
address = "bangalore";
//-->
</script>


Some Reserved words in javascript:-

abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do


4. What are the operators in javascript?

Arithmetic Operators

Comparision Operators

Logical (or Relational) Operators

Assignment Operators

Conditional (or ternary) Operators


5. What are the conditional statements in javascript?

if statement
if (expression){
   Statement(s) to be executed if expression is true
}

if else statement
if (expression){
   Statement(s) to be executed if expression is true
}else{
   Statement(s) to be executed if expression is false
}

if else if statement
if (expression 1){
   Statement(s) to be executed if expression 1 is true
}else if (expression 2){
   Statement(s) to be executed if expression 2 is true
}else if (expression 3){
   Statement(s) to be executed if expression 3 is true
}else{
   Statement(s) to be executed if no expression is true
}

switch case
switch (expression)
{
  case condition 1: statement(s)
                    break;
  case condition 2: statement(s)
                    break;
   ...
  case condition n: statement(s)
                    break;
  default: statement(s)
}

while condition
while (expression){
   Statement(s) to be executed if expression is true
}

do while condition
do{
   Statement(s) to be executed;
} while (expression);

for loop
for (initialization; test condition; iteration statement){
     Statement(s) to be executed if test condition is true
}

for in loop
for (variablename in object){
  statement or block to execute
}


6. how to write functions in javascript?

  Function Definition:
  <script type="text/javascript">
<!--
function functionname(parameter-list)
{
  statements
}
//-->
</script>

Example:-
<script type="text/javascript">
<!--
function sayHello()
{
   alert("Hello there");
}
//-->
</script>

Calling a Function:

example:-
<script type="text/javascript">
<!--
sayHello();
//-->
</script>

Function Parameters:

example:-
<script type="text/javascript">
<!--
function sayHello(name, age)
{
   alert( name + " is " + age + " years old.");
}
//-->
</script>

The return Statement:

<textarea>
<script type="text/javascript">
<!--
   var result;
   result = concatenate('java', 'script');
   alert(result );
//-->
</script>
</textarea>

7. what are the events in javascript?

some of the event example:-

onclick Event:

<html>
<head>
<script type="text/javascript">
<!--
function hi() {
   alert("India")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="hi()" value="India" />
</body>
</html>

onsubmit event:

<html>
<head>
<script type="text/javascript">
<!--
function hi() {
  alert("your value") 
}
//-->
</script>
</head>
<body>

<input type="submit" onclick="hi()" value="Submit" />


</body>
</html>

onmouseover and onmouseout:

<html>
<head>
<script type="text/javascript">
<!--
function over() {
   alert("Mouse Over");
}
function out() {
   alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

8. how to define cookies in javascript?

syntax:-
document.cookie = "key1=value1;key2=value2;expires=date";

Reading Cookies:

<script type="text/javascript">
<!--
function ReadCookie()
{
   var allcookies = document.cookie;
   alert("All Cookies : " + allcookies );

   // Get all the cookies pairs in an array
   cookiearray  = allcookies.split(';');

   // Now take key value pair out of this array
   for(var i=0; i<cookiearray.length; i++){
      name = cookiearray[i].split('=')[0];
      value = cookiearray[i].split('=')[1];
      alert("Key is : " + name + " and Value is : " + value);
   }
}
//-->
</script>

Setting the Cookies Expiration Date:

<script type="text/javascript">
<!--
function WriteCookie()
{
   var now = new Date();
   now.setMonth( now.getMonth() + 1 ); 
   cookievalue = escape(document.myform.customer.value) + ";"
   document.cookie="name=" + cookievalue;
   document.cookie = "expires=" + now.toUTCString() + ";"
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>

Deleting a Cookie:

<script type="text/javascript">
<!--
function WriteCookie()
{
   var now = new Date();
   now.setMonth( now.getMonth() - 1 ); 
   cookievalue = escape(document.myform.customer.value) + ";"
   document.cookie="name=" + cookievalue;
   document.cookie = "expires=" + now.toUTCString() + ";"
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>

9. how to page redirect works in javascript?

example:-
<head>
<script type="text/javascript">
<!--
var browsername=navigator.appName; 
if( browsername == "Netscape" )
   window.location="http://www.location.com/ns.htm";
}
else if ( browsername =="Microsoft Internet Explorer")
{
   window.location="http://www.location.com/ie.htm";
}
else
{
  window.location="http://www.location.com/other.htm";
}
//-->
</script>
</head>

10. how many ways to show dialog boxes in javascript?

Alert Dialog Box:

<head>
<script type="text/javascript">
<!--
   alert("Warning Message");
//-->
</script>
</head>

Confirmation Dialog Box:

<head>
<script type="text/javascript">
<!--
   var retVal = confirm("Do you want to continue ?");
   if( retVal == true ){
      alert("User wants to continue!");
 return true;
   }else{
      alert("User does not want to continue!");
 return false;
   }
//-->
</script>
</head>

Prompt Dialog Box:

<head>
<script type="text/javascript">
<!--
   var retVal = prompt("Enter your name : ", "your name here");
   alert("You have entered : " +  retVal );
//-->
</script>
</head>

11. how to page printing works in javascript?

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>

12. what are the object methods in javascript?

Syntax:-
objectName.objectProperty = propertyValue;

example:-
document.write("This is test");

 The new Operator:

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

The Object() Constructor:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
function book(title, author){
    this.title = title; 
    this.author  = author;
}
</script>
</head>
<body>
<script type="text/javascript">
   var myBook = new book("php", "R.K");
   document.write("Book title is : " + myBook.title + "<br>");
   document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>

Defining Methods for an Object:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
    this.price = amount; 
}

function book(title, author){
    this.title = title; 
    this.author  = author;
    this.addPrice = addPrice; // Assign that method as property.
}

</script>
</head>
<body>
<script type="text/javascript">
   var myBook = new book("php", "R.K");
   myBook.addPrice(100);
   document.write("Book title is : " + myBook.title + "<br>");
   document.write("Book author is : " + myBook.author + "<br>");
   document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

The with Keyword:

with (object){
    properties used without the object name and dot
}

Example:-
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
    with(this){
       price = amount; 
    }
}
function book(title, author){
    this.title = title; 
    this.author  = author;
    this.price = 0;
    this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
   var myBook = new book("php", "R.K");
   myBook.addPrice(100);
   document.write("Book title is : " + myBook.title + "<br>");
   document.write("Book author is : " + myBook.author + "<br>");
   document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

13. what are the number properties in javascript?

Syntax:-
var val = new Number(number);
var val = new Boolean(value);

14. what are the string properties in javascript?

syntax:-
var val = new String(string);

15. what are the Array Properties in javascript?

syntax:-

var book = new Array( "java", "php", "wordpress" );

var fruits = [ "eng", "hindi", "science" ];

16. what are the date properties in javascript?

Syntax:-

new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])


17. what are the math functions in javascript?

Example:-

var pi_val = Math.PI;
var sine_val = Math.sin(30);

18. what are the regular expressions in javascript?

syntax:-

var pattern = new RegExp(pattern, attributes);

or simply

var pattern = /pattern/attributes;

19. what is HTML DOM in javascript?

Types:-

Window object:

Document object:

Form object:

Form control elements:

20. what are the Errors and how you handel errors in javascript?

Types
Syntax errors:
Runtime errors:
Logical errors

handle errors

The try...catch...finally Statement:

Example:-
<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
   var a = 100;
   var b = 0;
   
   try{
      if ( b == 0 ){
         throw( "Divide by zero error." ); 
      }else{
         var c = a / b;
      }
   }catch ( e ) {
      alert("Error: " + e );
   }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html> 

21. what is validation in javascript?

Basic Validation
Data Format Validation 

22. what are the Animations in javascript?<

Fireworks
Fade Effect
Roll-in or Roll-out
Page-in or Page-out
Object movements