Ever wanted to have your page content scroll based on user interaction? In this article I'll show you how to create a simple JQuery scrollable area that will allow users to click on 'next' style links to view more information. I put this together as most of the JQuery scrolling articles out there deal with scrolling the entire page, but I just want to scroll inside a defined div element.

There is a demo of this here: JQuery scrolling within a Div

[ More ]

Following on from a previous article I wrote about (Google maps panning the next step in my Google mapping project is to be able to add markers to a Google map dynamically.

This article deals with how to translate a location into a latitude and longitude using Google, and how to send and add markers from a database into a Google maps via a remote service, using AJAX and JSON.

There is a full example of the finished application here: Demo of dynamically adding markers to Google maps

[ More ]

Whilst writing a new timesheet application I added a function to 'lock' an entire dataset, IE stop a user from editing the form on the page.

I'd spent a lot of time layout the timesheet page, designing the form, and help text etc. I didn't really want to destroy the visuals if a record was locked, I wanted it just the same, but 'non-active'.

This is where JQuery is simply awesome. Understanding 'selectors' and the power they can give you, with only very simple construction is key.

In this example imagine a page that has a div within it, the div has a id of 'divLabel'. Within that div there is a form. The code below will disable all the input elements within that div. Every single one of them. In one line of code. How cool is that.

What its actually doing is adding the disabled attribute to each input, then setting the value to 'true'.

Get familiar with how JQuery selectors work, the docs are here: http://api.jquery.com/category/selectors/