jquery plug-in, easing

Excellent jquery plug-in for animation.
http://gsgd.co.uk/sandbox/jquery/easing/
You can find one of sample here.
http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
Read the rest of this entry »

Jquery API browser

This is the newest and must-have item for jquery. You can download AIR application as well.
http://api.jquery.com/
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 »

Gracefully Degradable jquery Drop-Down-Menu

There are many jquery menus. However I found that some are not gracefully degradable and some don't work in IE6 etc.

I found good one with mootools. Then I wanted to change it to jquery for other reasons.

I found two jquery menus for my purpose. Both of them works without javascript enabled and in IE6.

http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
and
http://users.tpg.com.au/j_birch/plugins/superfish/

I decided to use the first one since it does not need other js as the second one and it serves my purpose.

This menu does not look fancy, because of color, but I used this for some websites. www.okadadesign.no www.designvalg.no and other websites.
Read the rest of this entry »

Javascript which allow you to edit any web pages

I found this snippet a while ago. This will allow you to edit webpage.
Paste this to webaddress and enter.
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
Read the rest of this entry »

The book reviews and books I am going to buy

I have bought two books about jquery from Amazon last year.

1. Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques

and

2. jQuery Reference Guide: A Comprehensive Exploration of the Popular JavaScript Library

The first one is excellent. If you are a beginner like me and want to learn jquery, I highly recommend it. I have read three times the first 6 chapters and I am still reading and digesting the rest of the book slowly.

What I realized is that I need to know javascript. From chapter 7, you need to know javascript well. Not only the beginners level. That's why I am going to buy a couple of javascript books for learning it, and I will tell you in the second part what I am going to order.

I am disappointed about the second book a bit. If you need a reference on your desk, it may serve what it's supposed to do. But you can find more information from http://visualjquery.com/ with examples. This website is an excellent resource for jquery.
The books does not give enough examples. You can find more in the above website or jquery.com document.


Now after some research I decided to buy the following books for my learning jquery and javascript.

The first one is
JavaScript: The Good Parts

Douglas Crockford is a highly regarded javascript expert. You can find his talks in Yahoo! UI Library
http://developer.yahoo.com/yui/theater/

In his talk, he recommended only one book which is least bad. That's the second one I am going to buy.
JavaScript: The Definitive Guide

Some cretics comment about lack of examples in this book, but overall reviews are good.

The third one is
jQuery in Action

I am hoping to learn more about jquery from this book.
There will be another jquery book is coming out soon.
Beginning JavaScript and CSS Development with jQuery

jQuery UI 1.6: The User Interface Library for jQuery

And the author of Learning jQuery, Karl Swedberg is publishing another jquery book in May 2009.

Well I have to how much left in my wallet...

I used Amazon Associates for the above link. I can earn some Amazon gift card so that I can buy more books!
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 »