Vertical Scroll Menu with jQuery Tutorial

We will achieve the following objectives:
  • Keep html as simple as possible, and let jQuery and CSS do the rest.
  • Scoll up and down according to mouse-Y axis
  • Use jQuery.color plugin to animate the background-color changes - download jQuery.color
    (Yes, you will need this to animate the background color, I thought it will do it by default, obviously it doesn't! )
Demo : http://www.queness.com/resources/html/scrollmenu/index.html

Download : http://www.queness.com/resources/archives/jquery-scrollmenu.zip

Stylish Navigation Menu With jQuery

As you may know, the first 20 seconds of a new visitor’s interaction with a website determine whether they are going to stay or leave. This means you have to follow common design practices and put everything where the user would expect it to be. A crucial part of this process is developing an easy to use navigation menu.

 In this tutorial we are going to make a stylish CSS + XHTML navigation menu with the help of the jQuery library.

Demo : http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/

Download : http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/demo.zip

10 New Free High-Quality Fonts


Piron

Piron is a highly legible typeface, very well suited to any display or text usage: Web, print (especially magazines), brochures, logos, posters, flyers, motion graphics. The font comes in two weights: regular and oblique. Designed by Alexander Nedelev and Veronika Slavova. Available for free and commercial use, and available in OpenType format.




Mr Jones Book and Mr Jones Book Italic (Registration required)
Mr Jones was originally conceived as a family for print design, consisting of a sans and a headline. The lowercase forms are wide for legibility at small sizes, while the caps are narrower to save space and keep an even balance of negative space when used in body copy. The overall widths of certain characters have been adjusted to almost extremes to keep an even balance of white space around each letter. The font works well in body copy but will need decreased tracking in larger settings. It comes with proportional, old-style and tabular figures and discretionary ligatures.




Ingleby Font
A beautiful, carefully crafted serif font, with signs of the fine antiqua tradition. Designed by David Engelby, the font comes in four weights: regular, italic, bold and bold italic.

 Ibarra Real
Ibarra Real is a public domain font of Ibero-American character. Created in 2005, Ibarra Real is an elegant design, mixing tradition and modernity; a genuine badge of the particular Spanish culture that was created by JoaquĆ­n Ibarra in 1780. Available for Windows, Mac and Linux.


Edelsans (Free for personal use only)
Edelsans was designed as a noble geometric font for the screen, with few corners and mostly rounded glyphs. The typeface is not completely finished but is free for non-commercial use.


BASE
This free font is bold and experimental. It would come handy for bold statements on t-shirts and posters. The font was designed by Fabian De Lange and is licensed under the Creative Commons Attribution Share Alike license.

St Ryde Regular (Registration required, PDF Specimen)
St Ryde is a sans-serif, very casual typeface, that works perfect in your bodycopy within the regular weights. The whole family comes in 5 weights including the matching italics, so you can choose from thin, light, regular, medium and bold. Regular is available for free download. St Ryde has a wide range of characters, including small caps, lining, proportional and tabular figures plus small caps figures, too. Designed by Sascha Timplan. Available in OpenType format.


Acid (Free for personal use only)
Acid was designed by Stephan Baum specifically to be used in logotypes and body copy. The form of glyphs is similar to the design classic B42 by Marcel Breuer (Bauhaus) and has a very geometric character. The font contains 103 glyphs, comes in six weights (regular, regular italic, medium, medium italic, bold and bold italic) and is in the process of being developed. Released under Creative Commons.

Arcus and Arcus Italic (Registration required)
Arcus is a geometrically constructed font with rounded curves. The font contains a wide range of alternative signs, small capitals, lining and old-style numerals, fractions, superiors, inferiors, ligatures and discretionary ligatures; all this is within the frame of OpenType functions. The type family was designed for headlines, logotypes and corporate identities, and it is not a good fit for long text. Available for free and commercial use.


akaDora (For personal use only)
akaDora is a fairly simple script font with wide character support. Designed by James Daniel Milligan.

iPhone Contacts App with CSS and jQuery

Remember that I created "the iPhone unlock screen" and "the iPhone springboard" in xHTML, CSS and jQuery? Today, I'm bringing you another chapter of transferring some of the beautiful iPhone layouts to the webbrowser.

The design of the Contacts app will be used and displayed in your browser. Funny fact is that this is the first "iPhone to CSS/jQuery conversion" that I created (before the unlock and springboard screen). I'll try to give you the real iPhone feeling with these tutorials.

Demo : http://demo.marcofolio.net/iphone_contact/

Download : http://www.marcofolio.net/downloads/webdesign/iphone_contacts_app/download.html

For More Models:

http://devgrow.com/slidernav/

http://www.ihwy.com/labs/jquery-listnav-plugin.aspx

http://www.blueshoes.org/en/get/download/

jQuery UI Autocomplete Widget with PHP and MySQL

The jQuery UI folks have released an autocomplete widget  that is pretty slick. This example uses the json_encode function in PHP 5. If you have an earlier version of PHP, you will have to roll your own JSON string.

This example will use US states and territories to populate the autocomplete. It will also demonstrate how to fill other fields with data returned from the database. This data can be used to fill a visible text box or a hidden form field. It also demonstrates the basic autocomplete functionality which may be fine for some applications.

Of course, you will need the jQuery core file, the jQuery UI core file, and the jQuery UI style sheet of choice. The style sheet comes from the themes available in the jQuery UI website and can be downloaded with the core file:

Demo : http://www.jensbits.com/demos/autocomplete/
Download : http://www.jensbits.com/media/code/autocomplete_PHP_jensbits.zip

jQuery iPod-style Drilldown Menu


We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It's especially helpful when organizing large data structures that don't translate well into  traditional dropdown or fly-out menus.

This drilldown menu provides easy navigation of complex nested structures with any number of  levels. The entire menu sits within a fixed-size area, and when a node is selected, breadcrumb links appear above the menu options to both deliver feedback and allow quick access back to nodes higher up in the hierarchy.

A lateral iPod-style slide transition reinforces the notion that you're moving forward into more  granular data, or backward into higher-level data. This menu is specifically useful in traversing deeply nested hierarchies, particularly those more than three levels deep. It also provides a more  usable alternative to multi-level fly-out menus, which can present challenges to those with limited manual dexterity.

Demo : http://www.filamentgroup.com/examples/menusHierarchical/

Double Side Scroll News


Text and Image Crawler is a highly configurable, continuous scrolling marquee for the showcasing of rich HTML. The Crawler can go left or right, contain text, images or both. It is a continuous marquee in that there exists no blank gaps in between passes. Instead of automatically scrolling, it can optionally be mouse driven, so the location of the mouse cursor dictates which direction for the Crawler to go and at what speed.

The contents for the Crawler is simply defined as normal HTML on the page, encased in a DIV element with a unique ID attribute. OO code allows as many marquees on the page as one wants. It doesn't get easier than that! And with no onload event, it plays well with many other scripts.


Demo : http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm