Three Cool and Fresh Design Tools

Oct 09
2010

In today’s news round-up we have a small, yet cool, selection of useful tools, apps and resources for web designers. First up, we have a wonderfully useful jQuery plugin Quovolver) for displaying quotes in a stylish way, next up we have a small, yet very handy app for generating a grid (Gridulator) and finally a fun time-killing bookmarklet that can destroy everything on a web page.

Quovolver – a simple jQuery plugin for revolving quotes

Quovolver - a simple jQuery plugin for revolving quotes

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.
Quovolver – a simple jQuery plugin for revolving quotes

Gridulator – Make pixel grids, lickety-split

Gridulator - Make pixel grids, lickety-split

Tell Gridulator your layout width and the number of columns you want, and it’ll spit back all the possible grids that have nice, round integers. Just the thing for pixel-based design folk. There are inline previews, courtesy of the canvas element, and when you’re all set Gridulator can crank out full-size PNGs for you, ready for use in your CSS, Photoshop docs, or what have you.
Gridulator – Make pixel grids, lickety-split

Hello, want to kill some time?

Hello, want to kill some time?

Hello, want to kill some time?

By Paul Andrew (Speckyboyand speckyboy@twitter).

Fresh jQuery Resources

Jun 22
2010

In today’s news round-up we have collected some of the best and freshest jQuery resources. You’ll find some useful and powerful plugins, as well as an update of the jQuery Visual cheat sheet from woorkup and there is also a very detailed and comprehensive online jQuery training manual, that is called jQuery Fundamentals.

jQuery Fundamentals

jQuery Resources

The purpose of this book is to provide an overview of the jQuery JavaScript library; when you're done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning. This book was designed as material to be used in a classroom setting, but you may find it useful for individual study.
jQuery Fundamentals

jQuery 1.4.2 Visual Cheat Sheet

jQuery Resources

jQuery Visual Cheat Sheet, is a refined and updated version of the popular jQuery Cheat Sheet and its finally here. The new edition includes all the reference you will ever need for the jQuery 1.4.2 API.
jQuery 1.4.2 Visual Cheat Sheet

jQuery FormLabels Plugin

jQuery Resources

The idea of using captions on form input boxes is not new, but all previous methods of providing this functionality have a few disadvantages. Every form is different, so building a uniform label generator was not an easy task.
jQuery FormLabels Plugin

jQuery Text Change Event

jQuery Resources

It's a common problem, you have a text form that you need to validate client side. It's easy enough to do this when the form is submitted but in some cases better to do as they type. Implementing this requires binding events to the keyup event, and a couple other events if you want to detect text changes on cut and paste. Even if you're a JavaScript god it's tedious to keeping writing this logic over and over again. Be smart and use the ZURB text change event plugin instead.
jQuery Text Change Event

By Paul Andrew (Speckyboyand speckyboy@twitter).

List with the most popular wordpress plugins

Mar 18
2010

4 Awesome Recently Released jQuery Plugins

Feb 17
2010

Where would web design be without the wonderful jQuery and its marvelous library of free plugins? Of course there are other Javascript libraries, but none of them have had such a dramatic impact on modern web design as jQuery. It really is indispensable.

For today’s news we take a look at four very different recently released jQuery plugins and, as we try to do, keep you up to date with its development.

jDigiClock – Digital Clock (HTC Hero inspired)

jQuery Plugin

jDigiClock is a jQuery plugin that has been inspired from the distinctive HTC Hero Clock Widget.

For such a complex looking plugin it is surprisingly easy to install and offers a multitude of options that control the appearance and behavior of the clock.

jDigiClock Downloads & Docs

Quicksand

jQuery Plugin

Quicksand is a very functional jQuery plugin for reordering and/or filtering items with a sleek and smooth shuffling animation.

This awesome plugin simply replaces a collection of items with another and also comes with a fair few options – like setting the duration or the easing type of the animation (optionally, Easing plugin can be used for more easing types).

Quicksand Downloads & Docs

Uniform – Sexy forms with jQuery

jQuery Plugin

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?

If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Uniform Downloads & Docs

Ketchup Plugin – Form Validation

jQuery Plugin

Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

The plugin has been designed to be styled and extended by you and it does already looks tasty and gives you the most common validations by default, but should you need to change things a little, its very easy to do.

Ketchup Downloads & Docs

By Paul Andrew (Speckyboy and speckyboy@twitter).

A Selection of Useful jQuery Plugins

Jan 27
2010

For the last few years jQuery has been the jewel in Javascripts crown. Its rapid rise in popularity not only reflects how powerful a tool it is but also how relatively easy it is to work with. It is because of these two factors that developers have been churning out plugins and new techniques at a phenomenal rate.

Thanks to all of those developers for making our life easier!

30 Stylish jQuery Tooltip Plugins For Catchy Designs

jQuery Plugins and Techniques

Tooltips can be an important factors on a web site,although little and not always visible, they do offer so much. Although important, they also happen to be a very badly misunderstood and a poorly implemented component.

30 Stylish jQuery Tooltip Plugins For Catchy Designs

45 jQuery Navigation Plugins and Tutorials

jQuery Plugins and Techniques

As many of us know, the initial 15-20 seconds of a new user’s visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it’s vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can either learn easily or already understands.

The biggest part of this process is developing a menu that is both easy to use and intuitive, as well as styling it to fit into your site’s design. Having said all that, an easy-to-use menu should not put the shackles on creativity.

In this article they’ve listed 45 jQuery plugins and tutorials that demonstrate not only how powerful jQuery is, but also how your website’s navigation can be both creative and usable.

45 jQuery Navigation Plugins and Tutorials

25 jQuery Plugins for Working with Forms

jQuery Plugins and Techniques

Almost every website uses a form of some kind. Contact forms and other types of forms can be enhanced with the use of a number of jQuery plugins that are readily available. In this post they feature 25 useful plugins that you may be able to use in your own work with forms.

25 jQuery Plugins for Working with Forms

By Paul Andrew (Speckyboy and speckyboy@twitter).

20 Easy-to-Learn jQuery Animation Tutorials

Jan 26
2010

There’s no denying that the web has evolved and continues to evolve into something very different from what we had in mind a few years ago.

Animation on websites has gone a long way, some time ago everything and anything that had movement on a website was automatically categorized as Flash, now we have these different technologies that have raised the standard and have broken the mold. One of these key technologies is jQuery, and with the powerful scripting language that it represents (JavaScript) you can do amazing things.

This trend of progress is more than heartwarming, it’s amazing, and this is why we’ve compiled a hand-picked list containing 20 Easy-to-Learn jQuery Animation Tutorials that are truly amazing! Have we missed any? If so, please share with us below.

Moving Boxes Carousel with jQuery

This is a simple jQuery tutorial will not throw a lot of source code your way. The carousel has features that allow you to zoom in and out. The boxes slide left or right.

Demo

Building an Animated Cartoon Robot with jQuery

The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces. The final step, was animating the robot with some jQuery.

Demo

Crafting an Animated Postcard With jQuery

Sam Dunn of Build Internet, wrote a tutorial on how to create an animated landscape using transparent images. The tutorial is based on the jQuery Easing plugin to aid the animation and the setTimeout() JavaScript function to time the events respectively.

Demo

Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

This technique provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Demo

Animate a Hover With jQuery

Animate an image while hovering it and show the visitors information while doing that. Sounds simple huh? Well it is, but the effect is nice and can be nice for a portfolio, for example.

Demo

Puffing Smoke Effect in jQuery

This tutorial by Gaya Kessler features a beautiful animation effect of cartoonish smoke emanating from factory smoke stacks. You will be supplied a configurable jQuery plugin with instructions based on Gaya’s own site’s header, this way you can see the tutorial example first hand.

Demo

How To Create A “Mootools Homepage” Inspired Navigation Effect Using jQuery

The menu on MooTools is exceptional, and this tutorial covers how to create a similar one. It’s an amazing effect.

Demo

Build An Incredible Login Form With jQuery

This tutorial, guides you in creating a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. You incorporate these features into your sites login area.

Demo

jQuery Infinite Carousel

This screencast explains how you can create a simple and nice scrolling carousel and how you can also make it automatically loop round by itself.

Demo

Create an Amazing Music Player Using Mouse Gestures & Hotkeys in jQuery

This tutorial helps you create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

Demo

Learning jQuery: Revealing Photo Slider

This revealing photo slider is great, it’s perfect for portfolios and photography sites. The entire structure of the slider is coded in JavaScript and CSS.

Demo

Animated Drop Down Menu with jQuery

Drop downs are a dime a dozen these days and creating one that stands out is a bit hard. However, with this animated jQuery tutorial you will be guided on how to create one that works with jQuery. After you finish the tutorial you will know how to create your very own jQuery powered menu.

Demo

Multiple Animations with Glimmer

Glimmer is a JavaScript animation creation tool that lets you create amazing animations. By visiting the site you’ll be able to see a variety of examples with code.

Demo

How to Load In and Animate Content with jQuery

This tutorial will allow you to enhance the functionality of content on your site using  jQuery and a bit of ajax so that the content loads into the relevant container instead of the user having to navigate to another page.

Demo

Create a Parallax Scrolling Background

In this tutorial, you will be  be using jQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

Demo

Create a Stunning Sliding Door Effect with jQuery

This tutorial includes detailed explanation that will guide you through the process of learning how to make a stunning four corners sliding effect easily with jQuery.

Demo

The youlove.us Scrolling Background Effect Explained

The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.

Demo

Make Your Header Responses To Mouse Movements with jParallax

jParallax turns a selected element into a window, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Demo

“Outside the Box” Navigation with jQuery

Just about every website uses the regular navigation concepts everyone’s used to. But since this can become boring to veiw, tutorials such as this one mimicking the OS X dock and stacks is the bi-product.

Demo

Re-Create the Leopard Desktop with jQuery

jQuery adds a whole lot of cool functionality to your websites. It can do a range of things, from animation to AJAX. With this tutorial you will learn how to use jQuery to create a completely coded Dashboard, just like Leopard! This can be handy in hiding widgets, links with icons, and more.

Demo

18 Unique Uses of WordPress and the Plugin or Theme Used

Jan 20
2010