Archive for 'March, 2010'

Accordion is a UI pattern made up of a series of containers for your content, all of which are closed when the new panel opens and reveals itself. Chris Coyier came up with Grid Accordion (powered by jQuery and CSS). It works with the same theory as most other accordions. Only one cell is opened at a time. The big thing is that the column of the current open cell expands to a reasonable reading width. The effect is really awesome as it offers you a handy alternative to classical accordions, by adding all the data you need in a single table.

One way to look at an accordion is like a collapsed single column of a table. I was recently building a page for a client site, where the information that they provided really made sense to present as a table. But it was too much information to view all at once. I thought it would have been overwhelming visually. I also thought that it was most likely that people visiting this page would know what they needed right away, so having them click once to get it seemed pretty reasonable. So, a table of accordions!

jConfirmAction is a jQuery plugin that aims to replace those boring default confirmation boxes with cute ones. This plugin generates a flying bubble confirmation box upside your action link. basically, jConfirmAction creates a DIV element that contains confirmation box after you clicked on the element (either link or button), then it will appear with fading in and disappear with fading out. The confirmation box’s style can be customized via CSS.

jConfirmAction has three arguments that aims to customize language for the confirmation box:

  • question : A text for your question (default : Are You Sure?).
  • yesAnswer : A text for Yes answer (default : Yes).
  • cancelAnswer : a text for Cancel/No answer (default : No).

jsPlumb is a jQuery plugin that provides a way to “plumb” elements of a UI together. It is much the same way you may have seen on Yahoo Pipes. It uses Canvas in modern browsers and Google’s ExplorerCanvas script for stone-age browsers.

The plugin relies on jQuery 1.3.x or jQuery 1.4.x (tested on 1.3.2 and 1.4.2), and also jQuery UI 1.7.2 (if you want to support dragging). Full transparent support for jQuery dragging is included, the API is super simple, and the compressed version of the script is just 11K.

Nivo Slider is a simple and lightweight (weights only 5kb packed) JQuery Image Slider Plugin that supports up to 9 unique transition effects: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random. You can add your own custom style to the slider including: next/prev arrows, nav bullets, stylesheet. The slider is available for download in 2 versions: Production (5kb Packed) and Development (10kb Uncompressed).

Features include:

  • 9 unique transition effects
  • Simple clean & valid markup
  • Loads of settings to tweak
  • Built in directional and control navigation

How to call the plugin?

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random',
        slices: 15,
        animSpeed: 500,
        pauseTime: 3000,
        directionNav: true, // Next & Prev
        directionNavHide: true, // Only show on hover
        controlNav: true, // 1,2,3...
        beforeChange: function(){},
        afterChange: function(){}
    });
});
</script>

The jQuery plugin is free of charge while the WordPress plugin starts from $19.

20 Free Fonts Ideal for Creative Logo Design

Posted on March 16, 2010, Filled under Design, Freebies,  Bookmark it

Everyone who does logo design knows how hard it is to find the right font. Mainly if you have 100s or 1000s of fonts in your library it may take hours to find the ONE – speaking from my own experience. After certain time period I figured there are fonts I was using over and over. Seems they were perfect for logo design. Because of that, I put together a collection of 20 from my point of view ideal free fonts for our purpose. I am not saying they will be perfect for each single logo, but I am sure they will save you plenty of time :). Download and enjoy!

1. Wanda Bold

Created: 2007-12-15; Revision: 1; Glyph count: 252; Units per Em: 1000; Embedding rights: Embedding for preview & printing allowed

2. LLCooper

Created: 2009-10-22; Revision: 1; Glyph count: 180; Units per Em: 2047; Embedding rights: Embedding for permanent installation

View more awesome fonts!

EZ-CSS is a light (1kb), flexible, browser-friendly and easy to use CSS Framework. It works by forcing the final element in the HTML flow to become a block formatting context. EZ-CSS is an easy 4-step process: Insert, Copy, Paste, Edit. This framework lets you create multiple columns of any width, with or without gutters of any width. The small stylesheet can be integrated into any existing style sheet (or in a style element) which makes this solution “framework agnostic”.

EZ-CSS relies on very light HTML markup and CSS rules, but its developers pushed the envelope even further for those who need fast results without increasing the risk of breakage. Their “Quick & Dirty” solution is less semantic than the regular method, but it relies on fewer hooks in the markup, fewer rules in the style sheet and at the same time creates a width-less block formatting context without the caveats that come with using DIVs.

Gesturecons is sharing a set of high-resolution multi-touch vector icons created to aid in the design, development, implementation and promotion of multi-touch interfaces. You can use these icons in the creation of wire-frame documents, digital help files and printed documentation. You can also use Gesturecons inside of your applications in order to demonstrate to users how to complete actions or prompt them to interact with an application when they approach it.

Swap out symbols to create your own icons, because these are scalable vector shapes, you can scale them to any size and alter them in any way you wish. Use your favorite vector graphics application to edit.

There are 2 sets available: a main set and a mobile set.

Famspam is sharing Facebox, a Facebook-style Lightbox useful to display images, DIVs, or entire remote pages using AJAX. The download package comes with the JavaScript and CSS files, a loading image, a close label, four corners, and solid border images.

Implementation Example

1) Load Dependencies – First, you need to load jQuery before Facebox.

<script src="jquery.js" type="text/javascript"></script>
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox.js" type="text/javascript"></script>

Read more from this entry…

jQuery Blinds is a simple, effective, and customizable slideshow plugin shared by Little Web Things. It is very easy to install. You just have to put the list (UL) with the images (each LI containg the IMG tag with the right SRC attribute) inside a main class (.slideshow) then call the plugin:

HTML Code

<div class="slideshow">
   <ul>
      <li><img src="lemons/1.jpg" alt="lemon" /></li>
      <li><img src="lemons/2.jpg" alt="lemon tea" /></li>
      <li><img src="lemons/3.jpg" alt="splashing lemon" /></li>
      <li><img src="lemons/4.jpg" alt="salad with lemon" /></li>
      <li><img src="lemons/5.jpg" alt="lemonade!" /></li>
      <li><img src="lemons/6.jpg" alt="sliced lemon" /></li>
      <li><img src="lemons/7.jpg" alt="dripping lemon" /></li>
   </ul>
</div>

Read more from this entry…