Categories / jQuery
Facebook-style navigation menu with jQuery
March 3, 2010 jQuery Tutorials
After posting my Twitter-style login form I thought I'd carry on with the theme and build a quick example of how to recreate the top nav bar on the latest Facebook user interface. Specifically, the search form and nav list and more specifically yet the 'Account' item's dropdown list. With some jQuery, as you'll see, it's quite simple. (This one goes out to Eyad since it's one of the only tutorials I've posted so far that doesn't use more than a noticible amount of gray!)
Twitter-style login with jQuery & CSS3
February 27, 2010 jQuery Tutorials
Following my posting of the Twitter-style confirmation message with jQuery method, I thought it would be fun to recreate the Twitter login form. It's actually pretty straightforward and took me about a half hour to develop. Using a splash of jQuery to toggle the form and some CSS3 to apply the design you can implement a similar approach on your own web site.
Create a toggle footer with jQuery & CSS
February 24, 2010 jQuery Tutorials
This is one of the easiest implementations of jQuery but underlines the simplicity and robustness of the library as a powerful web development tool. Here I used the slideToggle & toggleClass functions to create a sliding sticky footer, in this instance as use for a 'Contact Me' panel. You could use it for just about anything including login & contact forms, slideshows, or you can combine it with cookies to create a user-controlled sliding message.
Twitter-style confirmation message with jQuery
February 21, 2010 jQuery Tutorials
One of the cool ways that Twitter interacts with users (when you're not too busy seeing that pesky fail whale!) is how they display their error and confirmation messages. I especially like the clean approach and displaying the messages at the top of the page. If you're looking for a similar approach with your web application or dynamic web site, here's one way you can do it using the jQuery form & some validation.
jQuery sliding DIV (with cookies)
February 21, 2010 jQuery Tutorials
One of the ways you can communicate with your users is with a dynamic message that is displayed when your page loads. This is a common method of adding important information (or possibly promo items). While it can add some immediate accessibility, having to force the message on them again after already seeing it once isn't the most ideal user experience. The method I developed here displays such messages but gives the user the option of not seeing it again by setting a browser cookie, thus eliminating that "ugh, not again!" reaction that your users may feel.
A jQuery-powered social dropdown menu
February 20, 2010 jQuery Tutorials
When David Walsh posted his article on using jQuery's sliding effect for use in FAQs, I was once again reminded of the beauty of jQuery in its simplicty. I thought I'd take it a step further and show how it could be used for a static dropdown menu for your site/blog's social media links.
How to show/hide a hidden input form field using jQuery
February 13, 2010 jQuery Tutorials
This past week I was working on a project at work which included building a request form with multiple fields. It was a rather large form that included a dropdown list with an 'other' option. I wanted to allow users to select the 'other' option which then would show an input field so they can enter a specific description of what that 'other' item is. I didn't want to clutter the form by displaying that additional field by default so I used a little jQuery, thus displaying it dynamically and only when needed.
jDiv: A jQuery navigation menu alternative
February 1, 2010 jQuery Tutorials
Late last year, I was working on the UI for a potential project and I needed a drop-down menu that displayed any content I needed, specifically a combination of images and lists. I didn't feel that only using a UL style was semantic enough or gave me the flexibility I needed. So, jDiv was born.
How to open external links & PDFs in a new window using jQuery
January 31, 2010 jQuery Tutorials
I'm not usually a fan of forcing new windows on users, be it for external sites or for viewing documents but there are cases in which your users may prefer it or clients may insist on it. If this is the case, then here's an easy way to do it with just a splash of jQuery.
jQuery based modal solutions for your web application
December 30, 2009 Best Practices jQuery Resources
Displaying content dynamically by way of modal windows and dialogs is an effective way to increase your site's usability and add a dimension of slickness to your overall experience. I've compiled a list of my favourite modal scripts using the jQuery library.
125 Subscribers
195 Followers
