Gmail Style Message Inbox Design with jQuery & CSS

by
Post Views: 663

Today I am going to tell how to create Gmail Style Message Inbox Design with jQuery & CSS.  From this design you can able to

This tutorial will bring you exactly look like gmail feature. Designers can easily integrate this code in your existing web projects. I hope everyone will like this tutorial.

Gmail Style Message Inbox with Jquery & CSS
Gmail Style Message Inbox

Contents

Jquery Code to Check All/ Uncheck All

jQuery('.checkall').click(function(){

			var parentTable = jQuery(this).parents('table');

			var ch = parentTable.find('.checkbox');

			if(jQuery(this).is(':checked')) {

				//check all rows in table

				ch.each(function(){

					jQuery(this).attr('checked',true);

					jQuery(this).parent().addClass('checked');	//used for the custom checkbox style

					jQuery(this).parents('tr').addClass('selected'); // to highlight row as selected

				});

			} else {

				//uncheck all rows in table

				ch.each(function(){

					jQuery(this).attr('checked',false);

					jQuery(this).parent().removeClass('checked');	//used for the custom checkbox style

					jQuery(this).parents('tr').removeClass('selected');

				});

			}

		});

jQuery Code to Mark Star / Unstar

jQuery('.msgstar').click(function(){

			if(jQuery(this).hasClass('starred'))

				jQuery(this).removeClass('starred');

			else

				jQuery(this).addClass('starred');

});

jQuery Code to delete multiple messages

  if(jQuery('.delete').length > 0) {

  jQuery('.delete').click(function(){

	  var c = false;

	  var cn = 0;

	  var o = new Array();

	  jQuery('.mailinbox input:checkbox').each(function(){

		  if(jQuery(this).is(':checked')) {

			  c = true;

			  o[cn] = jQuery(this);

			  cn++;

		  }

	  });

	  if(!c) {

		  alert('No selected message');

	  } else {

		  var msg = (o.length > 1)? 'messages' : 'message';

		  if(confirm('Delete '+o.length+' '+msg+'?')) {

			  for(var a=0;a<cn;a++) {

				  jQuery(o[a]).parents('tr').remove();

			  }

		  }

	  }

  });

  }

jQuery Code to Mark as Read

jQuery('.mark_read').click(function(){

	var c = false;

	var cn = 0;

	var o = new Array();

	jQuery('.mailinbox input:checkbox').each(function(){

		if(jQuery(this).is(':checked')) {

			c = true;

			o[cn] = jQuery(this);

			cn++;

		}

	});

	if(!c) {

		alert('No selected message');

	} else {

		var msg = (o.length > 1)? 'messages' : 'message';

		if(confirm('Mark '+o.length+' '+msg+' to read')) {

			for(var a=0;a<cn;a++) {

				jQuery(o[a]).parents('tr').removeClass('unread');

			}

		}

	}

});

jQuery Code to Mark as Unread

jQuery('.mark_unread').click(function(){

	  var c = false;

	  var cn = 0;

	  var o = new Array();

	  jQuery('.mailinbox input:checkbox').each(function(){

		  if(jQuery(this).is(':checked')) {

			  c = true;

			  o[cn] = jQuery(this);

			  cn++;

		  }

	  });

	  if(!c) {

		  alert('No selected message');

	  } else {

		  var msg = (o.length > 1)? 'messages' : 'message';

		  if(confirm('Mark '+o.length+' '+msg+' to unread')) {

			  for(var a=0;a<cn;a++) {

				  jQuery(o[a]).parents('tr').addClass('unread');

			  }

		  }

	  }

});

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Live Demo

You May Also Like

Never Miss Any Web Tutorials, Guides, Tips and Free eBooks

Join Our Community Of 50,000+ Web Lovers and get a weekly newsletter in your inbox

 

I hate spam too. Unsubscribe at any time.

40 thoughts on “Gmail Style Message Inbox Design with jQuery & CSS”

  1. Warning: mysql_connect(): Access denied for user ‘w3lesson_dev123’@’localhost’ (using password: YES) in /home/w3les3l4/public_html/demo/gmail-style-inbox/download.php on line 7
    Connecting to MySQL failed

    unable to download

    Reply

  2. Hi,

    How to download this files ? I subscribe with my mail, therefore show me Email does not exist in our database. Please use below form to subscribe ?

    Thanks in advance !

    Reply

  20. Ahmed

    Hello, I have subscribed for 11 hours and can not download. Says: “Email does not exist in our database. Please use form below to subscribe” but I am

    Reply

  21. Hello, I have subscribed for 11 hours and can not download. Says: “Email does not exist in our database. Please use form below to subscribe” but I am.

    Reply

  22. hello sir !!

    i like your inbox design with jquery and css. it’s awesome…i love it..

    i have subscribed your channel 5 hours ago.. but i have not downloading yet !!
    Thank You sir!!

    Reply

  23. Thanks this looks good but I subscribed and confirmed 21 hours ago and it still won’t let me download. “Email does not exist in our database. Please use below form to subscribe”. If I try again to subscribe it says I’m already subscribed.

    Reply

  27. First of all thx for this, really help, I just don’t get how to make it see as readed a message already read.

    Again, thx!

    Reply

Leave a Comment