Blog

Sticky Footer

CSS Solution:
www.cssstickyfooter.com/
The least buggy css-only sticky footer I've found - just arrange your page.tpl accordingly, add the CSS, and it works!

JS Solution:
www.css-tricks.com/snippets/jquery/jquery-sticky-footer/
This one is for the times when you can't create the proper page structure but still need that footer stuck to the bottom of the page.

Imagemap Rollover

CSS Solution:
http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-gu...
I used this recently to create a map that would allow users to select different regions as taxonomy terms - it is a bit intensive to set up, but the hover tooltips make it worth the time.

JS Solution:
http://davidlynch.org/js/maphilight/docs/
For pin-point accuracy. (See 'A map of the USA').

Tooltips

CSS Solution:
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/
Implemented a sleeker-looking version of this tooltip after getting buggy JQuery tooltips on a JS-intensive page.

JS Solution:

Rounded corners have become very popular and could be very easy to implement using CSS3. However as we know, some widely used browsers won’t give support to CSS3, making our life more complicated and our code more ugly.

Luckily, there are ways to get around for browser limitations! There are numerous CSS-only techniques that vary in complexity and flexibility. In addition to the numerous javascript techniques that are usually easier to implement. This is my favorite one:

The “jQuery Corner Plugin” (jquery.malsup.com/corner/) will add divs to the element with a solid color background to hide the original corners and create the illusion of rounded corners. What I really like about the “jQuery Corner Plugin” is that it detects if your browser gives support to CSS3 and will use the appropriate CSS if possible.

Here’s how to implement it:

I compiled a list of some pros about Drupal being open source.

Pros:

1. Contributed modules
Like the Apple App commercials "There's an app for that," ...there normally is a module for that too. It might not be exactly what you want but it does give you multiple community options.

2. Free
I love free things, no licenses, no sign up fees, no signing up for newsletters, its just there to download and play with. Install it as many times and in as many locations as you need. There's no need to count, track, or monitor for license compliancency.

3. Easily Changeable Code
you can fix and tweak problems according to your needs. You can also learn about how the system works itself by looking at the core code. This is a huge win over closed sources where you don't even own the code.

4. Community
Lots of resources and eyes from other people. You can find help and contributions from other people, and not just one company.

jQuery is an open source lightweight, cross-browser JavaScript library that is the most popular JavaScript library in use on the web today. Chances are, if you are a web developer or designer you have used or come across some plugins written in jQuery that have helped your web sites take advantage of JavaScript interaction with HTML with very minimal development.

As a developer learning how to develop your own jQuery plugin is extremely helpful as one can create any plugins they require for their site and in the spirit of open source, release them to the public.

Any web page that uses jQuery will have a ready event:
$(document).ready(function(){
    // Your code here
});

For this tutorial lets build a plugin that converts text on a page to a different color. A really simple plugin I know, but our primary goal is to learn about developing a plugin and not so much some awesome feature. You can create that later and thank me for getting you started. let's name our plugin colorChange.

Inside this ready event let's invoke your plugin:

One of the great benefits of jQuery lies in its syntax which makes code simpler to write and easier to read. Take these two equivalent examples:

While slightly slower, the jQuery approach is more compact, faster to write, and easier to debug. On the other hand, fewer jQuery calls mean faster code. When manipulating the DOM, it remains desirable to keep working with strings for that reason. Consider these 3 approaches:

With an array of 100 numbers, the benchmark results speak for themselves (10 times repeat):
Case 1. 328ms
Case 2. 78 ms
Case 3. 53 ms

Enters jString

The idea is to add jQuery-like methods to the String base class. These methods make what I call 'jString' or 'jQuery methods for Strings'. For building HTML, I found that I could get most of the work done with only five methods (empty, html, wrap, addClass and attr) so only these ones are currently implemented. For the examples above, using jString we can simply write:

When looking for jQuery plugins, I always try to do the research to find simple to use, compact plugins. Most of the time, for Drupal sites, I will take the minimized version and throw it into the themes folder, or a module's "includes" folder. Here is a list of jQuery plugins that I have used multiple times, on various websites, and are probably the easiest to use.

1. jTabber

One of the most annoying things about debugging your website for IE6 is to get your transparent PNG's to work properly. There are a couple of fixes out there, but most of them have some downsides. For instance, they won't work with background images, etc.

The solution we found is this great jQuery plugin by Drew Diller, which is very easy to use, works with background images and you can select multiple classes where the fix will be working.

Here is a basic run down on how to use this bad boy:

Lets start downloading the plugin here. You will see two files, one with the actual plugin and the other with the CSS classes, where the fix will be applied. The file containing the classes already has .iefix and .ie-fix, but you can add other classes like #header .logo if you need to.

2- Install the latest version of jQuery. If you're working with Drupal, thats already taken care.

These days, one of the more popular ways to display content is through a tabbed interface. It allows a user to add more content to their web page, but simultaneously organize it to only display the most relevant information first. There are multiple jQuery plugins that will achieve the desired basic look of multiple tab blocks on a page, and others offer extensibility to do custom behaviors.

The most recent plugin I used is called jtabber. The page offers straightforward implementation instructions, which basically consists of enclosing blocks in the proper div tags, and the script takes care of the rest. You can also customize the behavior (fade vs. slide) and use the standard .animate() js function to do sliding from the left as opposed to up or down.


$("#"+contentDivId).animate({ width: 'show' }, {duration: effectSpeed});


Share your most, or least, favorite jQuery plugin to achieve a tabbed interface here.

Let's say you have a news article content type and you use FCKEditor so your non-html savvy publisher can post a story with some basic formatting. One thing they will have difficulty doing is creating a caption for any images they insert into the body. This is not to say that they couldn't just bold some text below the photo and call that the caption, but this just isn't ideal. There is no relationship between the caption and image this way.

You could just switch off FCKEditor and stick a p tag with a class below the image, but if you've ever used FCKEditor you know how ugly and unmanageable this can be. And, still there is no real 'relationship' between these two.

Here's an elegant solution. How about re-purposing the img's "alt" attribute? After all, the "alt" attribute on an image is supposed to describe what the image is. There is no character limit, and these can make great captions. Here's how you can easily set up captions in your news articles.

First you'll want to create a class called ".caption". You can style it however you want, just be sure that it doesn't have any top margin so it stays flush to the image.

We are pleased to announce the release of the new Appnovation Company website. The site was constructed using Drupal 6 and includes extensive use of jQuery in many sections of the site.

The showcase slider on the front page uses the jQuery Coda Slider Plugin. If you click on any of the showcase items such as the Canadian Cancer Society logo on the far left, the showcase will start automatically scrolling through all the portfolio items. This has been built using custom jQuery.

On the services page, we used the jQuery Accordion plugin to create a sliding submenu. This allows site visitors to view all the service details without clicking through multiple pages.

Some of the modules used for the site include:
Views
Pathauto
Sitemap
Captcha
tagadelic
print
Imagecache
google_analytics
cck
contemplate