Archive for the ‘Javascript’ Category

Add Interactivity with Google Maps

Post under Javascript, Tools | By LGR | On June 4th, 2008

Writing for two blogs gets confusing sometimes. I post stuff over at Epiblogger that I really want to post here. This time I wrote a post about how to add Google Maps to your blog. Fortunately you can use the Google My Maps feature on any site so it is not restricted to just blogging.

The second way to add Google Maps that I talk about is using the Google Maps Plugin for WordPress. The great thing about the Google Maps Plugin for WordPress is you can use it even if you are not using WordPress. If you are looking for an easy way to add Google Maps to your website without fussing with all of the Javascript then this might be a good solution for you. I know I am going to put it on my list of tools to easily add Google Maps to websites whether they are using WordPress or not.

Google Hosting AJAX Frameworks

Post under AJAX, Javascript | By LGR | On May 28th, 2008

The title does not do this post justice, but perhaps that is becuase only web developers will get excited about this. One of the things about creating websites using AJAX is the size of the Javascript frameworks that need to be loaded into the site so the user can use the website. Sure you can speed up your website with GZIP compression and send the Javascript frameworks compressed and once the user has them they will be fine as long as they stay on your website. Unfortunately users don’t just use your website. They move on to another great AJAX enabled website and have to download the same Javascrpt frameworks all over again.

To make the user experience better for users all around the globe it would be great if the Javascript frameworks could be called from one central location and then it would be cached by the users browser and every visit to every website that uses that Javascript framework would be made faster. To make this possible Google has started to host five Javascript frameworks to help speed up access to your favourite websites. The five Javascript frameworks that Google is hosting include:

This could dramatically improve end user experiences on AJAX enabled websites. It can also save on bandwidth and improve load times for websites all around the world. Think about how much faster your favourite WordPress blogs will load if they are all loading the prototype framework from Google instead of your web browser downloading a new version on every blog. If you are interested in using the Javascript frameworks that Google is hosting take a look at the AJAX Libraries Developer’s Guide for more information about how to load the frameworks into your websites. I know I will be looking at some clients websites and evaluating if they can use this service from Google. It could improve load times and make the websites react faster for users.

Shadowbox

Post under Javascript | By LGR | On April 22nd, 2008

I have talked about Lightbox and other Lightbox like Javascripts before, and I wanted to add another one I just found to the mix for you. I StumbledUpon Shadowbox yesterday and almost clicked away as fast as i got there but something in the description caught my eye: “Standards”. I then read a little further and discovered that not only is Shadowbox valid HTML is is also built so you can use it with different frameworks. So if you are already using Prototype.js in a project you can use Shadowbox, or if you are using jQuery you can use Shadowbox.

Shadowbox also supports more than just images, so you can use it to load external web pages, videos, Flash and it even supports client side image maps. I tried the demos out and was impressed. I have not had a chance to try the script in an actual website yet, but it is now high no my list of Lightbox Javascripts to use.

I could have used it a couple of weeks ago when I was working on a project that uses Prototype. maybe I will go back and give it a try on the site I was working on for the next time I have an update from that client.

DOMtab – Navigation tabs with CSS and DOMscripting

Post under HTML, Javascript | By LGR | On February 28th, 2008

I have been wanting to redo a couple of my own personal websites to make more screen real estate available and make information more available in a compact space. I have seen tabs done of other websites and thought that would make a nice addition to a few of my own websites. I did not want to program my own and thankfully with a little searching I discovered DOMtab. It is an easy and convenient way of adding tabs of information to a website.blank1.gif

If you are looking for a way of making more screen real estate available take a look at DOMtabs. I am in the process of trying it out on one of my websites this week and the installation has been going well. I have not put the new look up yet, but I hope to this weekend if I get some time to finish off the changes.

Just so you know the license does not allow developers to resell the script.

Javascript Validation

Post under Javascript | By LGR | On September 13th, 2007

I am always on the lookout for new ways to improve the websites I create and one of the best ways I have found to improve user input is to use Javascript to validate the data before sending it to the server. I recently came across not one, but two Javascript validation scripts that can help improve client-side form validation.

The first is LiveValidation. It validates the form input as you type and gives feedback right beside the form field. The script can also work with or without the prototype.js library. They also offer an uncommented version of the script that weighs in only at 14kb, 12kb lighter than the commented version.

The second is JSValidate. In the examples it validates when the form is submitted or the form field looses focus, presenting the user with a cool fade-in feedback beside the form field very similar to LiveValidation. The script does not require any other external libraries and they offer two types of downloads. The full download is 25kb and the squished version is 14kb.

Both scripts look promising to be able to provide users with valuable feedback when they are filling out a form. They are also not to bad as far as size goes and you could probably get those sizes down even more if you use some GZIP Compression to compress the files when the browser requests them. I will have to give them a try on my next web project that I need to do some form validation on.

Always remember that you still need to have server side validation of data as well. Javascript validation is really only a tool to help improve a users experience of a website to guide them to enter the proper information. The people and robots we want to prevent from entering our forms will do their best to avoid javascript validation.

Do you have any experience with either of these scripts? It would be great to know what your thoughts are on them by leaving a comment.