JQuery

Places - a location information system using Drupal 7 and Google Maps API v3

"Places" is a Drupal7 site that shows all the locations in it either as a list or on a map.

The site can be viewed at www.netnik.com/places.

A mobile web app using Ajax and localStorage

Sometimes one gets so involved in a project that one forgets to write about it. That's been me these past couple of weeks, but hopefully this post will rectify that with insightful analysis. The only thing worse than documentation is no documentation.

Athenites Part 2 - Google maps API v3

screenshot

Currently, the Google maps that get loaded into each venue's page are from the iFrame embed code that Google provides with any map search. In order to make a page that would show all the venues at once, I had to delve a little deeper. I checked out a couple tutorials, but it turns out that most of the ones I could find were dealing with v2 of the API.

Athenites mobile site

screenshot

Athenites is optimized for use with smartphones. It's main feauture is a directory of live music venues in downtown Athens, Georgia. The page for each venue provides general information as well as their twitter and facebook status updates, and a Google maps widget.

You can see Athenites at athenites.com.

JQuery and AJAX content

I ran into a little problem with links in the content that was loaded into the page with jQuery. It turns out that jQuery attaches (binds) its functions to whatever objects (anchors tags in this case) you specify when the page is loaded.

Mobile styling

screenshot

Click here to see the demo.

When writing code I always try to keep things simple and with smartphones, this is a really good idea. Compared to a desktop or laptop, a smartphone is a puny thing: much less screen area, and less bandwidth and processing power. Good reasons to keep those HTML and CSS files as small as possible.

Views displayed in an accordion

This page features an accordion which contains 3 Views, each of which displays a list of articles tagged with the taxonomy terms "Drupal," "JQuery," and "CSS." (See the accordion at the bottom of the page.)

Adding elements to a page with jquery

If you go to one of my Magnifier pages, you will see, between the title and the image, the link "Back to Magnifier index."

This particular link is not provided by Views or by Drupal, but is added to the page by jquery. It's a situation that comes up surprisingly often - wanting to add something to a generated page.

It's fairly simple. In fact, it's just one line of jquery.

Moving Photo Magnifier into Drupal

A while back I made a demo of an image magnifier on a stand-alone web page. Now I'm going to implement the same functionality in a Drupal page. All Drupal needs to provide is a simple content type with a title, image, and description. The rest will be done by jquery.

Jquery animation 2 - zooming

Another demonstration of jquery-powered animation. This one is zooming. In our first example, panning, the jquery animate method only changed one property of our image. In this one we will see how to change the values of several properties at once.

For this demo I am using an 1862 photo (fron the Library of Congress) of a view of Richmond, Virginia.

Syndicate content