Categories / Tutorials
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!)
Create a fancy web form with field hints using only CSS3
February 28, 2010 CSS Tutorials
CSS3 tricks have been pretty popular in the last while on various design blogs and with good reason. Like many of you, I've caught the CSS3 bug and this afternoon I took a stab at this nifty little method of adding hints to your form fields (as well as some fancy style enhancements) using CSS3. The cool part is you don't require Javascript for the form field hints. Here's a demo and run down of the code used.
CSS3-only horizontal drop line tab menu
February 28, 2010 CSS Tutorials
Recently, Web Designer Wall posted this really cool tutorial on creating a dropdown menu using only CSS3 (no javascript). Not being one to just sit back and let things sit as is, the approach inspired me make a variation. The result, however directly derivitive, is this horizonatal drop line menu based on a variation of WDW's tut.
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 Javascript 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.
5 Simple Horizontal CSS Menus
February 7, 2010 CSS Tutorials
I thought I'd take the opportunity to build a few examples of straight-forward CSS menus, from the basic block style to CSS3 to CSS sprites. For advanced designers, this is pretty simple stuff but is a handy reference for budding professionals.
jDiv: A jQuery navigation menu alternative
February 1, 2010 Javascript 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 Javascript 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.
Dynamic navigation with PHP & CSS
January 7, 2010 CSS PHP/MySQL Tutorials
One of the key approaches to web site navigation is to make sure your users know where they are moving around your site. One way to achieve this is to highlight the appropriate menu item for the page the user is on. This is easily done with a little CSS and PHP and can be put together in less than fifteen minutes.
117 Subscribers
188 Followers
