Full On Design » JavaScript http://www.fullondesign.co.uk Design & Web Technologies Mon, 21 Jun 2010 16:45:51 +0000 en hourly 1 http://wordpress.org/?v=3.0 Google Chrome Frame – Good or Bad? http://www.fullondesign.co.uk/coding/javascript-coding/1218-google-chrome-frame-good-or-bad.htm http://www.fullondesign.co.uk/coding/javascript-coding/1218-google-chrome-frame-good-or-bad.htm#comments Wed, 23 Sep 2009 00:52:43 +0000 Mike http://www.fullondesign.co.uk/?p=1218 Recently Google Announced a new exciting product called Google Chrome Frame. Which is an add-on for Internet Explorer which offers Internet Explorer users all the features of other browsers without having to install a different browser (When a certain Meta tag is used on a web page)? The video Google released explains the product in a little more detail.

How it works

Google Chrome Frame seems quite easy to support, all the web developer needs to do is add the following code into the head of the web page they want to run like Google Chrome Frame:

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

If the user has Google Chrome Frame installed the page will render like Chrome, if not the page will load as normal.

First Impressions

When I first saw this product I had two concerns:

  • If a user knows they need a better browsing experience, they should upgrade to a better browser. Wouldn’t this just delay the uptake of better browsers?
  • If a user can’t upgrade to a better browser (Due to corporate restrictions, low bandwidth or lack of information) the odds they will be not be allowed to install Google Chrome Frame. Which makes me wonder how many people will actually benefit from it?

Having said that the product also has its positive points, for example if a company has a network based on IE6 they may find that upgrading to another browser could cause their system to fail. Google Chrome Frame allows them to keep the old software while still work on more advanced browser bases developments, without breaking their network.

I can’t decide whether this product is beneficial for the development of the web, or if it’s just giving users another reason not to upgrade from Internet Explorer 6.

What do you think? Does Google Chrome Frame encourage users to not upgrade, or does it make web developers lives easier? Leave your views in the comment section below.

]]> http://www.fullondesign.co.uk/coding/javascript-coding/1218-google-chrome-frame-good-or-bad.htm/feed 1 Creating More User Friendly Forms with jQuery http://www.fullondesign.co.uk/coding/javascript-coding/1202-creating-more-user-friendly-forms-with-jquery.htm http://www.fullondesign.co.uk/coding/javascript-coding/1202-creating-more-user-friendly-forms-with-jquery.htm#comments Fri, 11 Sep 2009 22:34:43 +0000 Mike http://www.fullondesign.co.uk/?p=1202 Create forms on a web page is relatively simple, however what most developers forget is the golden rule of usability, “Users are Idiots”.  In a large number of websites they fail to provide a clear indication of how a form field needs to be formatted. Some even seem to even forget to clear the field when the user clicks into, which is really useful if your website has users with motor skills.

Here is a really neat piece of jQuery I use to make forms a little easier for users which takes little work to integrate (Just copy and paste before the tag).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- Pull the jQuery base from Google, it has CDN so it should be a little faster. -->
<script type="text/javascript">
  $(document).ready(function() {
    $("form input, form input, form textarea").css('color', '#484848');
	$("form .submit").css('color', '#000');
	$("form label").hover(function () {
		$("#infobox").html($(this).attr('title'));
	});
	$("form input, form input, form textarea").focus(function () {
		if($(this).val() == $(this).attr('title')){
			$(this).val('');
		}
		$(this).css('color', '#000');
	});
	$("form input, form input, form textarea").blur(function () {
		if($(this).val() == ''){
			$(this).val($(this).attr('title'));
			$(this).css('color', '#484848');
		}
	});
  });
</script>

It takes the title of the field and places it into the value, then clears the value when the user clicks into it. It also takes the value of the label and places it into an information box, which can help explain what a user needs to do.

Here is an example of the script in action. Feel free to copy, change and share it.

]]> http://www.fullondesign.co.uk/coding/javascript-coding/1202-creating-more-user-friendly-forms-with-jquery.htm/feed 0 An introduction to jQuery http://www.fullondesign.co.uk/coding/javascript-coding/1167-an-introduction-to-jquery.htm http://www.fullondesign.co.uk/coding/javascript-coding/1167-an-introduction-to-jquery.htm#comments Tue, 18 Aug 2009 21:57:15 +0000 Mike http://www.fullondesign.co.uk/?p=1167 JQuery is a JavaScript Framework intends to decrease the time it takes to code the user enhancements; a website should always be able to work without JavaScript. JavaScript is just to improve the user experience.

Key Advantages of jQuery

  • Very easy to learn and code. If you are familiar with basic JavaScript and CSS you should be able to pick it up quickly.
  • A wide range of plugins available thanks to its large development community.
  • Its cross browser compatibility is great. The same code will be able to work in Firefox, Chrome, Opera, Safari or even IE6.
  • JQuery has fantastic documentation, which has a Firefox search engine plugin.

Unfortunately there is one disadvantage with jQuery. If a developer incorrectly utilizes it, the page loading times will drastically increase. This is mostly down to a developer adding lots of plugins without considering the total bandwidth required to send the data.

Below are some simple examples of jQuery in action.

JQuery “Shell” HTML

This code sample shows how to include jQuery into a page. In some cases it’s better to place JavaScript at the bottom of the page as it decreases rendering time, as the JavaScript will be pulled once the page is already rendered instead of waiting for the file to load then continuing to render.

<!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>jQuery Shell</title>
</head>
<body>
<!-- Put your content here -->
<script type="text/javascript" src="http://js.fullondesign.co.uk/jquery-1.3.2.min.js"></script>
<!-- Include the jQuery Engine/Libary -->
<!-- Add any jQuery plugins here -->
<script type="text/javascript">
//<![CDATA[
// Put your jQuery Here
//]]>
</script>
</body>
</html>

Changing the Class on an Object

In this example, you will see how jQuery changes a class on an Object with the ID object. To select the object we (like in CSS) use the variable “#object”. Likewise if you wanted to select something by class, you would just use “.class_name_here”. In this example, we will use the addClass & removeClass attributes.

<div id="object" class="empty"></div>
<script type="text/javascript" src="http://js.fullondesign.co.uk/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
	$("#object").removeClass('empty');
	$("#object").addClass('full');
//]]>
</script>

Changing the InnerHTML of an object

The code in this example is similar code to the last example. But this time using the html attribute.

<div id="object" class="empty"></div>
<script type="text/javascript" src="http://js.fullondesign.co.uk/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
	$("#object").html('This is the jQuery InnerHTML in action');
//]]>
</script>

This is quite a simplified introduction to jQuery, if you want to learn a little more about jQuery take a look at how jQuery Works.

]]> http://www.fullondesign.co.uk/coding/javascript-coding/1167-an-introduction-to-jquery.htm/feed 2