Accordion menu by Roshan

Here you can find a easy accordion menu.
http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html
You can download the files as well.

The first one is,
1. Get a p-tag with class of menu_head in the id firstpane, then attach a click function.
2. With this element, change css, background-image to down.png
3. then find next div with class menu_body and toggle slide with 300ms.
4. Then find all the siblings with div class of menu_body and slide up with slow speed.
5. Then find all the siblings of this element and change css backgroud-image to left.png

The second one is almost the same except mouseover function and sliding down div.menu_body with 500ms and sliding up all the siblings of div.menu_body with slow (600ms) speed.

$(document).ready(function()
{
 //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
 $("#firstpane p.menu_head").click(function()
    {
  $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().css({backgroundImage:"url(left.png)"});
 });
 //slides the element with class "menu_body" when mouse is over the paragraph
 $("#secondpane p.menu_head").mouseover(function()
    {
      $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(left.png)"});
 });
});

Thanks Roshanbh
Read the rest of this entry »

Jquery for Absolute Beginners

Jeffrey is a very resourceful person. He is one of person behind the famous NETTUTS.
He gives a series of Jquery tutorials in his websites In the Woods http://blog.themeforest.net/category/screencasts/
and
detached designs.com http://www.detacheddesigns.com/.
If you haven't watched them yet, you must!!
Read the rest of this entry »

"How to Make a Smooth Animated Menu with jQuery" by Zach Dunn

Zach Dunn from buildinternet.com shared his jquery menu.

http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
It does not gracefully degrade with Javascript unabled, but it is a good tutorial. He guide us line by line with detailed comment.
.stop() is used for avoiding a broken accordion effect. Mouseover, mouseout
and normal chain is used.

Thanks Zach.

  $(document).ready(function(){

    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

Read the rest of this entry »

"Changing Form Input Styles on Focus with jQuery" by Sam Dunn

Sam Dunn from Buildinternet.com wrote a jquery snippet "Changing Form Input Styles on Focus with jQuery"
http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/
The code is explained in details line by line and easy to follow and understand.
Thanks Sam.
Read the rest of this entry »

Set Font Size Based On Word Count

Chris Coyier from CSS-trics gave us a snippet how to set font size based on word count.
http://css-tricks.com/set-font-size-based-on-word-count/
There are mootools and jquery script.
Jquery script uses if, else if, else statement. Easy to understand.
Thanks Chris.
Read the rest of this entry »

Animated menu using jquery and sprite

This post explains how to make an animated menu using jquery and sprite.
http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

The post is very easy to follow and explains very well.
This is a good example for hover function as well. It uses simple hover and animate function for opacity and speed. It uses .stop() to avoid a broken accordion effect.

$(function() {
  // set opacity to nill on page load
  $("ul#menu span").css("opacity","0");
  // on mouse over
  $("ul#menu span").hover(function () {
   // animate opacity to full
   $(this).stop().animate({
    opacity: 1
   }, "slow");
  },
  // on mouse out
  function () {
   // animate opacity to nill
   $(this).stop().animate({
    opacity: 0
   }, "slow");
  });
 });

Read the rest of this entry »

jquery.cookie.js plug-in

This is a nice way to keep a viewer's cookie so that when they come back they have the same settings. This can be used for text size or layout setting.

http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/

The code is simple and easy to understand what's going on.

I recommend to go through all the tutorials in this website or subscribe their RSS.
Read the rest of this entry »

jquery.toggleElements.js

I found quite few jquery plug-ins today. This is one of them.

http://jquery.andreaseberhard.de/toggleElements/index.html

At the beginning I thought why I need this, I can use normal toggle function!
Well then I found it is quite neat. You can use it in different ways and easy to use.
You can nest toggle sections in a toggled section as well.

You can download it here.
http://jquery.andreaseberhard.de/toggleElements/index.html
Read the rest of this entry »