Devirtuoso » development Tools

10 Useful jQuery Plugins

Shawn — Wed, 09 Sep 2009 14:07:16 +0000

With project deadlines looming jQuery plugins can help add a lot of functionality in little to no time.
Here is a list of 10 extremely useful jQuery plugins.

Superfish

Should call this one lifesaver. This one is a little more than a plugin. It is a whole menu system. It makes pain in the butt menus easy. I’ve used this one a fair amount.

Visit the Website

If you’re doing anything fancy on your navigation this is a must have. It simply adds a delay before triggering the hover event handler. In terms of menus, this means that your submenu won’t pop out when a user accidentally scrolls over it. A must have for horizontal menus.

Visit the Website

Bgiframe Plugin

This one fixes a lot of problems with z-index and form inputs, with little to no effort.

Visit the Website

Tablesorter

It wouldn’t be a project unless there was a last minute request. This one saved my life a couple times. For that I salute you Tablesorter. (It’s a plugin that sorts your tables)
Visit the Website

Cycle

This plugin is a slide show for your images. It has more transitions than you’ll ever use, and a lot of options for customizing.

View the Website

jQuery Easing Plugin

This adds a little flair to your jQuery transitions and ultimately make your website stand out from the crowd.

View the Website

jQuery ThickBox Plugin

There are thousands of lightbox plugins out there. This one is my favorite for jQuery.

View the Website

Curvy Corners

When designers make it there mission to make the roundest website every, this will save you, and you will thank Curvy Corners.

Visit the Website

jQuery Media Plugin

Want to add media to your website? No prob. Plug this bad boy in and you’ll be soaking in the rays in no time.

Visit the Website

PNGFix

This tops my list of most used plugins. Until IE6 disappears, this one is a staple for me.

Visit the Website

jQuery Image Zoom Plugin

Shawn — Sun, 30 Aug 2009 02:46:57 +0000

The imageZoom jQuery plug-in makes it easy to show off your images in an easy and attractive manner.

The jQuery Plug-in

I put this plug-in together for a website that I’m doing. I figured it might be good idea to put it in plug-in form so I can reuse the effect on other websites.

Here is a look at what the website looks like.

Download Example

How to Use It

I tried to make it as simple as possible. You simply have to add a class to an image, and initialize the plug-in in your JavaScript.

Here is a sample page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title></title>

    <style type="text/css" media="screen">

        .zoom{

            float:left;

        }

    </style>

    <script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

    <script src="jquery.imageZoom.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">

        $(document).ready(function(){

            $('.zoom').imageZoom({captionHeight:40});

        });

    </script>

</head>

<body>

    <img src="image1.jpg" alt="Fan" class="zoom" />

    <img src="image2.jpg" alt="Head Stand" class="zoom" />

    <img src="image3.jpg" alt="Fail" class="zoom" />

    <img src="image4.jpg" alt="Last Pick in Gym Class"class="zoom"  />

</body>

</html>

Parameters

When initializing the plug-in you can pass in an object full of parameters to customize the look and feel of the display.

Here is a list of the parameters and what they do:

color – set’s the color of the caption’s text (e.g. “#ff0000”)
bgColor – set’s the color of the box behind the caption (e.g. “#ff0000”)
opacity – changes the opacity of the box behind the caption (e.g. 0.5)
captionHeight – the height of the box behind the caption (e.g. 40)
fontSize – the size of the caption’s font (e.g. “10pt”)
fontFamily – the font of the caption (e.g. “Arial, sans-serif”)

e.g.

1	$(.zoom).imageZoom({captionHeight:40, color:”#efefef”, bgColor:”#369”});

How it Works

The plug-in basically takes the image and wraps it in a div and gives the div the class that the image originally had. It then proceeds to create a background for the caption which is just a div with some CSS. Then it creates the text based on what the image’s alt tag is. This caption is wrapped in a span tag for styling.

So if you started with something like this:

1	<img src="image1.jpg" alt="Caption" class="zoom" />

You’ll end up with something like this:

1
2
3
4
5

<div class="zoom">

    <img src="image1.jpg" alt="Caption" />

    <span>Caption</span>

    <div class="bg"></div>

</div>

Feedback

I would definitely like to hear your feedback on the plug-in. What you like about it, what needs improvement, etc. By no means is this plug-in fully complete. I look forward to hearing your suggestions. Feel free to twitt me any recommendations at http://www.twitter.com/devirtuoso

Download Example

Contributing to the Death of IE6

Shawn — Wed, 05 Aug 2009 03:26:10 +0000

IE6 as every developer knows is a real pain. The website killie6.com has given an easy solution to help drive people away from using IE6. Here is my spin on killie6’s module.

The Idea

I liked killie6’s module, but I think it has to be a little more in your face. Originally I thought having something like a humorous 404 page would do the trick, but that would kill any sort of navigation of your site. So I opted to create a lightbox that pops up if you’re using IE6, make the user feel painfully guilty for using IE6, then give them a way to upgrade right then and there. Hopefully this will get the idea across to users not to use IE6.

Download Example

If you like this idea please download and use it. If you want something less obtrusive go with killie6.com. Something has to be done, the browser is driving everyone CRAZY!…okay maybe not everyone…probably just me.

Adobe Browserlab: Speed up Website Testing

Shawn — Tue, 07 Jul 2009 18:33:07 +0000

Adobe has created a tool to help speed up testing of your website. Right now it’s a free preview, but it’s worth a look.

Abobe Browserlab

What is Adobe Browserlab?

Adobe Browserlab takes screen snaps of your website in different operating systems and different browsers. Allowing you to see how your website looks different in the most popular browsers. Right now Browserlab only handles Internet Explorer and Firefox and Safari. Which pretty well covers the major browsers. Odds are if it looks good in those browsers, it will look good in Opera and Chrome as well.

Features

What impressed me the most about this was the speed at which it captured the images. There are some services out there that do the same thing but can take a fair bit to do. Adobe has done a good job in my opinion in keeping it fast enough that it is usable. Another great feature is the ability to have two captures up at the same time. That way you can compare. Even more impressive, they have an onion skin feature that allows you to overlay two captures on top of one another. Of course all of these have quick keys allowing you to quickly switch between views…slick.

If your a CS4 Dreamweaver user you’re in luck. Browserlab integrates into Dreamweaver giving you access to additional functionality such as testing local and active content.

Overall

All in all it looks very promising. If it had a few more browsers I would make it a staple in my development process. I’m still waiting for the ultimate browser which will allows you to switch between all browser. Until then this does the job.

10 Must Have Cheat Sheets for Developers

Shawn — Mon, 06 Jul 2009 19:32:42 +0000

There are far too many languages out there for web developers to remember everything for every language. Here is a list of cheat sheets that will help speed up research time for the lingo that you forget.

Be sure to check out the websites of the cheat sheet authors. Some of them offer them in different formats if you don’t like pdfs. They should be commended on their fantastic work. I know personally these cheat sheets have saved me bundles of time.

Jquery

Download PDF

Cheat Sheet Created By : www.gscottolson.com

CSS

Download PDF

Cheat Sheet Created By: www.addedbytes.com

JavaScript

Download PDF

Cheat Sheet Created By: www.addedbytes.com

Regular Expressions

Download PDF

Cheat Sheet Created By: www.addedbytes.com

HTML Characters

Download PDF

Cheat Sheet Created By: www.addedbytes.com

Design Patterns

Download PDF

Cheat Sheet Created By: www.addedbytes.com

PHP

Download PDF

Cheat Sheet Created By: www.addedbytes.com

MySQL

Download PDF

Cheat Sheet Created By: www.addedbytes.com

Subversion

Download PDF

Cheat Sheet Created By: www.addedbytes.com

Mod_Rewrite

Download PDF

Cheat Sheet Created By: www.addedbytes.com

Some of these you’ll use more than others. I found keeping a booklet of these within arms reach a life saver. Especially when regular expressions are getting a little too confusing. Enjoy.

Jquery Tools: A Jquery UI Alternative

Shawn — Fri, 05 Jun 2009 16:52:34 +0000

JQuery Tools – is a JQuery library that offers a pretty impressive set of useful tools.

Here is a list of the tools and a brief description of what they do.

Tabs

A light weight library that allows you to create a tabbed menu with little to no trouble.

Light Weight (2.5kb)
In comparison to the JQuery UI library (130kb), this is a drastic size difference / loading time.
Accordions
The tab library allows for the tabs to be used as accordions (both horizontal and vertical).
Browser History
The tabs don’t break the browser history. You can switch tabs, then press the back button on the browser and you will return to the previous tab.
Cross Linking
You can link into a tab. Nice feature to have.
Animations
You can animate and customize the tabs as you please.

Tooltip

Create a simple tool tip for your projects quick and easily. Great for forms, and other help items.

Simple
They have made it super simple to add a tool tip to your web pages. Very handy for forms.
Can Style with CSS
You can style the tool tips as you please.

Scrollable

Create a gallery of scrolling items. These are great for news tickers or catalogs.

Horizontal or Vertical
You can have it as either a vertical or horizontal scrolling gallery.
Dynamic addition and removal of items
You can add and remove items on the fly. Allows you to create a very dynamic scrollable gallery.
Automatic Scrolling
Allow your gallery to scroll periodically. You have a few attributes that you can tweak to get it the way you like.

Overlay

Create and customize a modal pop-up window. Great alternative to browser pop-ups.

Style with CSS
You can customize the overlay the you like.
Load External Pages
Load in external pages into your modal window.

Expose

Puts emphasis on the selected item by darkening the background.

Background Graphics
You can change the background graphics to your liking.
Style with CSS
Customize your colors and opacity with CSS.

Flashembed

A simple way to embed Flash while using JQuery’s selectors.

Easy
It is nice and easy to quickly embed Flash into your web pages. Comparable to SWFObject.
light weight(5kb)
Nice and small to help with loading times.

Overall it is a nice collection. I’m really loving the size of the library. Functionality without the loading times. That has been my one complaint about the JQuery UI.

To see which browsers it is compatible with visit their browser support page, and here is the download page.

Bookmarklets for Developers

Shawn — Sun, 24 May 2009 01:05:40 +0000

These are 5 bookmarklets that make development a little easier. For those of you who have never used bookmarklets before simple drag the links up to your bookmark toolbar. When you click on it, and it will run the Javascript.

Design Grid

This one is absolutely fantastic. If you have ever had to design to column widths this is a must have.

Visit design grid’s homepage to get the bookmarklet

CSS Validation

Need to validate your page? Click on the bookmarklet and it takes you to the w3 css validator.

Visit UNI web tools to get the bookmarklet

HTML Validation

Brings you to the w3 html validator.

Visit UNI web tools to get the bookmarklet

CSSFly

I often use this one in replacement of firebug for non FireFox browsers. It allows you to edit the CSS and HTML and see the changes automatically.

Visit CSSFly.net to get the bookmarklet

XRay

This allows you to see whats under the hood of a website. Click on an element and it tells you the path and the CSS associated with it.

Visit Xray homepage to get bookmarklet

Do you know of any other bookmarklets that can help out developers? Comment below.

Mozilla Prism: Bringing Web Applications to Your Desktop

Shawn — Fri, 15 May 2009 15:30:13 +0000

Mozilla Prism is an application that allows users run web applications directly on their desktop. Fantastic news for developers that want to conquer the desktop realm with little to no effort. It has an easy to use interface. It simply asks which URL to use, whether to create a shortcut and if you want it to sit in the system tray. That’s it. Easy smeazy.