Listelog » CSS

23 Resources for Clean and Compressed CSS

uralozden — Thu, 29 Oct 2009 06:34:28 +0000

There are a number of free online tools that can help you to create and maintain effective CSS coding. These tools include validators, optimizers, compressors and more. Try out a few of these tools and see how they can help you to keep more efficient style sheets.

CSS TIDY

CSS Tidy is an open source CSS parser and optimizer from SourceForge. It is available as an executable file, and there is also an online version. CSS Tidy is often able to achieve a compression ration of 30% or more. In addition to compression, CSS Tidy can also format CSS code for higher browser compatibility.

CLEAN CSS

Clean CSS is another simple online tool that gives you a few options for formatting and optimizing CSS. Clean CSS gives you easy control over how much you want it to do. It is also available in German and French.

CSSCHECK

Insert the URL of your style sheet and CSSCheck will quickly run a report that gives you some feedback on the code. It will give warnings for items that may cause problems.

CSS ANALYZER

The CSS Analyzer from Juicy Studio allows you to validate your CSS code, and it also tests the color contrasts and the units of measurement. Just enter the URL of your style sheet and it will produce the report.

CSS OPTIMIZER

CSS Optimizer is another tool for reducing the file size of style sheets. Unlike some of the other tools, it offers the option to upload a file from your computer in addition to the option of entering a URL.

FLUMPCAKES CSS OPTIMIZER

The CSS Optimizer from Flumpcakes gives you several options and provides the save features as many of the other optimizers on this list.

CSS DRIVE CSS COMPRESSOR

CSS Drive provides a CSS Compressor with options for “Light”, “Normal”, or “Super Compact.” You simply paste your code into the page and it does the work.

CSS SUPERDOUCHE

CSS Superdouche offers less features and options than some of the other tools, but it still functions essentially the same. It works to reduce the size and complexity of the file by eliminating unnecessary elements and organizing the file.

ROBSON CSS COMPRESSOR

Another option for compressing your CSS files, the Robson CSS Compressor offers many of the same features as the other choices listed here, but it is still in development, so “it may not work correctly.”

W3C CSS VALIDATOR

The W3C offers a validator for CSS files. Simply enter the URL and see how your style sheet does.

Other Choices:

Bookmark It

111 CSS Gallery To Submit Your Design

uralozden — Mon, 26 Oct 2009 02:36:20 +0000

CSS Galleries are places where we can submit our web design and let others vote/rate about it. They are places where we can get inspiration too.

Today, we are going to share about 110+ CSS Galleries that you may want to look into when submitting your design or when you want to get some inspirations for your project. The list is too long to fit into 1 post, so i am going to divide it into 2 posts.

56. CSSRank

57. CSSReboot

58. CSS Showcase

59. CSS Showcases Gallery

60. CSS Snap

61. CSS Star

62. CSS Vault

63. Design Bombs

64. CSS Wrap

65. CSS Artillery

66. CSSBloom

67. CSSclip

68. CSS Elite

69. CSS Exchange

70. CSS Glance

71. CSS Moon

72. CSS Remix

73. CSS Season

74. CSS Tux

75. Design Grabs

76. DesignFlavr

77. Design Snack

78. Design Snips

79. Designer Source

80. Dezinspiration

81. Folio Stars

82. Free CSS.com

83. CSS Cookie

84. Selected Webdesign

85. Hot Webber

86. Inspiration Up

87. Inspiration King

88. jQuery Style

89. Lookom

90. Minimalsites

91. Most Inspired

92. 3W CSS Website

93. One Page Love

94. Oriental Gallery

95. Posh’d

96. RGB Garden

97. Screenalicious

98. Submit CSS

99. The Best Designs

100. Themes-CSS

101. Dot Design

102. Unique CSS

103. Web Creme

104. Design Creme

105. Unmatched Style

106. WebDesignire

107. Dark-i

108. Website-Gallery

109. WeLoveWP

110. WPLuxe

111. Your Site Is Valid

Bookmark It

20+ Awesome Resources To Learn and Improve CSS

emincan — Thu, 15 Oct 2009 18:11:53 +0000

(Post by Mag-Net) Here I tried to classify tips, tricks and tutorials for beginners, intermediate developers and advanced ones. If you want to learn Css shortly, just follow these collection. I think you learn Css quickly. I hope you like these.

If you have other resources, please post or comment.

For Beginners

1-Learn HTML and CSS: An Absolute Beginner’s Guide

So, you’re ready to take the plunge and begin to learn how to build your own web pages and sites? Fantastic! We’ve got quite a ride ahead, so I hope you’re feeling adventurous.

2- How To Build A Css Website

CSS, treated as a separate layer, is very beneficial as it simplifies updating or changing page styles and it reduces page load times since the browser can employ styles before it is fully rendered.

3- W3C CSS Tutorial

Save a lot of work with CSS! In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.

4 – Getting Started with CSS: A Practical Exercise

Learning how to write CSS is an essential lesson in any web design classroom. For you who are just starting out, here’s a beginner’s guide to help you learn the basics in proper CSS execution.

5- Resetting Your Styles With CSS Reset

It’s essential to use a reset stylesheet to reset your browsers default styles.

6- 10 essential tips to get started with CSS

Here I am going to discuss about some useful basic CSS tips for beginners.Now a beginner who is going to design web interface found it easy to deal with CSS.It can be extract independently and provides flexibility to designer.

7- CSS tips that every beginning developer should know about

Are you a beginning developer? More specifically, are you a beginning developer working with CSS? Then we have a list of tips, terms, and even one or two sites that you should know about. Not implying that you don’t. Well, perhaps we did a little bit, but we really meant nothing by it. It’s not like we are saying that you are deficient or something. It’s nothing personal. We just thought we would try and be helpful.

For Intermediates

1- 15+ CSS Tips and Tricks

CSS (Cascading Style Sheet) is not very difficult to learn. The hardest thing is to ensure the CSS layout being displayed identically among different browsers. Even though CSS3 will be released soon, but I believe it will take quite a long time for all the browsers to start supporting it, especially all the old browsers like Internet Explorer 6 *AHEM*.

2- 20+ Best Tutorials to Convert Psd to Html/CSS

You’ve designed your site but you’re having a little trouble turning your design PSD into a coded layout. Here i’ve listed 20+ Best Tutorials to convert Psd to Html/CSS.These tutorial should help you learn how to find the best way to code it.

3- 10 CSS Tips Every Web Developer Should Know

I’ve written a fair few articles over the past year and thought it might be useful for any new subscribers and visitors to see a summary of the most useful ones. Below is a list of hints and tips which will be useful to anyone starting out in CSS and even the most seasoned professional in the industry may find a couple of things useful.

4- Learn CSS Positioning in Ten Steps

THIS TUTORIAL IS HIGHLY ADVISED IF YOU HAVE PROBLEMS WITH CSS POSITIONING. This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float.

5- CSS Shorthand Guide

There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together shall we? Ok. Straight to the business. Anytime I’ve ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you’re supposed to be set on your way

For Experts

1- Using Css Sprites

Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game.

2- 10 Fixes That Solve IE6 Problems

We know IE is likely to be around for some time, but can we still support the browser and avoid hacks and conditional CSS? Here are 10 fixes to solve the majority of IE6 problems with valid HTML and CSS code…

3- 15 CSS Tricks That Must Be Learned

As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals.

4- 10 Challenging But Awesome CSS Techniques

Most designers and web developers only scratch the surface of the potent language that is CSS. In terms of programming languages, CSS has a fairly simple learning curve. That doesn’t mean that CSS isn’t a powerful language. Sometimes it’s the small things that make a huge difference in a website design.

5- Solving 5 Common CSS Headaches

CSS is a relatively simple language to learn. Mastering it, on the other, can prove a little more difficult. Compensating for various browser inconsistencies alone can produce a migraine. In this article, we’ll demystify five of the most head thumping issues that you’ll encounter when building web applications.

6- CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer

While I strongly advise using hacks at a minimum especially when it comes to CSS there is a time and a place for them, especially when you need a quick way to target a browser other than Internet Explorer.

7- 23 excellent CSS Button Styling Tutorials

Button is an esential part on web design, especialy if we have a deal with form. Styling the button is important stuff for better user experience. In this post, i will share with you 23 excellent CSS Button Styling Tutorials with demo page on each tutorials.

8- 10 astonishing CSS hacks and techniques

Well, I guess that almost all of you knows CSS and what it can do for you. But some astonishing techniques still remains obscure for a lot of developers. In this article, let’s see 10 cross browser css techniques to definitely enhance your designs.

And do not forget

9 Top CSS Essential Skills That Every Web designer Should Learn

emincan — Fri, 02 Oct 2009 18:32:04 +0000

This post is dedicated to elementary & intermediate CSS learners. If you’re going to learn CSS from scratch, you’ve probably seen a lot of techniques, tricks & tutorials so far. In this post I’ve written my own approach to the most essential CSS skills that every web designer should learn. I really love the articles below and liked to share them with you. Hope you enjoy it!

1- Making CSS Layouts

2- Styling & Using Lists

3- Understanding Box Model & Positioning

4- Better CSS Typography

5- Styling Forms

6- Using CSS Frameworks

7- Optimizing & Best Practices

8- CSS Hacks & Tricks

9- CSS Buttons, Boxes & Round Corners

Bookmark It

Best Collection Of Free CSS Templates

emincan — Fri, 18 Sep 2009 19:27:35 +0000

If you want to find cross browser css templates, this collection is for you. Here we go:

1. Free CSS Templates.org

2. Styleshout.com

3. Free-Css-Templates.com

4. Free Css.com

5. Css Templates.net

6. Arcsin Web Templates

7. Template Mo

8. Nice And Free Css Templates

9. Css Template Heaven

I think these are not enough :)

11. CSS Creme CSS Templates

12. Free CSS Templates

13. Free CSS Templates By CMG Technologies

14. Free CSS Templates at Get CSS Templates

15. Rambling Soul Free CSS Templates

16. Open Source Templates

17. Template Eyes CSS Templates

18. CSS Templates Free.net

19. Template World Free CSS Templates

20. CSS Templates Web Free CSS Templates

Bookmark It

21+ Best Tutorials to Convert Psd to Html/CSS

Mao-tun — Tue, 15 Sep 2009 19:53:52 +0000

You’ve designed your site but you’re having a little trouble turning your design PSD into a coded layout. Here i’ve listed 21+ Best Tutorials to convert Psd to Html/CSS.These tutorial should help you learn how to find the best way to code it.

1. The Design Lab: PSD Conversion

2. From PSD to HTML, Building a Set of Website Designs Step by Step

3. Coding: Design Lab TV Styled Layout

4. PSD to CSS/HTML in Easy Steps – Part 1

5. Slice and Dice that PSD

6. Converting a Photoshop Mockup: Part Two, Episode One

7. Build a Sleek Portfolio Site from Scratch

8. Portfolio Layout – Learn To Code It

9. Converting a Design From PSD to HTML

10. How to Convert a PSD to XHTML

11. How to Convert PSd to Html

12. Creating a CSS Layout from scratch

13. PSD > HTML/CSS

14. Encoding a Photoshop Mockup into XHTML & CSS

15. Css Template Tutorial

16. Portfolio Layout 4: The Code

17. Tutorial Coding a Layout

18. Converting a Photoshop Mockup

19. Killer site – From Illustrator to Xhtm to Drubal

20. From PSD to HTML

21. Coding a Car Sales Layout

Bookmark It

Dynamic Text Replacement Solutions

Mao-tun — Sun, 13 Sep 2009 22:26:39 +0000

Typography plays a very important role in Web
Design. Current Web Design trends involves variety of fonts to
ensure a good user experience. Obviously these are
not-standard system fonts in many cases…

Well, Image
Replacement has always been a good solution but not for a site
with with too many elements or even sites with dynamic content.

Here we have put together a clean list of popular Dynamic
Image Replacement solutions that will help you solve various
font related issues.

1. sIFR 2.0

sIFR is meant to replace
short passages of plain browser text with text rendered in your
typeface of choice, regardless of whether or not your users have
that font installed on their systems. It accomplishes this by
using a combination of javascript, CSS, and Flash.

2. cufón

Cufón aims to become a
worthy alternative to sIFR, which despite its merits still
remains painfully tricky to set up and use. Cufón consists of
two individual parts – a font generator, which converts fonts to
a proprietary format and a rendering engine written in
JavaScript.

3. P+C DTR

P+C DTR allows you to take a
vanilla standards-based (X)HTML web page and dynamically create
images to replace and enhance page headings using only PHP +
CSS.

4.
FLIR

FLIR dynamically generates
image representations of text on your web page in fonts that
otherwise might not be visible to your visitors. The generated
image will be automatically inserted into your web page via
Javascript and visible to all modern browsers.

5. SIIR

The SIIR program serves to
basically change dynamic text on your website into pretty
generated images with any font of your liking.

6. DTR

A pretty old JavaScript and
PHP technique by Stewart on A List Apart.

7.
sIFR 3

sIFR lets you use your
favorite font on your websites by cleverly working with Flash,
JavaScript and CSS.

8. Typeface.js

Instead of creating images
or using flash just to show your site’s graphic text in the font
you want, you can use typeface.js and write in plain HTML and
CSS, just as if your visitors had the font installed locally.

9. IFR

By using a dynamic Flash
movie, some slick JavaScript and well-structured mark-up the
same consistent branding can be achieved while greatly reducing
production time and preserving the cleanliness of the mark-up.

10. PHP+CSS DTR

PHP+CSS Dynamic Text
Replacement is a JavaScript-free version of the Dynamic Text
Replacement method originally created by Stewart Rosenberger.
This is the P+C DTR version with word-wrapping and the ability
to use inner tags.

CSS Image Replacement [static]

Just thought we could
include this nice article by Chris Coyier explaining 9 different
CSS Image Replacement Techniques. These techniques are the best
if you just have very few elements to be replaced.

swfir

Using the dark arts of
JavaScript and Flash, swfIR gives you the ability to apply an
assortment of visual effects to any or all images on your
website. This is again not for fonts but is another dynamic
image enhancing solution…

Bookmark It

50+ jQuery Plugins for Form Enhancements for ECS

Mao-tun — Fri, 11 Sep 2009 20:26:30 +0000

Easy user interaction and data collection is really a key functionality on most websites and web applications. Providing users high quality and intuitive input forms may be just what is needed to make your users take the time to fill in and submit the information you’re trying to collect. In this article I have collected a number of really essential jQuery Form Enhancements. A few cheat sheets have been added as well.

Cheat Sheets

jQuery Cheat sheets are always nice to have
oscarotero jquery 1.3 (as wallpaper)

colorcharge jQuery 1.2
jQuery 1.3 Cheat Sheet

Quick reference to all jQuery 1.3 functions and properties. Note that it doesn’t cover any of the UI functionality as this could easily be a whole cheat sheet in and of itself.

jQuery Cheat Sheet 1.2

Form Element Enhancements

File Style Plugin for jQuery

File Style plugin enables you to use image as browse button. You can also style filename field as normal textfield using css.

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

jQuery jNice

jquery.Combobox

An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

Geogoer VChecks

Avery user friendly way to show checkboxes.

Styling input file

Make image buttons a part of input fields

If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

Emblematiq Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

jqTransform

This plugin is a jQuery styling plugin wich allows you to skin form elements.

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

Password Strength Indicator

Password Strength Indicator does what it says on the tin, however my preference would be to have the colors swapped round red for bad, green for good

jQuery Password Strength Meter

Password Strength Meter is a jQuery plug-in that provides a smart algorithm that shows the strength of the input.

Password Indicator

This is example is a merging of Benjamin Sterling’s Password Strength Indicator and Microsoft Passport’s Password Strength CSS.

Demo

Ajax Username Checker

It’ll validate against your username records so that a user can choose a unique name straight away.

jQuery Checkbox

Provides for the styling of checkboxes that degrades nicely when javascript is dsiabled.

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

Simple Image Submit Button Rollovers with jQuery

Have you ever wanted a simple rollover technique with a form submission button? Something like this:

… without having to resort to a complicated mess of javascript form submission and cross browser compatibility issues? With jQuery it’s really easy

Table Row Checkbox Toggle

It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, there is an initialization step in the script that correctly marks a row when it’s considered checked on page load.

Form Masking with jQuery

Meio Mask

meioMask is a simple use plugin for creating and applying masks at text input fields.

Masked Input Plugin for jQuery

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user. The following mask definitions are predefined:

a – Represents an alpha character (A-Z,a-z)
9 – Represents a numeric character (0-9)
* – Represents an alphanumeric character (A-Z,a-z,0-9)

Form Tool tips

The jQuery Tooltip

jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It’s nothing that fancy, really, just your normal everyday over hyped AJAX/AXAH type stuff. In keeping with all of this web 2.0 silliness, this means all of the tips are external. This is a handy feature depending upon the type of usage a person might intend for jTip.

Form Element Manipulation

jQuery Field Plug-in

This plugin greatly expands the ability to retrieve and set values in forms beyond jQuery’s standard val() method (and Mike Alsup’s Form Plug-in’s fieldArray() method) by allowing you to interact with all types of form field elements (except input[type="file"], which is a read-only element.) It works the same way for text elements as it does for radio, checkbox and select elements.

Using form labels as text field values

New jQuery plugin targeting usability for password masking on forms

ToggleVal

ToggleVal gives you the option to populate the default text of form fields (in a few different ways), and will then toggle the default value when the field receives and loses keyboard focus.

jQuery magicpreview plug-in

magicpreview automatically updates selected elements on a page based on form fields. Perfect for previewing forms.

jQuery autosave plug-in

Autosave is designed to save the progress of forms by saving the fields to cookies so you won’t lose anything should anything go wrong

The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.

Form techniques

jQuery Sliding Contact Form

A sliding contact form built with jQuery. Form is normally hidden at the top & slides down with the first click & up at the 2nd click.There is no form validation & mail sending code included. Demo

jQuery – Ajax Contact Form

A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP. The form has an input validation. After the message is sent in th ebackgroung a “success” message is displayed to the user. Demo

jQuery – Ajax Contact Form

This Ajaxed contact form uses jQuery & the jQuery Form plugin for input validation. Inputs are sanitized for the form being safe. A success or an error message is displayed after the form is submitted without leaving the page. Demo

jQuery Contact Form

This form checks the fields to see if they are valid, displays an error if there is a problem & sends the message as an e-mail when everything is ok. E-mail is sent via a PHP file with no refresh. The script is normally an e-mail sending form which can easily be modified to turn it into a contact form.

Submit A Form Without Page Refresh using jQuery

“Previously on NETTUTS, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). “

Calendars and date pickers

Full Calendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event)

Demo

jQuery UI Datepicker

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.

Demo

Date Picker

Date Picker component with a lot of options and easy to fit in your web application.

Demo

Simple jQuery Date Picker

Simple date picker script. Author requests assistance for adding improvements.

Demo

jQuery Week Calendar

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Demo

jMonthCalendar

MonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar now supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.

Demo

jQuery.timepickr.js

jQuery plugin that makes filling time inputs very easy. With a maximum of 2 clicks, a user can fill the form and there is also a keyboard navigation support too.

Auto complete

Auto Complete

Are you trying to build a custom search feature for a site? The Auto Complete jQuery plugin can supercharge your form inputs with additional user feature.

AjaxDaddy jQuery Auto Complete

This script is based on jQuery Autocomplete plugin made by PengoWorks. It has many options and is quite easy to setup in your page. You can pass advanced options as a JavaScript object, hashes etc.

Bassistance jQuery Auto Complete

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

jQuery Pagers

jQuery pager plug-in

Pagination

jQuery paginator is based on the jQuery Pagination plugin originally written by Gabriel Birke. For information, documentation and license please visit http://plugins.jquery.com/project/pagination

jQuery paginator plugin file already includes the required jQuery pagination plugin.

Demo

jQuery hot key plugins

jQuery shortKeys plug-in

Hot Keys

jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination.

Demo

jQuery Sliders

slider

The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.

Creating a Nice Slider With jQuery UI

Sliders have many things going for them as a UI element; they offer the benefit restricting the choice a user has, without taking up the space of a drop down. If you need to ask the user to select a number between a range, you can either do an input box with validation, a drop down select element listing each possibility, or you can do a slider.

jQuery UI Slider from a Select Element

selectToUISlider plugin uses progressive enhancement to scrape the data from a select element (or two for a range) and generate a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. It also allows the user to interact and make a choice with or without javascript, since the select element can be used if the slider is unavailable.

jQuery File Uploaders

Uploadify

Uploadify is a package written on top of jQuery that gives you both the client-side and server-side functionality you’ll need to handle single-file and multi-file uploads.

AJAX Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and starting from version 2.0 doesn’t require any library to run (although it will use some jQuery functions if it’s already loaded on the page). AJAX Upload doesn’t pollute the global namespace, so it’s compatible with jQuery, Prototypejs, Mootools, and other JavaScript libraries. Demo

Virtual Keyboard for Form Input Elements

Customizable jQuery Virtual Keypad Plugin

jQuery Keypad is a plugin for creating more secure input entry by providing a keyboard like interface. The values to be displayed can be easily set which makes it possible to show only numbers, foreign letters, etc.

Virtual Keyboard with jQuery Tutorial

Tutorial on creating a virtual keyboard with jQuery (script can be downloaded).

Such virtual keyboards are generally used in bank websites or forms that require extra security. They are a step for preventing keyloggers (but may not be an absolute solution as keyloggers are getting smarter).

Bookmark It

38 jQuery And CSS Drop Down Multi Level Menu Solutions

Mao-tun — Sun, 06 Sep 2009 06:56:37 +0000

Hello again, it’s time for comprehensive programming article. Here you’ll find 38 mainly jquery and CSS based drop-down or just multi level menu tutorials with down loadable files and explanations as well. My favorite here is the first pick – Outside the box with very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Shorten your developing process with already premade menus, which can be easily modified with little touch of CSS.

1. “Outside the Box” Navigation with jQuery

This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.

Preview Demo

2. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.

Preview Demo

3. Designing the Digg Header: How To & Download

Navigation is compacted with the use of simple drop-down menus.

Preview Demo

4. Create The Fanciest Dropdown Menu You Ever Saw

Preview Demo

5. A circular menu with sub menus

A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.

Preview Demo

6. A Different Top Navigation

In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

Preview Demo

7. Perfect signin dropdown box likes Twitter with jQuery

Nice tutorial showing you how to create a login drop down with Twitter style using jQuery.

Preview Demo

8. Sliding Jquery Menu Tutorial

This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

Preview Demo

9.Fancy Sliding Menu for Mootools

Preview Demo

10. Create Vimeo-like top navigation

I’ve featured this Janko’s tutorial some time ago, but sometimes I will repeat myself, since this article is completely dedicated to showcase advanced drop down menus. Very detailed and well written tutorial, with drop-down search options narrowing and targeting search by checking options. Menu is done completely using just CSS, structure is visually describet in the image below:

Preview Demo

11. Dynamic PHP/CSS menu

Preview Demo

12. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

Preview Demo

13. Animated Drop Down Menu with jQuery

Preview Demo

14. jQuery UI Potato Menu

Preview Demo

15. Make a Mega Drop-Down Menu with jQuery

Preview Demo

16. A cross-browser drop-down cascading validating menu

Just simple CSS menu.

Preview Demo

17. Drop-Down Menus, Horizontal Style

Very old drop-down tutorial from year 2004, but if you are starting out – very useful tutorial and example.

Preview Demo

18. Superfish v1.4.8 – jQuery menu plugin by Joel Birch

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and more features.

Preview Demo

19. JavaScript Dropdown Menu with Multi Levels

This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support.

Preview Demo

20. jQuery (mb)Menu 2.7

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

Preview Demo

21. Menumatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu

Preview Demo

22. Smooth Navigational Menu (v1.31)

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.

Preview Demo

23. jQuery File Tree

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.

Preview Demo

24. Longed-For Multi-Level Drop-Down Menu Script

Preview Demo

25. jQuery & CSS Example – Dropdown Menu

This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

Preview Demo

26. Reinventing a Drop Down with CSS and jQuery

Preview Demo

27. Simple jQuery Dropdowns

Very stripped down code and minimal styling, yet still dropdown menu has all the functionality typically needed.

Preview Demo

28. Styling Drop Down Boxes with jQuery

One problem with HTML forms is it is hard to style the elements to fit into your design. The tutorial will show you how to style the hardest of them all, the select box.

Preview Demo

29. jQuery iPod-style Drilldown Menu

Preview Demo

30. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

Newer version of previous iPod style menu.

Preview Demo

31. mcDropdown jQuery Plug-in v1.2.07

Preview Demo

32. jQuery Drop Line Tabs

This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI.

Preview Demo

33. Cut & Paste jQuery Mega Menu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!

Preview Demo

Sites of The Week by ECS #1

emincan — Sat, 22 Aug 2009 18:28:27 +0000

Envato

Envato Website

Teories On Lost

Teories On Lost Website

Horinaja

Horinaja Jquery

Point Zero

Point Zero Website

Twicet

Bookmark It