designing4u.de Yet Another Coding Blog

6May/100

Simple image caption with jQuery

Displaying a transparent caption over an image is a nice way to show the visitors what a particular image is about. In this tutorial I will show you how you can accomplish that with less than 50 lines of jquery without downloading any fully featured plug-ins. I will also try to accomplish it in an object oriented way. I tested it in Opera 10.01, Firefox 3.5.1, IE6, IE7 and IE8 and it works great.

You can see a working demo of this tutorial on this page.

10May/090

Zip code search using jQuery and Google maps – displaying results in a defined radius

Last time I wrote about handling a Google map event, which is triggered, when a user moves around the map. I only mentioned that I had to use this solution for one of my projects, which goal was to display companies branches in a certain distance radius. I decided that it probably will be really interesting for all of you, how to display all company branches according to user input, therefore this time I will show you, how to retrieve the addresses of the places from a MySQL database, based on the zip code and radius provided by a user. I will also split this example in two parts. Todays part will only handle retrieving the results, displaying a simple navigation and markers on the map. In the second part we will push our project a little bit farther and we will allow our user to display the directions from the zip code he or she provided to the branch of his or hers choice.

26Feb/090

Google Maps and jQuery – loading markers when user moves the map

Recently I was working on a project, in which the goal was to display all company branches within a certain distance, defined by a zip code and a range provided by user input. The solution was pretty simple. A user provides a zip code and the distance range, the script translates the zip code into geographical length and by using the Haversine formula retrieves all branches from the database and displays them in a Google map. This script was only working when a user submitted the information through a form that was provided for this script. As soon as he or she started to play with the Google map, the information about company's branches outside the initial zip code entered were not updated. When one assumes that a company has for instance 1000 Branches and resides in a small country, displaying other branches, while a user is moving within the Google map may be crucial to their search. I had to come up with an idea, how to solve this problem in my jQuery code. This is my solution.

11Nov/082

Google Maps and jQuery – calculating distance between two points

It has been a long time since I wrote my last example, but I've been really busy. Lately I got a request to write an example about calculating the distance between two points using KML file. What I will show you in this example is how to provide an user two drop down fields, which will be build according to provided KML file. Choosing each field will show a marker on the map. Changing the drop down field will cause removal of an according marker and placement of it in a new location. Also the markers will have two different colors, so an user can differentiate between starting and ending point. As the last functionality we will add a button. After an user clicks on the button, our function will calculate the rout and display the distance in kilometers. Let's start with a simple class which we will use to display drop down field and retrieve the coordination of requested place.

4Aug/0821

Google Maps, jQuery and XML – saving markers with user input

I just got a first request from a user of my site to help him with his problem. Let me describe it in detail. Assume that a user is visiting your site and he or she wants to place a marker on a google map displayed on your page. Additionally, we want to get some input from our user, therefore after he or she clicks on the google map we will provide an info could with a form. Our user will be able to provide a name, a message and a link and submit it. I didn't want to make this example too complicated, therefore handling the links or uploading the files you will have to solve by yourself. Let's move to the code.

21Jul/087

jQuery – show / hide button for multiple div containers with AJAX and JSON

This time I will consider another case of loading content into div containers using jQuery, AJAX and JSON request. In an other example I showed you how you can simply load content into one div container using AJAX and provide a user show and hide button.

In this example I want to consider a different case. Sometimes you don't only have one div container which needs to be filled out with content but multiple containers which need to be filled out with content according to the link which was clicked by the user. Again we will provide a functionality of changing the label of our button. We will extend this example by handling a larger amount of data in our response. For that reason we will use build in functionality of jQuery to handle JSON requests.

4Jun/080

Loading content into multiple div containers using jQuery and JSON

Because I didn't write anything in a long time and because I just changed the layout of my site, I decided to write a new example about jQuery and extend it this time with JSON. After studying google analytics I noticed that people are mostly interested in jQuery examples and specifically in showing and hiding content after users click. Because I already covered this example, I decided that this time I'll show you, how to load content into different div containers at one time. If you assume that you want to load content into more boxes, you definitely need to use JSON (JavaScript Object Notation). Of course one can say that XML would be suitable for this example as well, but the advantage of JSON is that it doesn't produce that much overhead. Of course XML is more versatile than JSON but with build in function of jQuery you can easily process received date.