JQuery has simplified a lot of my day to day coding. I think it is an amazing little framework and apparently a lot of people do too. Even Microsoft is bundling it with its ASP.NET MVC framework which , as far as I know, a first for open source software. Beyond even handling all the all of the cross browse mess, my favorite part of jQuery is the ability to easily extend the framework through plug-in. That brings us to the topic for this post. We are going to look at how easy it is to create a plug-in for jQuery.

What Will Our Plugin Do?

For this post I want to pick something that is fairly simple yet demonstrates the power of plugins. For this post I am going to show you how to create a plug-in that will highlight keywords in a given block of text. Many websites use something similar when performing searches.


Continue Reading...

Author: Justin Bezanson

Have you been told that using those fancy JavaScript navigation menus is bad for your search rankings or that you will lose some visitors that have JavaScript turned off? This is a decision that all web developers face at one time or another. Do you use the cool looking menu which may help clean up large menus or do you cater to the largest audience possible? That can be a tough choice sometimes. Well, now there is no need to choose. In this article I will show you how to create a drop down navigation menu that is XHTML 1.0 Strict, CSS valid, opens external links in a new window, and is JavaScript free.

Keeping Backwards Compatibility In Mind

To keep things in perspective, in order to be 100% XHTML 1.0 Strict and support older, non-compliant browsers, a small amount of JavaScript is required. If you do not wish to support IE6 or older and don’t mind switching to a XHTML 1.0 Transitional doctype then this can be accomplished with 100% pure CSS and no JavaScript…


Continue Reading...

Author: Justin Bezanson

Overview

If you have ever looked at JavaScript as more than just a language for validation and “neat” effects then you know that, despite it’s seemingly simple design, it is a very powerful and complex language. All the frameworks and effects libraries that are being written, like jQuery and ExtJS, are a testament to this fact. Some of the frameworks give you tools for an object oriented (OO) approach to JavaScript. Being a C# programmer I pretty much only code in a OO manner and that just naturally translates into the JavaScript I write.

In this article we are going to take an introductory look at how OO JavaScript works. I am going to assume you are familiar with Object Oriented Programming (OOP) concepts such as encapsulation, inheritance, and polymorphism. If you aren’t familiar with these concepts or would like to refresh your memory you can take a look here. If this sounds like it might be complicated, don’t worry, it really isn’t and I’ll give you lots of example code to show you. Here we go.

Creating a class

The first thing we are going to look at is how to…


Continue Reading...

Here is a short tutorial about how to track Any Link Click with Google Analytics.

The first thing you will have to do is add a short snippet of code to the link you want to track. The code snippet you are adding is actually an OnClick JavaScript event handler that will be executed when the link is clicked and make Google Analytics take note of it. What you have to add is this the following:


Continue Reading...

In my last post about 5 Firefox plugin’s any web developer needs I got hammered for not posting FireBug. I admit that FireBug is Amazing and I use it often, but anyone knows FireBug, so posting about it is a bit pointless. My aim was to shed some light on some less known plugins, and therefore today’s post will not include FireBug again :)

lets start then:


Continue Reading...

I’m sure you’ve seen those nice interactive form validations on some Web 2.0 websites. The validation occurs while you’re typing your form input. For example, you’re typing your email in the email address field. You see a red “X” mark beside the field and when you’re finished typing your email address, a green check mark replaces the red “X” mark. What happens there is while you’re typing in your email address, the page communicates with the server to validate what you’re typing. When you finished typing your email address and the data you keyed in is valid, it passes the validation so it shows the green check mark without reloading the page. This is done using Ajax.

In this tutorial, you’re going to learn how to make this kind of interactive, Ajax-powered form validation (the same validation sample mentioned earlier). If you haven’t used Ajax before, don’t worry because I will show you how you can create Ajax-powered applications without worrying about the whole XmlHttpRequest process. If you can program with PHP and a little Javascript, you’re good to go. All you need is this handy little open-source Ajax toolkit called Sajax.


Continue Reading...

I’ve read about jQuery in this great post Five recommendations for starting a startup with ASP.NET and wanted to play with it and see how easy it is to call a WebMethod from sQuery. I Started by reading some of the great Tutorials and downloaded the code from here. I Created a test web project, […]


Continue Reading...