Turn Damn IE Into Google Chrome

chromeieAs we all hate IE, so does Google. That’s true, google has found a solution for it; Google Chrome Frame. Even though we all hate IE but we still can not ignore it as it is unfortunately used by the most users from around the globe.

Google Chrome Frame is basically a plugin to be added into IE which will then turn IE into Chrome. In other words, you will enjoy the Chrome’s functionality inside of the IE. The plugin’s size is said to be around 500KB which means it won’t create any overhead issues too. The Google Chrome Frame can be used inside IE6, IE7 and IE8.

According to tests run by Computerworld, Internet Explorer 8 (IE8) with the plug-in was 9.6 times faster than IE8 on its own. Computerworld ran the SunSpider JavaScript benchmark suite three times each for IE8 with Chrome Frame, and IE8 without the plug-in, then averaged the scores.

.

.

According to Google official blog:

“Google Chrome Frame makes life easier for web developers as well as users. For users, installing Google Chrome Frame will allow them to seamlessly enjoy modern web apps at blazing speeds, through the familiar interface of the version of IE that they are currently using.”

.

To start using Google Chrome Frame, developers need to add a single tag:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

.

Google Chrome Frame Video

.

Here is the Microsoft’s response to Google Chrome Frame:

“With Internet Explorer 8, we made significant advancements and updates to make the browser safer for our customers. Given the security issues with plug-ins in general and Google Chrome in particular, Google Chrome Frame running as a plug-in has doubled the attack area for malware and malicious scripts. This is not a risk we would recommend our friends and families take.”

.

tweet_this

.

Which is the Best PHP Framework?

Headings With Paragraphs

headingsAs you might all know heading tags (H1 through H6) are very useful in terms of search engine optimization (SEO). The SEO guys usually put the title of the page inside these heading tags or sometimes the important keywords also.

A SEO guy at our company approached me and described a problem he was not able to find the solution to even after discussing it with a senior developer. The problem he told me was that he was not able to put the heading tags along the same line as paragraph. Now this is sort of ridiculous question for those who know how to resolve this problem but don’t forget that it is not ridiculous for those who don’t know about it. You see sometimes you know all big things but not the minor fixings. For example, at school, I used to be almost perfect at spelling but once I was astonished to see that I used to wrongly spell the word idea as idia. I stopped and said to myself how come i have not been able to spell that word correctly when I was able to spell the most complex words correctly. I found the reason, I considered the word idea to be negligible so I never paid attention to it.

Same must have been the case with the senior developer who was asked to resolve this problem who couldn’t do so.

The Solution?

You need to know that heading tags are block level elements or in CSS’s words, you can specify as follows:

h1
{
display:block;
}

Because they are block level elements, they can not show at the same line as that of paragraphs. For this reason, we need to make them inline elements to be able to appear at the same line as paragraphs. The word Inline speaks for itself, it makes elements appear at the same line. Therefore, here is how you can make headings tags appear along the same line as the paragraphs.

/* make the heading appear on the same line */
h1, h2, h3, h4, h5, h6
{
display:inline;
}

Here is the demo.

Deleting Table Rows Using JQuery and PHP

jquery_delete_rowsIn this tutorial, I will show you how you can delete table rows from database using JQuery and PHP. The interesting thing here is that we will be able to delete the rows without reloading the page and present some cool animations while deleting those rows. You will also learn table stripping or alternate row coloring technique using JQuery.

Here is the heart of the entire logic coded with JQuery:

$(document).ready(function()
{
	$('table#delTable td a.delete').click(function()
	{
		if (confirm("Are you sure you want to delete this row?"))
		{
			var id = $(this).parent().parent().attr('id');
			var data = 'id=' + id ;
			var parent = $(this).parent().parent();

			$.ajax(
			{
				   type: "POST",
				   url: "delete_row.php",
				   data: data,
				   cache: false,

				   success: function()
				   {
					parent.fadeOut('slow', function() {$(this).remove();});
				   }
			 });
		}
	});

	// style the table with alternate colors
	// sets specified color for every odd row
	$('table#delTable tr:odd').css('background',' #FFFFFF');
});

Let’s find out what’s happening here using divide and rule methodology.

$(document).ready(function()

This is JQuery’s function which runs as soon as document becomes ready. This is similar to onload event but JQuery’s function is far more faster than that. So we want to be able to run this code when page is ready.

$('table#delTable td a.delete').click(function()

If you have worked on CSS selectors then above line should not be much of mystery to you. You can use the same syntax to target elements using JQuery. Basically it says that table with id delTable and TD inside it that has hyperlink with class delete when clicked runs the code specified within this function. So when hyperlink with class named delete within TD within table with id delTable is clicked then code specified will execute.

if (confirm("Are you sure you want to delete this row?"))

We want to be able to confirm if user really wants to delete a row.

var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();

Please keep in mind that in JQuery, the $(this) always refers to the target element which in our case is hyperlink with class delete. attr is used to get or set attributes of the tags. So the id variable refers to the parent of this hyperlink which is TD and then this TD’s parent which is TR. So here we get the id attribute of this TR. In HTML code, we will assign each row’s primary key field to these TRs to identify and delete records. The data variable makes data to be sent as part of the ajax request made using JQuery. The parent variable refers to each TR containing the target element which is hyperlink with class delete.

$.ajax(
{
	   type: "POST",
	   url: "delete_row.php",
	   data: data,
	   cache: false,

	   success: function()
	   {
		parent.fadeOut('slow', function() {$(this).remove();});
	   }
 });

The $.ajax function is used to send ajax requests. Amongst its arguments, the type refers to method of request whether it POST or GET, url refers to script which will get the ajax request data and return some response, data refers to data to be sent as part of the ajax request similar to query string form, cache controls whether cache will be on or off for the request because in IE requests are cached and success function which is also attribute of the $.ajax function runs the code inside it if the request went successful.

parent.fadeOut('slow', function() {$(this).remove();});

As explained before parent refers to the TRs in our case. fadeOut function needs two arguments; animation speed and function to execute. So what this line does is that it removes parent by fading it out and then the target link by using the remove() method. In this way entire row is gone and with the help of ajax request, the record from database is also deleted. Here we have used the fadeOut animation function of JQuery but there are more animations available.

$('table#delTable tr:odd').css('background',' #FFFFFF');

This line means that apply background style to each odd TR of the table with id delTable. Now because our code executes when page is ready, therefore our table will have alternate colors for each odd row.

So that’s all there is to it.

Wasn’t that awesome? It definitely was ! The good thing is that everything was so easy to implement.

Here is the demo.

You can download it here.

.
tweet_this
.

Debugging Ajax Requests

Being able to actually debug an ajax request is not that easy but there is an incredible firefox addon named FireBug which provides a number of amazing options beneficial to developers as well as designers. One of the such cool options lets you debug the ajax requests too. Here are steps to debug an ajax request:

1 - Click on the FireBug icon located at lower right position of the FF status bar.
2 - Click on the Net tab
3 - Click on the XHR tab present below the Net tab.
4 - Execute your ajax request
5 - You will see ajax request link getting generated there. Click or expand that link.

debug_ajax

Just below that link you can click any of the available tabs for relevant information. For example, if you click the Response tab, you will come to know what response was sent by the script. Similarly you can use the Params, Headers, Cache, HTML and Server tabs as well.

Quick Personal Emailer

personal_emailerToday I am going to share with you a very interesting program, the Personal Emailer. In fact, the Personal Emailer was my first project on the .NET platform. Personal Emailer let’s you send emails using google account credentials. You can add attachments as well. The most apparent advantage of this program is that it is fast and easily available on the desktop. It can be useful to those who are not allowed to open any emailing websites too.

Once you download it, run the program, click the Settings button and in the SMTP server address type smtp.gmail.com and port should be set to 587. Finally enter your google account username and password.

Note that you should have .Net framework installed. Enjoy :)

Download the Personal Emailer.

Creating Dropdown Menu Using CSS

dropdownIf you have been creating facebook applications, you know in a FBML application, the traditional javascript code is not allowed. The facebook platform has its own implementation of the javascript named FBJS (FaceBook JavaScript). The FBJS is very limited as compared to traditional javascript. So you would find yourself in trouble if you wanted to create a dropdown menu using FBJS. Now because traditional javascript is not allowed in a FBML application and FBJS is troublesome when it comes to creating menus, we will have to find some other solution to creating the dropdown menu. Well, CSS exhibits great flexibility to solve this problem. The CSS’s display property is used effectively to create the dropdown menu.

Here is the CSS code:

	/* Drop Down Menu Start */
	#container
	{
		width: 760px;
		margin:0 auto;
		font-size:11pt;
		background:#edeff4;
		font-size:12px;
		font-family:tahoma, verdana, arial;
	}
	#menu{position:absolute; z-index:1; border-top:1px solid #f6f6f6; font-weight:bold; margin-bottom:0px; left:0px; margin-left:0px; margin-top:-15px; color:#3b5898; font-size:11px; font-family:tahoma; } /* adjust margin property if needed */
	#menu ul .item{display:none;}
	#menu ul:hover .item{display:block;background:#edeff4;padding:5px;margin:1px; color:#3b5898;cursor:pointer; font-weight:normal;}
	#menu ul:hover .item a{color:#000000;text-decoration:none; font-size:11px; font-family:tahoma;cursor:pointer;}
	#menu ul:hover .item a:hover{color:#3b5898;cursor:pointer;}
	#menu ul:hover{color:#3b5898;background:#3b5898;color:#ffffff;}
	#menu ul{width:150px;float:left;margin:0px;padding:1px;background:#edeff4;list-style:none;cursor:pointer;}
	.clear{clear:both;height:10px;}
	/* Drop Down Menu End */

And here is the html code for the dropdown menu:

<div id="container" style="background:#edeff4; width:760px; position:relative; margin:auto;" align="center">
	<div id="menu">

		<ul id="item1">
			<li class="top" style="padding:6px;">Take Action &nbsp;<img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li>
			<div align="left"><li class="item"><a href="#">My ECO Footprint</a></li></div>
			<div align="left"><li class="item"><a href="#">Reduce My Impact</a></li></div>
			<div align="left"><li class="item"><a href="#">Play Green Challenge</a></li></div>
			<div align="left"><li class="item"><a href="index.php?page=invite" style="outline:none;">Spread The Word</a></li></div>
			<div align="left"><li class="item"><a href="#">Green Ideas</a></li></div>
			<div align="left"><li class="item"><a href="#">ECO Products</a></li></div>
		</ul>

		<ul id="item2">
			<li class="top" style="padding:6px;">My Green World &nbsp;<img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li>
			<div align="left"><li class="item"><a href="#">Check My World</a></li></div>
			<div align="left"><li class="item"><a href="#">Visit Other Worlds</a></li></div>
			<div align="left"><li class="item"><a href="#">Green Rankings</a></li></div>
			<div align="left"><li class="item"><a href="#">My Green Badge</a></li></div>
		</ul>

		<ul id="item3">
			<li class="top" style="padding:6px;">The Stores &nbsp;<img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li>
			<div align="left"><li class="item"><a href="#">Green My World</a></li></div>
			<div align="left"><li class="item"><a href="#">Send Green Gifts</a></li></div>
			<div align="left"><li class="item"><a href="#">Get Green Coins</a></li></div>
			<div align="left"><li class="item"><a href="#">Get Carbon Reductions</a></li></div>
		</ul>

		<ul style="background:#edeff4; width:113px; cursor:default;">
			<li style="padding:6px;background:#edeff4;">&nbsp;</li>
		</ul>

		<ul id="item4">
			<div align="right"><li class="top" style="padding:6px;">About &nbsp;<img border="0" align="absmiddle" src="img/drop-down-arrow.gif" /></li></div>
			<div align="left"><li class="item"><a href="#">Global Warming?</a></li></div>
			<div align="left"><li class="item"><a href="#">About Greenbook</a></li></div>
			<div align="left"><li class="item"><a href="#">Contact Us</a></li></div>
		</ul>
	</div>

See the demo here.