1. Smart Columns w/ CSS & jQuery
“As I observe other liquid based websites, I see two commonly used techniques on displaying columns, the fixed columns and the liquid columns. There are drawbacks to both that I would like to point out, and later would like to pitch my solution.”
2. jQuery & CSS Example – Dropdown Menu
“Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. 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.”
3. Easy Display Switch with CSS and jQuery
“Today’s web users expect web pages to be increasingly more interactive. To this end, the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.”
4. Easy Display Switch with CSS and jQuery
“I recently stumbled upon Dragon Interactive (dragoninteractive.com). It’s a pretty well designed site. However, the pièce de résistance is their rather cool animated menu. Now… had this been designed in Adobe Flash, I wouldn’t had paid much attention. A closer inspection revealed that the menu is plain XHTML, CSS and Javascript. Today, I’m going to show you how to create an animated menu (very similar to Dragon Interactive’s menu).”
5. Simple Page Peel Effect with jQuery & CSS
“You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery.”
6. Animate a hover with jQuery
“Animate an image while hovering it and show the visitors information while doing that. Sounds simple huh? Well it is, but the effect is nice and can be nice for a portfolio, for example.”
7. Animate a hover with jQuery
“An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.”
8. FancyUpload – Swiff meets Ajax (v3.0)
“Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all ”
9. Setting Equal Heights with jQuery
“Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. When developing complex web applications or site designs we’ve found that it often makes the most sense from a usability and performance standpoint to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.”
10. jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element
“HTML select elements, like many other form elements, are nearly impossible to style and customize across browsers. This jQuery UI widget provides an accessible, styleable, and configurable replacement for select elements, allowing you to customize their behavior and appearance for a richer user experience. The plugin uses progressive enhancement to pull the content and state information from the select before replacing it in the page. After replacing the select element, the selectmenu continues to act as a proxy to the select that it replaced (even though it is hidden from the user), so when the form is submitted, the select value is still there to pass data to the server.”
11. JavaScript image combobox v2.1
“Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing “select” element. I hope you’ll like this.”
12. Improved Current Field Highlighting in Forms
“As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. Some browsers (Safari/Opera) have decided that is so important, that it take matters into it’s own hands and applies a glowy blue border around active form elements:”
13. jquery.biggerlink 2
“A jQuery plugin to make it really easy to enable the specified element/s to behave as a proxy for their first contained link. Uses additional css classes to provide the means for the specified element to visually reflect focus and hover states of it’s contained link/s.
14. JQuery Curvy Corners Demo page
“The “Curvy corners” script was orgionally developed by Cameron Cooke, I (Mike Jolley) have since modified it for use in JQuery. The end result is a JQuery optimised file, much smaller in size, and working perfectly. Packed it is just 9kb in size!”
15. Create an Attractive jQuery Menu with Fadein and Fadeout Effect
“We will be learning how to create an attractive menu with more advanced CSS and simple jQuery script. It uses jQuery builtin fadein and fadeout effect.”
16. Columnizer jQuery Plugin
“The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. And, of course, it’s easy to use! You can style your columns however you wish. Columnizer adds the following classes to the column divs it creates:”
17. Text-shadow in IE with jQuery
“With the soon-released FireFox 3.1, three of the four major browsers support text-shadow. That leaves just Internet Explorer with the lack of text-shadow. I have already taken care of that problem, but decided to wrap it up in a nice automated jQuery plugin.”
18. Create fancy share box with CSS and jQuery
“This tutorial will show you how to turn unordered list (UL) into an fancy social bookmarking sharing box. You will see how to style such box, how to add interactivity, and how to create jQuery plugin that will turn any UL into sharing box.”
19. CSS + jQuery Highlight important keywords inside text
“A few days ago while working on a new UI component I had to come up with a solution to highlight identified keywords (using named entity recognition) inside of a chunk of user generated text. While the idea was fairly simple, the challenge was creating a solution which would work [relatively] well for all modern browsers including IE7, IE8, Firefox, Safari, and Chrome. ”
20. “Outside the Box” Navigation with jQuery
“Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.”
21. Sexy Drop Down Menu w/ jQuery & CSS
“Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.”
22. Designing the Digg Header: How To & Download
“The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It’s fluid width, but it doesn’t shrink too far or grow too big.”
Be a link sponsor for this page now
[sponsorbox]
I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.
Good Luck!
I Really like what you have done with your blog! Will you please check out my site? It is new and i would like to show it off! The site is http://www.publicdomainpayday.com
Thanks for the tutorial. Will you make a fresh HTML tutorial soon?
Heide,
Yeah, more tutorial will be coming up shortly.
Thanks for the support.
Great post. Really informative. I will ask my designers to visit this site regularly, as this site is a god source of information for them.