Just need a simple way to swap content out using javascript real quick? This seems to come up a lot in my life. On a recent job interview I was given a task to do this and the following is what I came up with. I’m positive this has been done many times already in different and superior ways, but, I like this simple implementation, and thought I’d share it for others to use and build upon. Enjoy…
…keep reading more.
A couple weeks ago, I made this pull out slider thing using jQuery. (people use them as ‘feedback’ tabs) I decided to try making it into a plugin for jQuery and here it is. Use it for creating a feedback form, contact info, or any content which is revealed using a sliding animation by clicking on a tab. Not sure how to describe it, check out the example.
See example page
Download the plugin
Download sample project files
You can apply the tabSlideOut object to a div that you want to become hidden content that is revealed by a tab. …keep reading more.
Yet another jQuery plugin ;-)
A designer friend of mine was working on his portfolio and was searching for a way to animate his horizontal navigation bar so that the sub-navs would drop down smoothly. In helping him implement a couple of scripts he found online, I decided to write a simple one myself. Turned out to not be quite as ’simple’ as I had hoped, but I like how this one is coming along. Again using the powerful magic known as jQuery, I was able to animate a nested list and make it all work nice. I decided to go ahead and make it a plugin. I also had the help of the hoverIntent plugin to make it all smooth. Check it out…
If you are looking for a regular vertical drop down menu for jQuery use superFish.
See example page
Download plugin
Download sample project
You simply apply this plugin to a nested list, and style it up and you have a nice animated sub-nav. …keep reading more.
See the live example in the sidebar of the Navigenics blog.
Today I cleaned up a huge category list on the sidebar of Navigenics’ blog. Since the main problem we were trying to solve was to free up some side bar real estate, I was asked ‘is it hard to put those into a drop down thing?’ We decided on having main category headers and then nesting sub-categories within them. I gave it a shot using the power of jQuery and I am happy with the results. …keep reading more.
I saw this little widget being used on a couple of sites lately, and decided to try building one myself. Turned out to be pretty simple using jQuery and some css foo.
Check out the demo of the effect or you can skip the bs and go right to the js.
The basic concept is to have a div hidden off the side of the page using position:absolute and a negative left value,
.feedback-panel { position:absolute; top:200px; left:-291px; }
and then ‘animate’ the css left value back to zero using jQuery.
$('.feedback-panel').animate({left:'0'}, 300)
That is the basic idea, now I will walk through how it all works… …keep reading more.