Top 10 Mozilla Firefox Add-ons For Web Designers & Developers

Web Developer
The Web Developer add-on extends Mozilla Firefox by adding a toolbar with various options for working with web pages. For example, it has an option to inspect CSS styles of page elements that will tell you what CSS attributes they have, and which styles affect them.

---

View Source In Dreamweaver


View Source In Dreamweaver is a new companion for web developers to open up any web page HTML source with Adobe Dreamweaver via a single and quick mouse click.

---

Open With Photoshop
Open With Photoshop is a new companion for web and graphic designers to open up any web image with Adobe Photoshop via a single and quick mouse click.

After installation of Open With Photoshop you can right click on any image inside a web page and choose Open With Photoshop option from context menu to send the very image to the Adobe Photoshop. If the Photoshop is not in open state the add-on will start up the Photoshop and will place the image inside the Photoshop when Photoshop is ready. If Photoshop is already open, Open With Photoshop will simply add the image in a new Photoshop window immediately.

Open With Photoshop usage is that simple and it is great time saver for web and graphic designers

---

Total Validator
This extension is an all-in-one validation tool that will check HTML, links, take screenshots and do a lot more. It also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (in five different languages), and take screen captures via different web browsers and operating systems to see how your web pages look.

---

Open With current page in another browser
Need to test your web pages out in Internet Explorer, Chrome, Safari, Opera (or anything else for that matter)?

Open With adds options to various parts of your browser for opening the current page in another browser.

---

FireShot
FireShot is a Firefox add-on that creates screenshots of your web page. What is unique about this plugin is that it gives you a set of editing and annotation tools for working with your screenshots. This can be a handy extension to have for presenting your work in your portfolio.

---

Firebug
Firebug is considered to be the ultimate developer’s tool for Firefox. You are given a ton of web development tools to use from within your browser. You can explore, edit, debug, and monitor CSS, HTML, and JavaScript in real-time on any web page.

---

Font Finder 0.5c
 

With this add-on, you can highlight any text on a page to find out CSS styling information about that highlighted block of text.

---

Measure It
 
Measure It is an add-on that gives you a built-in ruler for measuring web page elements. It’s great for figuring out dimensions of things on a web page.

---

Spell Checker
This add-ons is basically to check the Spelling mistakes all over the web page. It uses Firefox's inbuilt dictionary to check the spellings. There are many sites available which checks the spelling mistake on the website but for that you must have your site live. but what to do when site is under construction and you are testing it.To copy whole page text and past into some utility that checks the spelling mistakes is tedious work to do. This add-on will help you in this case.

PIROBOX EXTENDED V.1.0 - jQuery plugin

This is an advanced version of pirobox, implemented a few things more than the previous version. One of the most important things is the ability to open any kind of files, from inLine content to the swf files, from simple images to pdf files. Other things are: automatic image resizing and drag and drop.

Browser compatibility = FireFox 2+, Opera9.5+, Chrome, Safari (Mac/Windows),IE 7+.

I really hope that Pirobox can be fun and usefull for you. Enjoy the code with jQuery

View Demo Download

create a form validation with jQuery plugin

Formation is a jQuery plugin that allows you to quickly create a form with validation without writing any HTML. You simply specify the container you wish to append the form to. By passing a few parameters into one of the formation function calls you can add different validation such as number, e-mail, url, phone number, or zip code. Each element that you create can be fully customized. You can set the class, id, or any other attribute that is native to that element.

Enjoy!

View Demo

Pull Out Content Panel with jQuery

In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded to full page size to show more. A custom slider allows to scroll through many items in the panel.

Depending on how many items can fit to the user’s screen, we will adapt the item container in order make the maximum number of items fit, centering it horizontally.

View DemoDownload

Typing Game with jquery

This is a simple typing game experimental using jquery. The main criteria here is to understand how to read Keyboard Character Codes and displaying its equivalent Character on to screen. You may notice so many bugs in live demo, because this program is not implemented fully as we concentrated on important code blocks only.

Play Game

Carousel with wrap effect

This carousel actually wraps slides as they're bumped off the edges. That is, if a slide is bumped off the right edge, it reappears in equal measure from the left edge. The 'on' slide is always centered, widened and given full opacity. The other slides huddle around it, narrower and semi-opaque. An auto-rotator turns on each slide in turn, or you can force a slide on by clicking it (interrupting the auto-rotate). Clicking the 'on' slide takes you to its corresponding URL, specified in the config file.

View DemoDownload

Cursor following menu

The idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css. An extra feature included in the plugin is the function that animates the page to anchor points which you can test on the single-page demo.

View DemoDownload

Advance Supersized Slideshow jQuery Plugin

So, what exactly does Supersized do?

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles Images/backgrounds via slideshow with transitions and preloading
• Navigation controls allow for pause/play and forward/back 

View DemoDownload

AnythingSlider jQuery Plugin

AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really "full featured" slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.

View DemoDownload

Creating a Keyboard with CSS and jQuery

This keyboard requires a lot of HTML setup and playing around with CSS. Each of the keys will be represented by a list item in an unordered list. Each of the list items will have a class attached to them, used in both the CSS and jQuery. Most of the classes are just “letter”, “lastitem”, or something similar. This will make finding out which list item is which easy.

View DemoDownload

ColorBox

A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4

Why you should be using ColorBox

• Supports photos, grouping, slideshow, ajax, inline, and iframed content.
• Lightweight: less than 9KB of JavaScript.
• Appearance is controlled through CSS so users can restyle the box.
• Behavior settings can be over-written without altering the ColorBox javascript file.
• Can be extended with callbacks & event-hooks without altering the source files.
• Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
• Preloads background images and can preload upcoming images in a photo group.
• Written in jQuery plugin format and can be chained with other jQuery commands.
• Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
• Released under the MIT License.

Tested In: Firefox 3+, Safari 3+, Opera 9+, Chrome, Internet Explorer 6, 7, 8.

12345Download

AD Gallery, gallery plugin for jQuery

A highly customizable gallery/showcase plugin for jQuery.

Features

• Choose effect, should the image slide in, or fade in?
• Show fifth image by adding #ad-image4 to the url, this takes precedence over over settings.start_at_index
• jQuery call returns gallery instances, which enables you to change settings on the fly like the "Change to fade effect" link above
• Keyboard arrows to move back and forth
• Click on the edge of the big image to go to the next/previous
• Images are preloaded, and if the aren't finished loading when they are supposed to be displayed, a loading image will appear
• Slideshow count down only begins when the image has loaded and is visible
• Image title, can either be set in the title attribute, or in elm.data('ad-title', 'My title here'). $.data takes precedence over the title attribute
• Image descriptions, can either be set in the longdesc attribute, or in elm.data('ad-desc', 'My description here'). $.data takes precedence over the longdesc attribute
• Callbacks on different events that has access to the internal object, which means that you can access all internal methods, etc
• Takes the dimensions of the image container div and scales down images that are larger than it
• Image is positioned in the middle if it's smaller than the container div
• Images that are larger than the container are scaled down to fit inside the container

Browser compatibility

The script has currently been tested in Firefox 3/Win, Firefox 3.5/Mac, IE6+7+8/Win, Chrome 2/Win, Safari 3/Win, Safari 4/Mac, Opera 9/Win, Opera 9/Mac. If you have seen it working correctly in some other browser, or on some other platform, please let me know.

View DemoDownload