The Resident Code Monkey

jQuery - the lightweight and powerful javascript library

Resident Code Monkey — Wed, 11 Jul 2007 20:37:20 +0000

If you have been following up with the new developments in javascript over the last year or two, then chances are you have heard of the Prototype, script.aculo.us, or MooTools javascript libraries.

These javascript libraries allow you to add special effects (fading text, drag-and-drop boxes, to name a few) to elements on your web page, as well as enhance the way you can make AJAX requests.

I stayed away from these libraries because I had heard that Prototype, and script.aculo.us really degraded the performance of your web page. I am not very patient when waiting for a web page to load and do not expect people visiting my web site / project to be either.

However when planning a recent project I started working on, I was browsing Digg and came across an article for the then latest jQuery 1.1.3 release which boasted that it had the best performance in Internet Explorer, with moderate performance in FireFox and Safari.

Impressed by this I decided I would try it out and see if I could integrate some AJAX and highlighting effects into the project I was working on.

I can definitely say that I am thoroughly impressed with the ease in which you can use jQuery, in less then two days I had AJAX and highlighting effects fully integrated into my project. You can not even notice any performance degradation, the pages run very fast.

Although I love this, I think I am addicted to the chaining that you can have in jQuery. Where you would normally have a bunch of different declarations to modify an element, you can apply a bunch of changes to a single element in a chain like so:

$("#modified-id")
.mouseover(function() { $(this).addClass(‘hover’); })
.mouseout(function() { $(this).removeClass(‘hover’); });

The jQuery library itself takes up around 20kb (compressed version) so that is not such a huge bandwidth increase. jQuery can also run alongside Prototype, and script.aculo.us, so if you need those libraries you can enjoy the benefits of both libraries.

There is a huge amount of plugins available already for jQuery, not to mention it is very easy for you to write your own.

All in all I find jQuery very pleasant and powerful to use.

Choosing the right HTML editor to suit your Style of Coding

Resident Code Monkey — Tue, 27 Mar 2007 01:29:48 +0000

The editor you decide to use depends on your coding style, some people like editors such as Notepad, which have no over the top drag-and-drop features and you have to hand code everything, while some people like to use Integrated Development Environment (IDE) editors such as Macromedia DreamWeaver or Zend Studio to do their work, as they find it easier to drag-and-drop and don’t require the ability to fine tune the code they write.

A list of editors that you could try out include the following:

Macromedia DreamWeaver - Runs on Windows, and Mac.
Microsoft Frontpage - Runs on Windows.
Zend Studio - Written in Java, and available for Windows, Linux, and Mac.
Notepad - Comes with Windows.
Notepad++ (My editor of choice) - Runs on Windows, source code is available.

After trying all of the above editors I found my personal choice was Notepad++, which is pretty light-weight, has a really fast load up time, is not written on top of a java base, and is not too over the top that it just gets the job done.

I encourage those who like to hand code everything to try out Notepad++, after a little while you might be wondering how you could have ever coded without using it.

Try out the editors on the list, and find out which one is for you.

I am also open to suggestions for editors to add to the list, so send in your favorite editor of choice.

Until next time.
-ResidentCodeMonkey

How to change the background color of your pages in HTML and CSS

Resident Code Monkey — Tue, 20 Mar 2007 02:26:35 +0000

This tutorial is geared to help you get to know how to change the background color of your web page, using both the traditional HTML approach, and the new improved CSS approach.

Level of Difficulty: Beginner

If you wanted to change the background of the web page to black (hex color code #000000) with traditional HTML you would use the following code to accomplish that:

This method however is outdated, because what if you had 20 or 30 web pages with this code and later on after you had developed all your web pages you decided to change the background color to grey (hex color code #CCCCCC), you would have to go and edit all those pages over again and replace #000000 with #CCCCCC. There is another way you could do this where you could make one change and have all your pages update, this method is the Cascading Style Sheet (CSS) method.

It makes sense to store your CSS in a file you can include on each page, so for this tutorial we will be storing our CSS in a file called stylesheet.css.

In order to change the background color of each page we include the CSS style sheet file on, we would put the following code in the style sheet file.

body {
background-color: #000000;
}

And then include the style sheet file on each page by using the following code, which you would place in the portion of your web page.

So now by using this CSS method you can just open up the stylesheet.css file, and edit the hex color code for black (#000000) and change it to grey (#CCCCCC) and the change would occur on all the pages you have included the CSS style sheet file on, thus making your life much easier in the long run.

There are many things you can change on a web page by using Cascading Style Sheets, I encourage you to read up more on the subject, I will also be writing more tutorials on how you can use CSS to change the way your website looks.

Until next time,
-Resident Code Monkey

Solving the IE Flash Click to activate problem.

Resident Code Monkey — Mon, 19 Mar 2007 05:19:41 +0000

So you have developed this great flash movie that you took your time to perfect, and come time to embed it on your website you find that it works perfectly in FireFox but not Internet Explorer, which requires end-users to first click on the flash movie to activate or gain focus and then you are able to continue as usual.

You followed the procedure that you have always used, you stare in disbelief the and tags have never failed you, but all of a sudden these methods do not work anymore.

Due to legal action, Microsoft has begun to require the end-user to click once on a flash movie to activate it, before the user is able to interact with the flash movie.

Fortunately there is a way to continue to use them by inserting them dynamically via JavaScript, by using document.write or SWFObject. As I will you show you, it is not that hard to implement either method plus they both validate according to the W3C (X)HTML validators.

Let us see how you would use the JavaScript document.write method to dynamically insert the Flash code during page load. You would place the following code where you want the flash movie to go.

The above code would embed a flash movie called movie.swf with the size of 700 x 200 pixels, and a background color of white (#FFFFFF) on the fly, and best of all it does not require your end-users to click to activate the flash movie.

If you are happy with using that method, and having to type all that code out each time feel free to continue using it, otherwise I’ll show you another method you can use, that is easier to remember and has less code to type per each flash movie.

That method is the SWFObject JavaScript library so lets have a look at how we would implement it. First of all because SWFObject is a JavaScript library you have to download it to your website and then load it on each page you wish to use it on before you can actually do anything with it.

So surf over to http://blog.deconcept.com/swfobject/ and grab the latest copy of SWFObject and save it as swfobject.js, and then we can see how to implement it.

The code above you should put between the tag of your page, as it loads the SWFObject JavaScript library for us to be able to use. The next piece of code you will want to place where you want your flash movie to go.

This text will be replaced by the Flash movie.

The above code will do the same thing as the document.write method, but is easier to implement and read, it also writes out all the code needed for each different browser, and has a smaller load footprint.

The minimum syntax of SWFObject is:

var swfobject = new SWFObject(swf, id, width, height, version, background-color);

There are many other options you can use for your SWFObject implementation, over at http://blog.deconcept.com/swfobject/ you can view them as well as extra examples.

I hope this has jump started you on your way to embedding flash movies that load smoothly for the end-user, as well as helped you gain some knowledge of how JavaScript can help with hurdles you may come up against.

Until next time,
-Resident Code Monkey

Welcome to The Resident Code Monkey’s Corner

Resident Code Monkey — Mon, 19 Mar 2007 01:14:43 +0000

Hello and Welcome,

I’ll be posting random tips, tutorials, and rants here.

Stay tuned.
-Resident Code Monkey