DevKick Blog http://devkick.com/blog Kick-start your web development Fri, 03 Jul 2009 14:26:07 +0000 http://wordpress.org/?v=2.5 en Form validation with jQuery from scratch http://feedproxy.google.com/~r/devkick/blog/~3/FBtAjRQN1TM/ http://devkick.com/blog/form-validation-with-jquery-from-scratch/#comments Fri, 03 Jul 2009 14:26:07 +0000 admin http://devkick.com/blog/?p=25 An article covering form validation with jQuery and some basic JavaScript OOP concepts. Check it out:

Form validation with jQuery from scratch

]]> http://devkick.com/blog/form-validation-with-jquery-from-scratch/feed/ http://devkick.com/blog/form-validation-with-jquery-from-scratch/ Full Screen Image Gallery Using jQuery and Flickr http://feedproxy.google.com/~r/devkick/blog/~3/r1r348SsDwA/ http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/#comments Wed, 25 Feb 2009 19:49:39 +0000 admin http://devkick.com/blog/?p=24 I just finished off a small project I have been working on for a while on my free time. It’s a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. I also spiced it up with a flickr search engine, thumbnails, captions, preloader and some other goodies.

View Demo

FS Gallery

This is not a lab open source project, so there is no documentation available and it’s still under copyright. It basically loads image links one by one and replaces it with a full screen image gallery. It scales the image using CSS only (some JS for IE6) and I used jQuery all over.

Just like Galleria, it preloads images in advance for super fast viewing

Some features

  • Flickr search using jQuery and JSON
  • Full screen with kept ratio using CSS only
  • A png raster to even out up-scaled jpegs
  • Thumbnails with loader indicator and a nice hover effect that shows a bigger thumb (or description)
  • A preloader loads the large images one by one for super-fast viewing
  • Fetches the biggest image from flickr using their API
  • Caption that can be turned on or off
  • Navigate by clicking on either half of the image, or use the thumbnails.

There is a lot more to talk about, but I’ll just let the demo do the talking for now. It automatically searches for ‘beach’ by default. Enjoy.

]]> http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/feed/ http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/ Stylegala Reborn http://feedproxy.google.com/~r/devkick/blog/~3/_s-bqp6wzfk/ http://devkick.com/blog/stylegala-reborn/#comments Fri, 30 Jan 2009 18:30:07 +0000 admin http://devkick.com/blog/?p=23 Stylegala is having a surprise party.

Follow up on Twitter and hook up!

]]> http://devkick.com/blog/stylegala-reborn/feed/ http://devkick.com/blog/stylegala-reborn/ Hello? http://feedproxy.google.com/~r/devkick/blog/~3/nzwsumbLjnQ/ http://devkick.com/blog/hello/#comments Wed, 24 Sep 2008 19:00:26 +0000 admin http://devkick.com/blog/?p=22 Devkick has been taking a break. A loong break. The team has been up to some heavy client work and this site has not been updated for over three months, except some minor forum posts. Sorry for that.

That said, things are happing around here and we are in need of a re-structure. The next goal is to step down from the bar, take a deep breath and look around to see what this site is all about. It’s about keeping the ambition streamlined with it’s resources and man-power behind the controls.

We have noticed how popular the lab products actually are. Galleria and Tripoli alone stands for over 60% of this site’s visitors. Another 30% is the blog, that only contains around 15 posts. The rest is all of the rest.

In other words: we are not out. Stay tuned.

]]> http://devkick.com/blog/hello/feed/ http://devkick.com/blog/hello/ Design Inspiration: European Graphic Design from 1950-1970 http://feedproxy.google.com/~r/devkick/blog/~3/F_HRhS0Mn8I/ http://devkick.com/blog/design-inspiration-european-graphic-design-from-1950-1970/#comments Fri, 30 May 2008 16:08:30 +0000 admin http://devkick.com/blog/?p=21 European graphic design from the early days is a powerful inspiration source for designers all over the world. The new graphic design movement, also known as swiss graphic design or International typographic style that emphasizes cleanliness, readability and objectivity has had a huge impact on all areas of design ever since it was developed in Switzerland in the 50's.

The typical large, straight typography, sophisticated grids systems and a simple, clear message are all useful ingredients when designing web sites as well. So as a casual and relaxed weekend inspiration pack, I have hand-picked a small collection of 32 great posters and other artwork from the golden ages of european graphic design. These are not all very typical swiss style, but many of the designs presented here are clearly inspired by it in, one way or another.

]]> European graphic design from the early days is a powerful inspiration source for designers all over the world. The new graphic design movement, also known as swiss graphic design or International typographic style that emphasizes cleanliness, readability and objectivity has had a huge impact on all areas of design ever since it was developed in Switzerland in the 50’s.

The typical large, straight typography, sophisticated grid systems and a simple, clear message are all useful ingredients when designing web sites as well. So as a casual and relaxed weekend inspiration pack, I have hand-picked a small collection of 32 great posters and other artwork from the golden ages of european graphic design. These are not all very typical swiss style, but many of the designs presented here are clearly inspired by it, one way or another.

André-Franccois Marescotti



Record case by Joseph Müller-Brockman.

Tele Communicate



Belgian poster from 1962

Citroen 1974



One of the beautiful Citroen graphic designs

Design by Max Schmid



Basel 1959 for geigy.

Wanner AG



Designed by MB+Co, Zürich, sometime before 1972.

De Stijl



DeStijl exhibition poster designed by Almar Mavignier 1964.

Wohnbedarf



After the war ended, a new interest swept modern furniture design on to the international market.

Armin Hofman



Graphic design manual by Armin Hofmann

Die Gute Form

Jauna Gaita







Three beautiful covers from the eastern european magazine Jauna Gaita.

Italsider



1968 Magazine Advertisement, Italy

Film Special



1969 Magazine Advertisement, Milano Itay.

Beethoven

Pediatric Assistant

Citroen Advertising



Designed by Grafix Holtman 1976.

Geneve 1976



Sports poster designed by J.F. Calame 1976.

Strawinsky



Joseph Müller-Brockman 1955 design in the series for concert posters for the Tonhalle Gesellschaft Zürich.

Musica viva



Another poster by Joseph Müller-Brockman.

NKF



Piet Zwart design, double page, catalog. This was designed before 1950 (1922) but is worth including because of it’s typographic influence.

Union



Graphics for a Swiss bank.

Der Film



Josef Muller-Brockman was one of the great pioneers in the New Graphic Design movement.

Kunstgewerbemuseum



Design by Jorg Hamburger for the Kunstgewerbemusuem, Citroen, Zurich, Switzerland 1967.

Taptoe Delft

Luigi Franci

Grignani





Two beautiful posters by italian designer Franco Grignani

Europameisterschaft 1974

Nona Triennale

swb



Marcel Wyss 1962

]]> http://devkick.com/blog/design-inspiration-european-graphic-design-from-1950-1970/feed/ http://devkick.com/blog/design-inspiration-european-graphic-design-from-1950-1970/ Parsing Strings With jQuery http://feedproxy.google.com/~r/devkick/blog/~3/mM6RzmOvXWk/ http://devkick.com/blog/parsing-strings-with-jquery/#comments Wed, 28 May 2008 11:21:15 +0000 admin http://devkick.com/blog/?p=20 Regular Expressions is a powerful tool when parsing and validating strings. And combining regular expressions with the simplicity of jQuery selectors can create some fast and useful string parsers. This post will show you a couple of really useful parsers that you can use in various environments, or as a base to create your own.

]]> Regular Expressions is a powerful tool when parsing and validating strings. And combining regular expressions with the simplicity of jQuery selectors can create some fast and useful string parsers. This post will show you a couple of really useful parsers that you can use in various environments, or as a base to create your own.

Regular expressions introduction

Virtually any modern programming language supports regular expressions. Regular expressions are used to parse or match strings with patterns using a certian language that the program intercepts and parses to generate a result. From wikipedia:

In computing, regular expressions provide a concise and flexible means for identifying strings of text of interest, such as particular characters, words, or patterns of characters. Regular expressions (abbreviated as regex or regexp, with plural forms regexes, regexps, or regexen) are written in a formal language that can be interpreted by a regular expression processor, a program that either serves as a parser generator or examines text and identifies parts that match the provided specification.

This article is not meant to be used as a learning tool for how to use regular expressions, instead I will show you how to integrate regular expressions with jQuery to create powerful string parsers.

If you’d like to view the examples right away, here is a HTML sample file.

Extending jQuery with chainable plugins

By offering a simple mechanisms for creating plugins, jQuery can easily be extended with custom methods. We are going to take advantage of that in this article by creating chainable jQuery methods that parses the selector’s html content. Let’s start with A bullet-proof frame for chainable jQuery plugins:

There. The first <script> line simply adds the jQuery core. The second script contains the plugin frame we are going to use. I always wrap jQuery methods and plugins in a private function that uses the $ to reference jQuery to avoid conflicts with other frameworks using the $ sign. Now, let’s add some regular expressions.

First example: strip HTML tags

As a simple first example, let’s create a simple method for stripping out HTML tags from the selector’s content. This is how I would like to use it later on:

$('p').stripHtml();

Ok, so let’s create the core functionality inside the plugin. First we assign a regex to a variable. This regular expression will match all HTML tags, including the tricky <span class=">">:

var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;

Note the gi after the ending slash - they stand for global and case insensitive, meaning that it will match every instance and ignore cases. Continuing with the parser, let’s apply this regex to the selector’s content:

$(this).html(
    $(this).html().replace(regexp,"")
);

Using our expression and the javascript replace method, we now replace the matching HTML tags with nothing (”"). Using the jQuery html() method, we also replace the old html content of the selector with the parsed string. All we have to do now is to wrap it up and add our code into the plugin frame:

(function($) {
    $.fn.stripHtml = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,”")
            );
        });
        return $(this);
    }
})(jQuery);

Second example: clickable URLs

Using the same principle, let’s create another plugin that matches all URL’s and replaces them with a wrapping anchor link:

$.fn.clickUrl = function() {
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'$1‘)
            );
        });
        return $(this);
    }

Note the new regex that matches all URL’s inside the string and the $1 reference in the replace method that brings the first matching paranthese into the replaced string. In this example, we simply bring the matching url and wrap it inside an anchor tag. You might have to escape the quotes with backslashes.

Third example: escape HTML

Escaping HTML can be useful in some situations. As an example, I can definetely see the benefit of doing something like $('pre').escapeHtml() to render HTML tags correctly inside each preformated element. Doing so, there is no need to use a complicated regexp string, instead we can chain several replace methods to match and replace each instance of HTML 2 entities (a normal pre tag is used here to preserve character rendering):

$.fn.escapeHtml = function() {
        this.each(function() {
            $(this).html(
                $(this).html()
                    .replace(/"/g,"&quot;")
                    .replace(/</g,"&lt;")
                    .replace(/>/g,"&gt;")
                    .replace(/&/g,"&amp;")
            );
        });
        return $(this);
    }

Source

I have included all three examples with some simple test strings in a HTML sample file. Just view the HTML source to see how they are implemented and used.

]]> http://devkick.com/blog/parsing-strings-with-jquery/feed/ http://devkick.com/blog/parsing-strings-with-jquery/ Modalpreview - Preview Your Comment in a Modal Window http://feedproxy.google.com/~r/devkick/blog/~3/phLq04SQLDQ/ http://devkick.com/blog/modalpreview-preview-your-comment-in-a-modal-window/#comments Mon, 19 May 2008 19:32:12 +0000 admin http://devkick.com/blog/?p=19 Some people have asked me about the comment preview functionality that DevKick is using in the blog, so I made it into a handy jQuery plugin called Modalpreview.

]]> Some people have asked me about the comment preview functionality that DevKick is using in the blog, so I made it into a handy jQuery plugin called Modalpreview.

Modalpreview image

I got the idea when was looking for a quick way of adding a preview function to the comment form here on DevKick. I wanted something new and did not want to go server-side. I never liked the live preview thing, mainly because I don’t like when stuff happens on the page automatically when I press a key. So I thought, why not just use a modal window to present the textarea as HTML before submitting the form?

That would prove to be a lot harder than it sounds like.

The first problem: fixed positioning in IE

Modal windows would be really easy to implement if it wasn’t for the fact that IE6 is lacking support for position: fixed. Fortunately, I found some expressions that works well enough for producing modal windows, but the vertical centering is still buggy. That’s ok though, we can always specify a top margin for IE from the modal window up to the browser edge. Anyway, here is the key for adding position:fixed to IE:

top:expression(
    ((ignoreMe = document.documentElement.scrollTop ?
    document.documentElement.scrollTop :
    document.body.scrollTop)) + 'px'
);
right:expression(
    ((ignoreMe2 = document.documentElement.scrollLeft ?
    document.documentElement.scrollLeft :
    document.body.scrollLeft)) + 'px'
);

Second problem: IE’s stacking order

I wanted to append the preview div inside the form element to integrate form functionality, but IE said no. IE has it’s own z-index order that I never understood and I believe it’s some crazy relative logic depending on the nearest positioned ancestor etc. So trying to break out the preview div from the form falied miseably in IE, since it was impossible to place it above the overlay and position it fixed in the body center. This is the main reason why I couldn’t have a submit form button inside the preview division, wich leads us to the next problem:

Third problem: the submit() function

I really, really wanted to clone the form’s submit button and append it to the preview division to add a ’submit form’ button under the previewed text. But in order to do that properly, the preview division needed to stay inside the form tag. That proved to be impossible in IE6 as described earlier, so the other option was to add a simple submit() function to a button.

That could have worked, but since many form elements already use the name="submit" attribute, it will effectively disable the integrated submit() function in javascript. Not even a $('form *[name=submit]').attr('name','_submit') would work, since IE maps the form before DOM ready. So no go there.

The result

In the end, I came up with a cross-browser alternative that works pretty good, even if the modal window can’t submit the form. The overlay and preview division is appended to the body in order to always stay on top and centered. I resorted to a simple close button, which is fine since you might want to have a last look to see if you filled in all the other required form fields. You can see it in action just here below.

When dealing with stuff like z-index, fixed positioning and modal windows, IE is a real pain. If any of you can find a cross-browser solution for submitting the form inside the modal window, you would be my hero.

Links:

]]> http://devkick.com/blog/modalpreview-preview-your-comment-in-a-modal-window/feed/ http://devkick.com/blog/modalpreview-preview-your-comment-in-a-modal-window/ Milestone 01 - 70+ High-End Components for Web Designers and Developers http://feedproxy.google.com/~r/devkick/blog/~3/XwLYbDUTJQQ/ http://devkick.com/blog/milestone-01-70-high-end-components-for-web-designers-and-developers/#comments Tue, 13 May 2008 20:52:33 +0000 admin http://devkick.com/blog/?p=18 Here at DevKick we collect high-quality components, sort them into categories and present them on the site with regular updates. But once in a while, we flag our current state and present all components since the previous milestone in a handy blog post with direct links to each component's home page, demo and downloads.

]]> Here at DevKick we collect high-quality components, sort them into categories and present them on the site with regular updates. But once in a while, we flag our current state and present all components since the previous milestone in a handy blog post with direct links to each component’s home page, demo and downloads.

So here is Milestone 01 - a handy collection of hand-picked, quality components sorted in framework/programming categories with the most popular component presented first in each category. Note that these components have been selected and tested during the last three months times to make sure each meets a certain quality criteria. Enjoy!

Tables

Flexigrid image

Flexigrid / jQuery

Flexigrid is a lightweight but rich data grid written in jQuery with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

Read more | Demo | Download

TableHover image

TableHover / jQuery

TableHover is a jQuery plugin to highlight table rows and columns when hovering over them.

Read more | Demo | Download

Tablesorter image

Tablesorter / jQuery

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

Read more | Demo | Download

TableKit image

TableKit / Prototype

TableKit is a collection of HTML table enhancements using the Prototype framework that implements row striping, column sorting, column resizing and cell editing using Ajax.

Read more | Demo | Download

Calendars

Calendar image

Calendar / Mootools

Calendar is a MooTools Javascript class that adds accessible and unobtrusive date-pickers to your form elements.

Read more | Demo | Download

Menus

Kwicks for jQuery image

Kwicks for jQuery / jQuery

Kwicks for jQuery is a plugin that simulates the insatiably attractive Mootools effect of the same name.

Read more | Demo | Download

Sliding Dropdown Menu image

Sliding Dropdown Menu / Javascript

This lightweight drop down menu script allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc.

Read more | Demo | Download

Horizontal Image Menu image

Horizontal Image Menu / Mootools

Phatfusion image menu is a horizontal image menu that reveals more of the image as you rollover it.

Read more | Demo | Download

ddMenu image

ddMenu / Mootools

ddMenu is a simple MooTools-based script to create your own context menus using right-click.

Read more | Demo | Download

Accordion image

Accordion / Prototype

Accordion is a well-written accordion script using prototype and scriptaculous.

Read more | Demo | Download

Superfish image

Superfish / jQuery

An enhanced Suckerfish-style menu plugin for jQuery.

Read more | Demo | Download

Digg-like Navigation Bar image

Digg-like Navigation Bar / CSS

This component demonstrates how to design a digg-like navigation bar using a liquid design with rounded corners for links.

Read more | Demo | Download

List Expander image

List Expander / Javascript

Listexpander can be used for any type of content that needs to be organized in some sort of hierarchy and presented as an expandable list.

Read more | Demo | Download

TreeView image

TreeView / jQuery

Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements.

Read more | Demo | Download

Popups

FancyBox image

FancyBox / jQuery

Inspired by many other lightbox-like tools, FancyBox is a image zooming script written in jQuery for those who want something fresh.

Read more | Demo | Download

JavaScript Dialog Boxes image

JavaScript Dialog Boxes / Javascript

Here is a small, lightweight, framework independent and ready-to-use JavaScript dialog box library that offers four dialog styles: alerts, warnings, prompts and success.

Read more | Demo | Download

Window.Growl image

Window.Growl / Mootools

Window.Growl is a simple but handy MooTools component for creating translucent messages that are displayed over the contents of your screen.

Read more | Demo | Download

TJPzoom image

TJPzoom / Javascript

TJPzoom is an image magnifier written in javascript. If you move your mouse over the picture, you can see a little zoom window with a magnified version of a part of the picture in it.

Read more | Demo | Download

Facebox image

Facebox / jQuery

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

Read more | Demo | Download

Shadowbox image

Shadowbox / Javascript

Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating away from the linking page.

Read more | Demo | Download

jqalert image

jqalert / jQuery

jqalert is a Javascript library that uses jQuery to create a compelling alternative to window.alert().

Read more | Demo | Download

Modalbox image

Modalbox / Prototype

ModalBox is a JavaScript technique for creating modern modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads.

Read more | Demo | Download

Lightview image

Lightview / Prototype

Lightview was built to change the way you overlay content on a website.

Read more | Demo | Download

photoViewer image

photoViewer / YUI

photoViewer is an updated and upgraded version of a YUI Lightbox. This version offers a more robust API, better performance, greater stability and compatibility.

Read more | Demo | Download

Tooltips

MooFilm image

MooFilm / Mootools

MooFilm is a a tooltip fader for images.

Read more | Demo | Download

Prototip image

Prototip / Prototype

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.

Read more | Demo | Download

Uploaders

FancyUpload image

FancyUpload / Mootools

Swf meets Ajax for beautiful uploads. FancyUpload is a MooTools upload widget thats allows queued multiple-file upload including progress bars.

Read more | Demo | Download

Asynchronous File Upload image

Asynchronous File Upload / YUI

While many people are familiar with YUI Connection Manager’s Ajax capability, only a few know that Connection Manager can be used to simulate Ajax-like file upload.

Read more | Demo | Download

Charts

amCharts Pie & Donut image

amCharts Pie & Donut / Actionscript

Pie & Donut is a very universal and fully configurable Flash chart. Using it, you can easily have good-looking, animated pies or donuts on your website. You can also use it for creating elaborate navigation menus.

Read more | Demo | Download

MooWheel image

MooWheel / Mootools

MooWheel is a javascript connections visualization library written in MooTools.

Read more | Demo | Download

GoogChart image

GoogChart / PHP

GoogChart is an easier way to create charts out of data using the Google Charts API and PHP.

Read more | Demo | Download

fgCharting image

fgCharting / jQuery

fgCharting is a jQuery script for visualizing HTML table data with the canvas element.

Read more | Demo | Download

TableToChart image

TableToChart / Mootools

TableToChart is a MooTools script that can take a HTML table source and automatically draw a graphic chart based on the table data.

Read more | Demo | Download

Flot image

Flot / jQuery

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

Read more | Demo | Download

Ajax

History image

History / jQuery

This useful jQuery plugin helps you make your Ajax-driven page available for “Go Back” button and “bookmark” of browser.

Read more | Demo | Download

Drag and drop

EasyDrag image

EasyDrag / jQuery

EasyDrag is a jQuery plugin that adds the ability to drag and drop almost any DOM element without much effort.

Read more | Demo | Download

Drag. Drop Lock. image

Drag. Drop Lock. / Mootools

Drag Drop Lock is a MooTools example on how to create a user interface where you can drag a box and drop+lock it inside another box.

Read more | Demo | Download

User Interface

Mocha UI image

Mocha UI / Mootools

Mocha is a web applications user interface library built on the Mootools javascript framework.

Read more | Demo | Download

Tags

Tag Suggest image

Tag Suggest / jQuery

If you’re familiar with del.icio.us you will be familiar with the tag suggesting as-you-type support.

Read more | Demo | Download

Ratings

Starbox image

Starbox / Prototype

Starbox as a prototype component that allows you to easily create all kinds of rating boxes using just one PNG image.

Read more | Demo | Download

Forms

MarkItUp! image

MarkItUp! / jQuery

MarkItUp! is a JavaScript plugin built on the jQuery library that allows you to turn any textarea into a markup editor.

Read more | Demo | Download

Auto-Growing Textarea image

Auto-Growing Textarea / jQuery

This plugin was inspired by Facebook’s auto-expanding text areas and makes it easy to have auto-growing textareas.

Read more | Demo | Download

Securimage PHP Captcha image

Securimage PHP Captcha / PHP

Securimage is an open-source free PHP Captcha script for generating complex images and captcha codes to protect forms from spam and abuse.

Read more | Demo | Download

TextboxList image

TextboxList / Mootools

TextboxList is a MooTools component that can create an input field that resembles the famous Apple Mail to: textfield as seen on Facebook.

Read more | Demo | Download

Styling File Inputs image

Styling File Inputs / CSS

File inputs are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire.

Read more | Demo | Download

jQuery Validation image

jQuery Validation / jQuery

The ultimate goal of this plugin is to make working with forms more fun for anyone. By improving the interaction, it is easier and less annoying for the user to fill out the form and submit it.

Read more | Demo | Download

Easy Field Validation image

Easy Field Validation / Prototype

The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.

Read more | Demo | Download

Password Strength Meter image

Password Strength Meter / Javascript

Password Strength Meter is a javascript designed to assess the strength of password strings.

Read more | Demo | Download

Textarea Resizer image

Textarea Resizer / jQuery

Textarea Resizer allows the user to extend the textarea element/area within the web page whenever they feel.

Read more | Demo | Download

PasswordMeter image

PasswordMeter / Ext

A password field with strength meter using ext forms.

Read more | Demo | Download

Flash TA image

Flash TA / Actionscript

FlashTA is a WYSIWYG replacement text area for HTML forms using flash.

Read more | Demo | Download

Effects

Reflection.js image

Reflection.js / Javascript

Reflection.js uses unobtrusive javascript to add reflections to images on your webpages.

Read more | Demo | Download

Cornerz image

Cornerz / jQuery

Cornerz is a bullet proof corners plugin for jQuery using Canvas/VML.

Read more | Demo | Download

ColorBlend image

ColorBlend / jQuery

ColorBlend is a robust jQuery plugin that can fade objects from one color to another.

Read more | Demo | Download

Speech Bubbles image

Speech Bubbles / CSS

Speech Bubbles is a CSS technique to create dynamic speech bubbles using CSS. Works great for blog comments.

Read more | Demo | Download

Asciify image

Asciify / Actionscript

Asciify is an actionscript class to render ascii art from pictures using AS3 in real time.

Read more | Demo | Download

TweenLite image

TweenLite / Actionscript

A Lightweight and fast Tweening Engine written in actionscript.

Read more | Demo | Download

Flipv image

Flipv / jQuery

Flipv is a jQuery script that lets us display vertical text in an accessible way.

Read more | Demo | Download

Color Pickers

mooRainbow image

mooRainbow / Mootools

mooRainbow is a Javascript color picker written in MooTools that allows you to visually choose and use colors from a HSL spectra.

Read more | Demo | Download

ColorPicker image

ColorPicker / Prototype

This prototype color picker mimics Photoshop color picker by layering transparent images.

Read more | Demo | Download

Utilities

jQuery File Tree image

jQuery File Tree / jQuery

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

Read more | Demo | Download

Feedwriter image

Feedwriter / PHP

Feedwriter is a universal feed generator written in PHP that supports RSS 1.0, RSS 2.0 and ATOM.

Read more | Demo | Download

PHP Mailer image

PHP Mailer / PHP

PHP Mailer is a PHP email transport class featuring file attachments, SMTP servers, CCs, BCCs, HTML messages, word wrap, and more.

Read more | Demo | Download

imgAreaSelect image

imgAreaSelect / jQuery

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.

Read more | Demo | Download

MooCrop image

MooCrop / Mootools

MooCrop is an Image Cropping utility using the mootools javascript framework. Alone it serves no practical purpose but used in conjuction with a server side script becomes a powerful image manipulation tool.

Read more | Demo | Download

SyntaxHighlighter image

SyntaxHighlighter / Javascript

SyntaxHighlighter is a Javascript that makes it possible for web site authors to post code snippets and have it look pretty without preprocessing on the server.

Read more | Demo | Download

EXIF Reader image

EXIF Reader / Javascript

Javascript EXIF reader is a small library capable of reading EXIF data from JPEG images.

Read more | Demo | Download

Feeds

SimplePie image

SimplePie / PHP

SimplePie is a PHP library for parsing RSS and Atom feeds.

Read more | Demo | Download

Data

Taffy DB image

Taffy DB / Javascript

Taffy DB is a free and opensource JavaScript library that acts as thin data layer inside Web 2.0 and Ajax applications.

Read more | Demo | Download

]]> http://devkick.com/blog/milestone-01-70-high-end-components-for-web-designers-and-developers/feed/ http://devkick.com/blog/milestone-01-70-high-end-components-for-web-designers-and-developers/ Tripoli Beta http://feedproxy.google.com/~r/devkick/blog/~3/v_RVfEricag/ http://devkick.com/blog/tripoli-beta/#comments Thu, 08 May 2008 18:08:04 +0000 admin http://devkick.com/blog/?p=17 Tripoli, the generic CSS standard for HTML rendering, have reached the Beta stage. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.

So, what’s new in the beta?

There are many new things in Tripoli. I have listened to the public voices from people using it in real world projects during the last 6 months and the result is even more stable, generic and dynamic. Here’s a quick run-down:

  • no more print styles
  • a brand new layout plugin
  • more ways of implementing Tripoli to simplify installation
  • hundreds of tiny corrections since the alpha
  • even less specific styles in the base component, expand tripoli as far as you need
  • the heavy IE expressions in the late alpha has been removed for better performance

Tripoli is the same as before, only much better and more dynamic. If you are using tripoli today and would like to upgrade, you should be able to do so without any major issues.

Read more and try it out in the Tripoli project page. If you are new to Tripoli, you might want to check out two earlier blog posts as the project was initiated: Introducing Tripoli and Tripoli Beta in Development

]]> http://devkick.com/blog/tripoli-beta/feed/ http://devkick.com/blog/tripoli-beta/ The Visual Active State: Popular Techniques and Examples http://feedproxy.google.com/~r/devkick/blog/~3/q7FQGGQvES4/ http://devkick.com/blog/the-visual-active-state-popular-techniques-and-examples/#comments Fri, 02 May 2008 18:34:02 +0000 admin http://devkick.com/blog/?p=16 A menu with a visual active state is a popular technique on web sites for obvious reasons. This article aim to explain how some popular techniques are used to achieve an active state, including a digestion of our latest laboratory project called :path. It will also show you some simple examples of different visual approaches, including some very popular sites that doesn't use active states at all.

]]> A menu with a visual active state is a popular technique on web sites for obvious reasons:

  1. It gives the user a clear signal of where he/she is on the site, especially for visitors coming from a search engine or deep link
  2. It can be attractive and signal a well-structured and balanced site
  3. Used carefully, it can replace the classic breadcrumb trail.

This article aim to explain how some popular techniques are used to achieve an active state, including a digestion of our latest laboratory project called :path. I will also show you some simple examples of different visual approaches, including some very popular sites that doesn’t use active states at all.

Is active states on navigation anchors crucial? Should you always use them or are there cases when it is not such a good idea? Use the comments form to discuss the topic.

Examples of active state techniques

Del.icio.us

The minimalistic del.icio.us has the most basic form of active state:

By using server-side logic, delicious removes the anchor on active menu items, producing a black non-linked text. This is the most basic form of active states, but rarely used:

<a href="/devkick">your bookmarks</a></strong> | <a href="/network/devkick">your network</a> | subscriptions | <a href="/for/devkick">links for you</a> | <a href="/post/" id="new-post">post</a>

The disadvantages:

  • Relies entirely on server side logic.
  • If your site has pages on several levels, you cannot use the main nav to go back to parent pages.

The advantages:

  • The solution works without javascript and CSS
  • Less markup.
  • If your site is only two levels deep, the main nav represent the current page and becomes un-clickable, which may be a good thing according to Nielsen.

Domänhanteraren

The swedish site for domain handling has a left-side menu with a blue active state:

If you look at the source code, you’ll see that they have gone the server-side route by adding a class="cur" to the active menu anchor:

<ul id="leftNav">
	<li><a href="/start/login">Logga in</a></li>
	<li><a href="/start/info">Begär inloggningsuppgifter</a></li>
	<li><a href="/start/create" class="cur">Skapa konto</a></li>
	<li><a href="/start/welcome">Om Domänhanteraren</a></li>
	<li><a href="/start/idn">IDN-konverterare</a></li>
</ul>

And here is the CSS that controls the active menu item:

#bodyWrap #leftWrap #leftNav li a.cur {
	background-color: #006699;
	color: #FFFFFF;
	background-image: url(../images/cur.gif);
	background-repeat: no-repeat;
}

By simply adding a “cur” class to the active anchor, you can style it like an active state using CSS. This is a solid technique, but not perfect.

The disadvantages:

  • You need extra markup in the HTML source.
  • There is a link to the current page that might confuse inexperienced visitors, especially if there is a form on the page.
  • You will depend on rather complicated server side logic to control the active state.

The advantages:

  • The solution works without javascript
  • The extra markup required is minimal

Smashing Magazine

The popular web blog Smashing Magazine has a top-menu that directs visitors to different categories of the site that has an orange active state:

Smashing uses a similar technique as above. Here is the (stripped) HTML source:

<body id="showcases">
<div id="header">
<ul>
	<li><a title="Home" href="http://www.smashingmagazine.com/" class="home">Home</a></li>
	<li><a title="Graphics" href="http://www.smashingmagazine.com/category/graphics/" class="graphics">Graphics</a></li>
	<li><a title="Showcases" href="http://www.smashingmagazine.com/category/showcase/" class="showcases">Showcases</a></li>
	<li><a title="Monday Inspiration" href="http://www.smashingmagazine.com/category/monday-inspiration/" class="monday-inspiration">Inspiration</a></li>
	<!-- [...] -->
</ul>

And the CSS:

#showcases #header ul a.showcases {
	background-color: #EB4C07;
	color: #fff;
	-moz-border-radius: 3px;
}

By adding a unique #id to each section’s <body> and a unique class name to each anchor in the nav, you can use descendant selectors in the CSS to style each active state individually. This is a common and also pretty solid technique.

The disadvantages:

  • The HTML and CSS code gets rather bloated with lots of redundant markup
  • There is a link to the current page that might confuse inexperienced visitors, especially if there is a form on the page
  • You still depend on server-side logic, even if it’s limited to only adding an id to the body tag

The advantages:

  • Server-side logic is minimal
  • Full control via CSS
  • Works without javascript

:path

:path is our own laboratory project that takes a different route. Is uses javascript & jQuery to automatically fetch “active” links and lets you style and manipulate them using jQuery and CSS.

How it works

:path loops through the selected DOM elements, finds the anchors, extracts their href attributes and begins a comparison loop that does the following:

  1. convert the href attribute into an absolute url without ending slashes, www etc.
  2. parse the absolute href url and create an array
  3. take the window.location and make it go through the same parser as the href
  4. compare the two arrays and return true if the href is within the window.location path

A simple example

If :path finds the following href attribute:

/lab/

..and the window.location returns:

http://www.devkick.com/lab/path/index.html

:path converts both URLs using it’s parser and end up with two arrays that looks something like:

["http:", "", "devkick.com", "lab"]
["http:", "", "devkick.com", "lab", "path"]

Since the first array, taken from the href, is shorter than the window array, :path will slice the window array using the same length as the href array. Then it will compare the sliced window array with the href array and if there is a match, it will return true and let the active styling begin.

So in this example, the href /lab/ will match the location http://devkick.com/lab/path/ and :path will assume that the href points to a parent or ancestor page related to the current.

This is the basic functionality of :path.

Why?

The main reason for building this selector was that it often requires quite complicated server-side logic to add “active” classes to all navigational elements. And many times I do not have control of the server-side code at all. Since styling a menu including active states shouldn’t be a server-side task, :path takes control of the active navigation elements and lets the front-end developer style it without server-side interaction.

It’s also great because you can style navigational elements on multiple levels without any server-side logic. Just include the script and decide what you want to do with the active anchors. In most cases, it’s enough with simply adding an ‘active’ class to the parent element by typing (example):

$('a:path').parent().addClass('active');

And then do something like this in the css:

#nav .active a{cursor:default;color:black}
#subnav .active a{cursor:default;color:red}

:current

But what if you want to style the links that points to the current page differently from the ones pointing ot ancestors? Well, using the same comparison technique, I created a :current selector as well, only targeting the anchors whose href points to the current page. Jacob Nielsen says that you should never have a link that points to the current page, so by following his advice we can eliminate the anchors around those links by doing something like:

$('a:current').each(function() { $(this).replaceWith($(this).text()); });

Conclusion

The disadvantages:

  • No active state for users without javascript
  • Requires jQuery and a somewhat logical URL structure

The advantages:

  • No server-side logic - full control for the designer or front-end developer
  • Can style and manipulate active states
  • Will automatically fetch active hrefs from a custom selection of elements on any level

Is :path worth using on your site? it’s up to you. I have been using similar techniques before on a few projects and I’m really pleased with taking control of the active states without asking the back-end developer a “favour”. BTW: this sie uses :path itself.

Sites with active states - a visual gallery

Here is a small inspirational collection of visual active states on web site navigation.

New York Times has a tiny tabbed-like nav with active states.

Apple has a clear and attractive active state that fits their brand.

BestWebGallery uses a negative, slick menu with a glowing active state.

I always liked K10k’s nav. It has a clear active state and some unique hover effects with a tagline.

Web Designer Wall has a different hand drawn image-based side menu with an active state that looks like if someone highlighted one of the items with a pen.

Yahoo Sports has a multiple-level menu with classic active states that form an easy-to-follow location trail.

Jaha! Design uses a rare and unique slider as main navigation, with an obvious active state.

The new Coda Coza’s photography section uses clear active states in both it’s main nav and sidebar.

Examples of sites without active states

A lot of large and popular web sites does not have an active state in the main navigation. Some of them does not even have a breadcrumb trail to follow. This makes it really hard for visitors to know where they are, especially if you are landing on a sub-page from a search engine.

Emigre font foundry is one of the sites not having an active state or even a breadcrumb navigation.

The popular weblog TechCrunch does not have active states on their main menu.

Bryan Veloso’s Avalonstar has a main nav without active states. You even have to scroll down pretty far to see where you are.

The grand daddy A List Apart does have active states in their main navigation, but not in the secondary nav on the right side. Not exactly a huge issue, but the visitor’s location would be even more clear if they did.

Facebook’s main menu does not have active states (and neither does MySpace)

]]> http://devkick.com/blog/the-visual-active-state-popular-techniques-and-examples/feed/ http://devkick.com/blog/the-visual-active-state-popular-techniques-and-examples/