1024×768  Ipad resolution
Top Bar
64px; in this 20px for status bar, 44px for Navigation

$(document).ready(function(){

/* you can start writing code in here.. */

});

The above script runs once DOM Loaded,  even of some of the images are still download.

DOM is the nothing but structure of html includes div, table elements with out assets.

Jquery Script which creates rotator for both banner and text.

Here images and header_texts are the arrays where we are using loop in next couple of lines. I am applying css using jquery to change background and i am adding html content to subheader div using html().

Now the implementation process

Step1 : Copy below javascript/jquery to script.js or your js file or in script tag at the top of the body.
Step2 : Here in this script you need to change only two things.

#slideit (Id for background change) and #subheader (id for content change).

	$(window).load(function() {           
		  var i =0; 
		  var j= 0;
		  var images = ['images/backgrounds/background_2.jpg','images/backgrounds/background_3.jpg','images/backgrounds/background_1.jpg'];
          var header_texts = ['<h1>Heading number 2</h1>','<h1>Heading number 3</h1>','<h1>Heading number 1</h1>'];
		  var image = $('#slideit');
		  var header_txt = $('#subheader');
						//Initial Background image setup
		  image.css('background-image', 'url(images/backgrounds/background_1.jpg)');
		  header_txt.html("<h1>Heading number 1</h1>");
						//Change image at regular intervals
		  setInterval(function(){   
		   image.fadeOut(500, function () {
		   image.css('background-image', 'url(' + images [i++] +')');
		   image.fadeIn(100);
		   });
		   if(i == images.length)
			i = 0;
		  }, 5000);     

		  setInterval(function(){   
		   header_txt.fadeOut(600, function () {
		   header_txt.html(header_texts[j++]);
		   header_txt.fadeIn(100);
		   });
		   if(j == header_texts.length)
			j = 0;
		  }, 5000);     

	});

Step 3 : Copy below CSS to your style sheet.

#slideit
This CSS will help to placing the image to top left of the page. width 100% covers the background entire page and height 100% covers the background entire height of the page. you can see that i have used 130% which is for IE due to some spacing issues, you can adjust as you want

#subheader
This CSS will help to create background for the header text which  and also styling of header

#slideit{
position:absolute;
top:0;
left:0;
width:100%;
height:130%;
z-index:-9999;
}

#subheader {
margin: auto ;
width:920px;
text-align: center ;
height:60px; 
}

#subheader h1{
height:44px;
margin-top:5px;
background:url(../images/subheaderbg.png);
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
padding-top:6px;
position:absolute;
left:40%;
padding-left:15px;
padding-right:15px;
}

Step 4 : Copy following div in the first line of the body. this div helps to display the background.

<div id="slideit"> </div>

Step 5 : Copy following div to body where ever you ant to display the header.

<div id="subheader"></div>

Thanks for reading my post, if you have any queries please feel free to comment below. thanks.

$(document).ready(function(){

	//global vars
	var form = $("#contact");
	var first_name = $("#first_name");
	var last_name = $("#last_name");
	var email_id = $("#email_id");
	var phone_number = $("#phone_number");
	var country = $("#country");
	var subject = $("#subject");
	var message = $("#message");
	var num1 = $("#num1");
	var num2 = $("#num2");
	var captcha = $("#captcha");

	var f_info = $("#f_info");
	var l_info = $("#l_info");
	var email_info = $("#email_info");
	var phone_info = $("#phone_info");
	var country_info = $("#country_info");
	var subject_info = $("#subject_info");
	var message_info = $("#message_info");
	var	captcha_info = $("#captcha_info");

	//On blur
	first_name.blur(validateFirstName);
	last_name.blur(validateLastName);
	email_id.blur(validateEmail);
	phone_number.blur(validatePhone);
	country.blur(validateCountry);
	subject.blur(validateSubject);
	message.blur(validateMessage);
	captcha.blur(validateCapthca);

	//On key press
	first_name.keyup(validateFirstName);
	last_name.keyup(validateLastName);
	email_id.keyup(validateEmail);
	phone_number.keyup(validatePhone);
	country.keyup(validateCountry);
	subject.keyup(validateSubject);
	message.keyup(validateMessage);
	captcha.keyup(validateCapthca);

	//On Submitting
	form.submit(function(){
		if(validateFirstName() & validateLastName() & validateEmail() & validatePhone() & validateCountry() & validateSubject() & validateMessage() & emptyCheckpthca() & validateCapthca())
			return true
		else
			return false;
	});

	//validation functions
	function validateEmail(){
		//testing regular expression
		var a = $("#email_id").val();
		var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
		//if it's valid email
		if(filter.test(a)){
			email_id.removeClass("error");
			email_info.html("");
			email_info.removeClass("error");
			return true;
		}
		//if it's NOT valid
		else{
			email_id.addClass("error");
			email_info.html("Stop cowboy! Type a valid e-mail please");
			email_info.addClass("error");
			return false;
		}
	}
	function validateFirstName(){
		//if it's NOT valid
		if(first_name.val().length < 4  || first_name.val()== "First Name"){
			first_name.addClass("error");
			f_info.html("Please enter first name");
			f_info.addClass("error");
			return false;
		}
		//if it's valid
		else{
			first_name.removeClass("error");
			f_info.html("");
			f_info.removeClass("error");
			return true;
		}
	}
	function validateLastName(){
		//if it's NOT valid
		if(last_name.val().length < 4 || last_name.val()== "Last Name"){
			last_name.addClass("error");
			l_info.html("Please enter last name");
			l_info.addClass("error");
			return false;
		}
		//if it's valid
		else{
			last_name.removeClass("error");
			l_info.html("");
			l_info.removeClass("error");
			return true;
		}
	}
	function validatePhone(){
		//if it's NOT valid
		if(phone_number.val().length < 4 || phone_number.val() == "Phone Number" ){
			phone_number.addClass("error");
			phone_info.html("Please enter  valid phone number");
			phone_info.addClass("error");
			return false;
		}
		//if it's valid
		else{
			phone_number.removeClass("error");
			phone_info.html("");
			phone_info.removeClass("error");
			return true;
		}
	}
	function validateCountry(){
		//if it's NOT valid
		if(country.val().length < 4   || country.val() == "Select Country" ){
			country.addClass("error");
			country_info.html("Please select country");
			country_info.addClass("error");
			return false;
		}
		//if it's valid
		else{
			country.removeClass("error");
			country_info.html("");
			country_info.removeClass("error");
			return true;
		}
	}
	function validateSubject(){
		//if it's NOT valid
		if(subject.val().length < 4  || subject.val() == "Subject"){
			subject.addClass("error");
			subject_info.html("Please enter the subject");
			subject_info.addClass("error");
			return false;
		}
		//if it's valid
		else{
			subject.removeClass("error");
			subject_info.html("");
			subject_info.removeClass("error");
			return true;
		}
	}

	function validateMessage(){
		//if it's NOT valid
		if(message.val().length < 10 || message.val() == "Message"){
			message.addClass("error");
			message_info.html("Please enter atleast 3 words");
			message_info.addClass("error");
			return false;
		}
		//if it's valid
		else{
			message.removeClass("error");
			message_info.html("");
			message_info.removeClass("error");
			return true;
		}
	}

	function emptyCheckpthca(){
		//it's NOT valid
		if(captcha.val().length < 1){
			captcha.addClass("error"); 
			return false;
		} 
		//it's valid
		else{
			captcha.removeClass("error");
			return true;
		}
	}

	function validateCapthca(){
		//it's NOT valid

				var value1 = num1.val();
				var value2 = num2.val();
				var result_add = captcha.val();
				var dataString = 'v1='+ value1 + '&v2=' + value2 + '&res=' + result_add;	
					var request = $.ajax({
  						url: "captchaverify.php",
						type: "POST",
  						data: { v1 : value1, v2 : value2, res : result_add },
  						dataType: "html",
						async: false
						}).responseText;
			   if(request == 1){    captcha_info.html(""); return true; } else { 				   
				captcha.addClass("error"); 
				captcha_info.html("Please enter correct value");
				return false;
				}

	}

});

 Captcha.PHP

<?php 

$num1 = isset($_POST['v1']) ? $_POST['v1'] : "";
$num2 = isset($_POST['v2']) ? $_POST['v2'] : "";
$total = isset($_POST['res']) ? $_POST['res'] : "";

$res = captcha_validation($num1, $num2, $total);
echo $res;

function captcha_validation($num1, $num2, $total) {
        global $error;
        //Captcha check - $num1 + $num = $total
        if( intval($num1) + intval($num2) == intval($total) ) {
                $error = 1;
        }
        else {
                $error = 0;
        }
        return $error;
}

?>

 Form in HTML Page

<form name="contact"   id="contact" method="post" action="process.php" >
    <input name="first_name" id="first_name" type="text" value="First Name" class="inputContact" />
	<span id="f_info"></span>
    <input name="last_name" id="last_name" type="text" value="Last Name" class="inputContact" />
	<span id="l_info"></span>
    <input name="email_id" id="email_id" type="text" value="Email" class="inputContact" />
	<span id="email_info"></span>
    <input name="phone_number" id="phone_number" type="text" value="Phone Number" class="inputContact" />
	<span id="phone_info"></span>
    <select class="inputSelectContact" id="country" name="country">
    	<option value="Select Country">Select Country</option>
        <option class="Newzland">Country 1</option>
    </select>
	<span id="country_info"></span>
    <select class="inputSelectContact" id="contact_about" name="contact_about">
    	<option value="">Contact us </option>

    </select>
    <input name="subject" type="text" id="subject" value="Subject"  class="inputContact" />
	<span id="subject_info"></span>
    <textarea class="inputContact" id="message" name="message">Message</textarea>
   <span id="message_info"></span>
    <br />
    <br />
	<span id="spambot" style="color:#efefef;">(Are you human, or spambot?)</span><br />
<input id="num1" class="sum" type="text" name="num1" value="<?php echo rand(1,4) ?>" readonly="readonly" /> <span class="icons_sign" style="color:#efefef;">+</span>
<input id="num2" class="sum" type="text" name="num2" value="<?php echo rand(5,9) ?>" readonly="readonly" /> <span class="icons_sign" style="color:#efefef;">=</span>
<input id="captcha" class="captcha" type="text" name="captcha" maxlength="2" />
<span id="captcha_info"></span>
<br /><br />
    <input type="image" name="submit" src="images/sendMessage.png" class="submitForm"  />
</form>

iOS:
For iOS, we have to provide 2  resolution graphic assets, one for old screens and one for new retina screens
Old Screen Resolution : 320X480, 320×568.
New Retina Screen Resolutions : 640×960, 640×1136.

Ipad
Old Screen Resolution: 768×1024
New Retina Screen Resolutions : 1536×2048

Android :
Android application has numerous resolutions. To make simple for designers it has categorized into four general sizes
which are  ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high).

To avoid worrying about changes in screen density.

• xlarge screens are at least 960dp x 720dp
• large screens are at least 640dp x 480dp
• normal screens are at least 470dp x 320dp
• small screens are at least 426dp x 320dp

View-Port is also  a good solution for responsive web design which you can target divices. Possible view port sizes are listed in the below link.
http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/

To apply display none to specific element using Class or ID

For ID :::  $('#ial-college').css('display', 'none');

For Class ::  $('.ial-college').css('display', 'none');

To change the background color to specific element using Class  or ID

$('#ial-college').css('display', '#ffffff');
$('.ial-college').css('display', '#ffffff');

To target and apply CSS to label using for attribute

For example i have a label with for attribute ID #ial_cl Like

<label name="so and so" id="so and so" for="ial_cl">

Here is the Jquery to apply CSS

$('label[for="ial_cl"]').css('display','none');

To target and apply CSS to label using for attribute

For example i have a label with for attribute ID #ial_cl Like

<label name="so and so" id="so and so" for="ial_cl">

Here is the Jquery to apply CSS

$('label[for="ial_cl"]').css('display','none');