18 Fireworks Resources for Web and Applications

Adobe Fireworks is the industry pioneer and leader for web graphic prototyping and rapid web site building.

This post  is  a collection of all the tools a web and app developer needs to get the best out of Adobe Fireworks.

Prebuilt CSS Templates for Fireworks

To complement the CSS Export feature in Fireworks CS4, Adobe have created a series of prebuilt templates that are ready for export, and a perfect tool to help you get to grips with designing with this tool and CSS.

Within the download package, there are five template variations in two flavors – one suitable for exporting from the shipping version of the CSS Export feature and the other for the enhanced version of the export feature.

Download Prebuilt CSS Templates for Fireworks »

Interactive Full Website Template and Logos for Fireworks

Fireworks makes it really easy to mock up a website without touching even one line of code. This free website layout sample file contains all the basic pages required to build a website – all of the pages are linked together and ready to be exported for a quick visual preview before coding even begins.
Download Interactive Full Website Template and Logos for Fireworks »

The Yahoo! Common Library Stencils for Fireworks

The Yahoo! Common Library Stencils for Fireworks »

Orange Commands – Workflow Automation for Fireworks

Orange Commands is an amazing collection of over 90(!) commands, grid templates and web element templates (checkbox, textfield, sliders…) all compatible with Adobe Fireworks CS3, CS4 and now CS5, all developed to make the life of a web designer easier.

The 90 or so commands/extensions will allow you to manage alignment, alpha, canvas, color, effects (including a lightbox), grids, guides, pages, position, properties, size, text… and much more. Much More!

Orange Commands – Workflow Automation for Fireworks »

Wireframe Diagram Templates for Fireworks

Wireframe Diagram Templates for Fireworks »

Fireworks 975px Template Grid Systems

You can either download the 12 column version or the six column version, and both includes a 16px baseline grid.
Fireworks 975px Template Grid Systems »

Background Image Grid to Lay-Out Your Web Site Template

This is not just another grid template, it takes things a little bit further. It is a very detailed grid background which, with the source files, allows you to tailor the grid and customize it to your needs.
Background Image Grid to Lay-Out Your Web Site Template »

Fireworks Blueprint CSS Template

Fireworks Blueprint CSS Template »

Firefox Browser Template (Mac) for Fireworks

This is a 1024px editable browser template of the Firefox Browser interface for Mac. Some elements have been de-colorized to allow your work to shine through.
Firefox Browser Template (Mac) for Fireworks »

Firefox Browser Template (Windows) for Fireworks

These Firefox browser templates are available in both 1024×768px and 800×600px.
Firefox Browser Template (Windows) for Fireworks »

Internet Explorer Browser Template (Windows) for Fireworks

These Internet Explorer browser templates are available in both 1024×768px and 800×600px.
Internet Explorer Browser Template (Windows) for Fireworks »

Flow Chart Library Symbols

Flow Chart Library Symbols »

iPhone GUI as Rich Symbols for Fireworks

iPhone GUI as Rich Symbols for Fireworks »

Fireworks Toolkit for Creating iPhone UI Mockups

Fireworks Toolkit for Creating iPhone UI Mockups »

Fireworks GUI Template for Android

Fireworks GUI Template for Android »

Nokia S60 Wireframing Stencils for Fireworks

These stencils include components for S60 5th Edition touch devices and S60 3rd Edition non-touch devices. This package includes stencils for S60 5th Edition touch devices and S60 3rd Edition non-touch devices, both in Adobe Illustrator CS4 format and Adobe Fireworks CS4 format.
Nokia S60 Wireframing Stencils for Fireworks »

48 Ultimate Web 2.0 Styles for Fireworks

With these cool pre-made Styles you can easily give a nice looking gradient effects fto website elements like web 2.0 headers, backgrounds, buttons or any web based designs.
48 Ultimate Web 2.0 Styles for Fireworks »

Fireworks AutoBackup Utility

Auto Backup is an Adobe AIR application that helps you to automatically keep creating backups of all your .png files which are being modified, while working Fireworks. A copy of the working file is automatically saved at a user-specified interval inside a folder named FWAIRBackup which is located in the same path as that of the original file.
Fireworks AutoBackup Utility »s

read more...

10 Mootools plugins you should know

After a lot of jQuery posts it’s time for an almost forgotten framework, Mootools. jQuery is more popular at this moment because it’s easier to use than Mootools, but Mootools is still a very powerfull javascript framework. Mootools is a good and useful framework but more for the javascript developer.

This collection of Mootools plugins contains some pretty cool and very useful stuff. If you know some useful Mootools plugins please share theme with use and drop them in the comments below

FancyForm

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

Website | Demo

Milkbox

Mootools lightbox clone.

Website | Demo

AutoGrow Textarea MooTools Plug-In

AutoGrow Textarea is a mooTools plugin that expands a textarea as the user types in text.

Website | Demo

Rabid Ratings

RabidRatings is a simple but eye-caching ratings system which allows users to your website to rate virtually anything. Installation is easy—simply tell the PHP script how to connect to your database and include the PHP tag where you want to have a ratable item, and everything else is done for you.

Website | Demo

SlideItMoo

SlideItMoo is a banner rotator, article spinner and image slider ( carousel ) developed with MooTools 1.2. Differences from the first version are the fact that the image slider now supports continuous sliding when navigating, offers the possibility to set how the slider will slide ( from left or from right ) when used with the auto slide feature on, offers the possibility to give it the item width ( width of the slider’s items ) and let it display the elements according to that width and the visible items parameter.

Website | Demo

RokSlideshow

RokSlideshow is a mootools powered JavaScript slideshow that allows you to quickly and easily display a selection of images and transition between them. The slideshow itself is very flexible and easily customizable and offers a great alternative to flash-based solutions.

Website | Demo

FormCheck

FormCheck is a class that allows you to perform different tests on form to validate them before submission.

Website | Demo

Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator

Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator.

Website | Demo

MooTools Auto Captioning Images

MooTools Auto Captioning Images.

Website | Demo

TableGear

TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.

Website | Demo

iPhone Checkboxes

One of the sweet user interface enhancements provided by Apple’s iPhone is their checkbox-slider functionality. Thomas Reynolds recently released a jQuery plugin that allows you to make your checkboxes look like iPhone sliders. Here’s how to implement that functionality using the beloved MooTools JavaScript framework.

Website | Demo

Rounded Corners

Creates rounded corners on divs.

Website | Demo

Moousture

A mouse gesture library written soley in javascript with power and flexiblity to mould itself for you. Implemented on Mootools following the Object Oriented standards. Library is aimed to set out a future framework for mouse guesters for any browser including modern mobile devices.

Website | Demo

mediaboxAdvanced

Based on Lightbox, Slimbox, and the Mootools javascript library, mediaboxAdvanced is a modal overlay that can handle images, videos, animations, social video sites, twitter media links, inline elements, and external pages with ease.

Website | Demo

Queued Photo Uploader

Don’t think that the uploader can handle only images! But since this showcase is called “Queued Photo Uploader”, the selectable file-types are limited to images. Check the showcase JavaScript shown under this paragraph for more options.

Website | Demo

Knoppr

An online image cropping tool for your website.

Website | Demo

mooSocialize

Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc. By clicking the mooSocialize button, a window will appear, which lets you choose your favorite network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking.

Website | Demo

read more...

10 Really helpful Jquery map plugin

jQuery is a very popular JavaScript Framework created to be a single solution to increase website interactivity.

Some plugins and tutorials below offer easy solutions to install a map, they also offer the option to add additional functionality to meet your needs.

Mapbox

With Mapbox, you can use the plugin to create a map with a small scale, have the ability to zoom and drag-drop with several layers of content. This plugin can be used to plan development, games or layout with zoom Functions

Googlemap jQuery Plugin by Dylan Verheul

Plugin created by Dylan Verheul will facilitate you put Google maps on your website pages. To be able to run this plugin you need a Google Maps API key which can be inhttp://www.google.com/apis/maps.

gMap

GMap is a plugin that is very lightweight (only 2KB) but has a great ability. Very flexible and customizable. This plugin lets you embed Google Maps into your site.

Google Maps jQuery Plugin

JQuery Google Maps Plugin enables you to embed Google Maps into your site easily. Also the map can be controlled through the CSS and this makes a perfect position on the map in your site design

jMapping

jMapping designed for rapid development of web pages that use Google Map with a list of locations specified in the HTML. This plugin expects the HTML for that location will be grouped in a common element

jQuery GPS

Jquery GPS is a lightweight and simple solution to all your needs Google Map. Add inputs for addresses by Simply adding default or a custom ID’s. You can use any element to trigger the event! So it does need to be embedded inside a form. GPS jquery also has the ABILITY for you to select the place the map shows, and to open a tooltip and load a graphic image on that starting location.

imGoogleMaps

This is a very simple plugin that was developed for simple implementation with minimal and basic choices. Also this plugin will from Google Map displays certain errors codes. In Addition, this plugin will allow you to use Ajax to retrieve an address as well as reverse geocoding.

Building an interactive map with jQuery instead of Flash

To make the map interesting as possible, there needs to smooth animations and crisp graphics. Like traditional project will require the use of Flash. However, this tutorial tries to avoid Flash if possible, but achieved in jQuery.

jQmaps

jQmaps is a very popular plugin for Google Maps. You can add custom points, ballons expandible and link hotspots. Because there is no complete documentation, you can directly use

jQuery and Google Maps with KML

Tutorial that explains the use of jQuery and Google Maps with KML. Instead of ten randomly placed markers on the map, we will generate driving directions from Point A to B and use the data KML from Google Maps to create bookmarks. Add “& output = kml”, Google Maps will return a KML document that we can then parse to get the marker information.

Written by Denbagus at reencoded.com

read more...

15 Jquery tricks for developers

We bring you 15 tricks capable of transforming a boring site into a slick, cool and interesting one that users will want to engage with again and again. Some of these tricks are more suited to beginners, while others will teach even the biggest jQuery geeks a thing or two.

1.) Image Cross Fade Transition

 

Learn how to fade one image into another. Three different methods of achieving this aim are discussed here: using two images, using a single image and simply using CSS.

2.) Vertically Scrolling Menu

 

Create an innovative and slick vertically scrolling menu for your website that’s really easy for visitors to use.

3.) Create a Fancy Share Box

 

Most sites these days feature social media share links, but most present them in a really boring way. You can make your site stand out by using the tricks outlined here. Align and overlap your share links to save space, looking sleek in the process.

4.) Create Background Image Animations

 

Creating background image animations is easier than you think, using jQuery. You’ll need to download the Background-Position plugin to do it, but a minimal amount of code is required. Who needs Flash?

5.) Create a Smooth jQuery Popup

 

Learn to create a polished popup using HTML, CSS and the jQuery Library. Get it done in just two easy steps.

6.) Use a Cheat Sheet

 

A well-designed cheat sheet makes using jQuery simple. Above, you’ll find a great online cheat sheet for 1.2.6.

7.) Build An Incredible Login Form

 

This is a great space-saving jQuery trick, but it’s not as easy as some of the others in this list. Follow 16 steps to build an animated login form which folds out from the top panel when clicked.

8.) Create a Slick Tabbed Content Area

 

This easy to follow tutorial will guide you through a relatively simple method for creating a minimal, really functional tabbed content area, using CSS and jQuery.

9.) Rounded Corners

 

Use jQuery’s Wrap, Prepend and Append functions to create rounded corners, to make your site look that little bit more welcoming.

10.) slideViewer

 

Use slideViewer, a lightweight (1.5kb) jQuery plugin, to create a smart looking image gallery without having to write loads of HTML. It’s customisable and intuitive.

11.) Build a LavaLamp Menu

 

The LavaLamp menu is really satisfying to use and looks great. Follow this tutorial to create your own.

12.) Style Switcher

 

Use jQuery and PHP to create a clever style switcher which will really make your website stand out from the crowd. In this example, ‘day’ and ‘night’ styles are used, but there are thousands of potential styles which could be combined using this method.

13.) jQuery Tools

 

jQuery Tools is a collection of six different, equally amazing tools for you to use in your website. These include the brilliant Scrollable, which makes scrollbars a thing of the past.

14.) Implement a News Ticker

 

Create a great news ticker, which features fade in and out effects, with jQuery and just 10 lines of JavaScript code.

15.) Create an Amazing Music Player

 

Use xHTML and jQuery to create a fantastic music player, which users can interact with by clicking and dragging with their mouse or clicking their directional keys and space bar.

read more...

10 Tips to improve your jquery code performance.

I’ve been coding using jQuery since shortly after it came out, and well — I’ve been using it almost every work day. Here is a few tips that have saved me time.\

#1: Use data method instead of storing data inside theDOM.

The mistake I see people making all the time is this:

$('selector').attr('alt', 'this is the data that I am storing'); 
// then later getting that data with 
$('selector').attr('alt');

Why is this a bad thing? Because “alt” has absolutely no meaning whatsoever, as well as HTML is not meant to store data.

Instead use the data method in jQuery. It allows you to associated data with an element on the page.

$('selector').data('meaningfullname', 'this is the data I am storing');
// then later getting the data with
$('selector').data('meaningfullname');

This allows you to store data with meaningful names and as much data as you want on any element on the page. It is a really amazing utility and something I’ve come to rely on.

#2: Take advantage of jQuery’s built-in custom selectors.

jQuery has a plentiful amount of selectors that are beyond basic CSSselectors, so use them. Some that I use are:

• :input example: get all the inputs on the page regardless if they are checkbox, textarea or select list – use :input



• [attribute=value] example: find an input with the name,“container”- use input[name='container']



• :eq(index) example: get the fourth table on the page – usetable:eq(3)

#3: If you are Manipulating the DOM a lot, use livequery.

When you add elements to the page a lot, attaching events to them and running functions on them then use Brandon Aaron’s livequery plugin. This way you can do things like:

$('div.edit').live('click', function(){ ... });

Then whenever you add a div to the page with class “edit” it will attach that click event. This works for all other events, as well as if you want to run a function on an element right when it is added you can do this:

$('span.flag').livequery(function(){
  // run this function when a span with class "flag" 
is added to the page
});

#4: Use jQuery form plugin to submit files via Ajax.

If you use Mike Alsup’s jQuery form plugin you can use it to submit files via Ajax. It uses a trick with an iframe to submit the data. Just put in an input type file, then use $(form).ajaxSubmit(); and you are good to go.

#5: Use classes as flags.

If you aren’t storing data, but need to set a flag on an element use a class. What do I mean by a flag? Well, for instance if you are in"edit mode"of a form you might use the class,“editing”.With jQuery you can add a class with the addClass method and then check later if an element has the class with the hasClass method.

#6: Use JavaScript native for() loop instead of jQuery's $.each()helper function.

Native browser functions are always faster then any other helper functions that were built to add an abstraction layer. In case you are looping through an object that you have received as JSON, I highly recommend you rewrite your JSON to contain an array rather than an object.

#7 : Do NOT append an element to the DOM in your loop.

This one is probably one of the most important tips that will significantly improve your code performance. It is so important that I will repeat myself. Do not append a new element to the DOM in your loop statement. Instead store it in a variable as text and append it to the DOM after your loop finishes like this:

// DO NOT DO THIS 
for (var i=0; i<=rows.length; i++)  
{ 
    $('#myTable').append('<tr><td>'+rows[i]+'</td></tr>'); 
} 
// INSTEAD DO THIS 
var tmp = ''; 
for (var i=0; i<=rows.length; i++)  
{ 
    tmp += '<tr><td>'+rows[i]+'</td></tr>'; 
} 
$('#myTable').append(tmp);

#8 : If you have a lot of elements to be inserted into the DOM, surround them with a parent element for better performance.

When you have a lot of elements to insert into the DOM tree it takes time to add them all. Somehow adding one element with 1000 children is faster than adding 1000 children separately. You can search this site for performance tests that prove it.

So, to improve our previous example's performance let's cover <tr>'s with <tbody> tag like this:

var tmp = '<tbody>';
for (var i=0; i<=rows.length; i++)
{
    tmp += '<tr><td>'+rows[i]+'</td></tr>';
}
tmp += '</tbody>';
$('#myTable').append(tmp);

#9 : Don't use string concatenation, instead use array's join()method for a very long strings.

var tmp = [];
tmp[0] = '<tbody>';
for (var i=1; i<=rows.length; i++)
{
    tmp[i] = '<tr><td>'+rows[i-1]+'</td></tr>';
}
tmp[tmp.length] = '</tbody>';
$('#myTable').append(tmp.join(''));

#10 : And the last but not least use setTimeout() function for your long list looping and concatenation functions.

This will make sure that page does not freeze while it loops through the long list of data and lets users to work with your page meanwhile.

It was well mentioned in comments that setTimeout() function should be used to split your code processing into little chunks so your browser does not freeze up like this:

function myFunk(data){ 
    // do processing 
    if(!has_finished) 
        setTimeout("myFunk()", 100); 
}

read more...