Week in Web: jQuery Menus, Flowplayer update, Stylesheet removal, drop shadows, Gury, Sliders, etc

I’m going to start publishing, every Friday, a list of some useful / interesting links I’ve visited throughout the course of the week.

Usually this will involve whatever I am working on at the moment.  If you like these links, you can follow me on Twitter to get them as I find them (as opposed to waiting for Friday).

This week I’ve been working a lot with jQuery (nothing new), Flowplayer, and CSS.  An average week for a web developer.

jQuery Menus with Stunning Animations

A list put together by Noupe.com, covering some very nice jQuery menu ssytems, including:

• Scrollable Thumbs Menu with jQuery
• Sweet Menu
• Creating a Fancy Menu Using CSS3 and jQuery
• Rocking and Rolling Rounded Menu with jQuery
• Slick Drop-Down Menu with Easing Effect Using jQuery & CSS
• Thumbnails Navigation Gallery with jQuery
• Collapsing Site Navigation with jQuery
• jStackmenu (interesting looking site, unique/Apple approach to menus)
• Create Your Own “kwicks” jQuery Effect
• Overlap that Menu!
• Overlay Effect Menu with jQuery
• jQuery Multicolor Animation Drop-Down Navigation
• jQuery Floating Menu
• Kwicks for jQuery & a Horizontal Animated Menu
• Fading Navigation Menu
• UI Elements: Search Box with Filter and Large Drop Down Menu
• jQuery Convertion: Garagedoor Slider Navigation Effect
• Create Bounce Out Vertical Menu with jQuery
• Slide Down Box Menu with jQuery and CSS3
• LavaLamp Plugin
• Little Boxes Menu with jQuery
• Horizontal Scrolling Menu Made with CSS and jQuery
• Beautiful Background Image Navigation with jQuery
• Awesome Cufonized Fly-out Menu with jQuery and CSS3

This list was well organized, thanks so much @studioeple.

So if you’re stuck, dreading creating yet another boring drop down menu.  Take a look at all of these variations on drop down menus.

Keep in mind, when making drop downs, how will a mobile user access the menu?  Mobile devices are a cog in the whole drop down menu system.

Dynamically Remove a Stylesheet using jQuery

If you’re working with multiple stylesheets, and want a user to change the current them in real time — you may want to add/remove stylesheets dynamically.  You can actually do this.

Check out this conversation thread on StackOverflow.com – How to dynamically remove a stylesheet from the current page?

CSS drop-shadows without images

This page shows you how to create some clean looking drop shadows using pure CSS.  It’s done using CSS (and browser specific elements, but they seem to work across the standard browsers).

The author, Nicolas Gallagher, does a straight forward / simple writeup.

Flowplayer Updated this week to version 3.2.6

I get excited when platforms I frequently use get updated.

Flowplayer released version 3.2.6 this week.  It includes sharing options, HD/SD toggles, some advanced streaming updates, and many bug fixes.  Some of the fixes apply directly to bugs I have in current projects.  It’s nice seeing bugs just disappear.

Banish JavaScript in Web Forms with HTML5

While we can’t use HTML5 everywhere now, we can get up to speed on the features it will bring to us.

One nice part of HTML5 is the form elements have learned from the last 15 years of website forms.

Matt Doyle tells us how we can use these new forms elements to simply address:

• Email validation / url validation / etc (check out the options for input types at the W3C Working Draft for HTML5)
• Placeholder (no more jQuery ‘.val() == “”‘!)
• Required
• Autofocus

Make working with canvas HTML a bit easier with “gury”

Web developers will have a very powerful tool at their disposal when HTML5 becomes mainstream, the canvas element.

gury, aims to reduce the headaches in working with HTML5/Canvas by abstracting out some of the more frustrating behaviors.

I’ll be following this to see how it evolves.  Right now it seems to freeze my browser.

jQuery Sliders Galore!

Using jQuery the sexy way highlights 7 “sliders” for presenting images and content using jQuery.

Included are:

• Nivo Slider
• Flip!
• Coin Slider
• Reel
• jPhotoGrid
• jQuery.popeye 2.0
• Presentation Cycle

I’m a bit surprised not to see jQuery Cycle listed there.  It’s one of my favorite image rotators.  It is easy to work with and is highly configurable.  I know the article is almost a year old, but still, jQuery Cycle does some good stuff.

Drag and Drop for the Masses

I hate seeing drag and drop in designs I get.  A web designer just needs to add a drag icon, and suddenly a div can go from 5 minutes, to 4 hours to build.

Jake Rocheleau, at onextrapixel, wrote a clear tutorial on doing drag and drop with jQuery.

This will make my life easier.

jQuery 1.5: Keep your plugins updated!

jQuery 1.5 was released a few weeks ago, and brought some excellent performance gains to the use of next/prev and child selectors.

If you’re running plugins, keep in mind they may have to be updated to either work, or take advantage of some of the new jQuery functionality.

jQuery Validate needs to be updated to work with jQuery 1.5, you can download it here minified (or the full text) — or check out the official page.

Fixed Position iOS Web Applications

I keep running into websites I deploy with fixed footer, and issues on mobile devices.  Why?  Because mobile devices don’t support fixed positioning (duh, there is no fixed browser window).

Google keeps us informed with a quick writeup by Ryan Fioravanti, on how to implement a fixed position iOS web application.  Follow him on twitter, he deserves some following love.

Tags: CSS, drag and drop, drop shadow, Flowplayer, Friday, Google, gury, HTML5, jake rocheleau, Javascript, jQuery, onextrapixel, Ryan Fioravanti, sliders, studioeple, stylesheet, Summary, Twitter

No comments yet.

Leave a comment