Organizing a long list with jQuery: ihwy version

I found a jquery listnav plugin.

When I see the demo, it is a bit confusing with other functions, like tabs etc., and there are no zip files. So I put it one by one in order to simplify it.
You can find
listnav1
listnav2
listnav3
listnav4

I can't find out how to make listnav3 red yet. And also I haven't find out why the right side of listnav3 is not showing.
Read the rest of this entry »

jQuery menu- snook version

I found a jquery menu at snook.ca.
I needed to change a little bit to make it a bit subtle. So I created this one.

I know someone must have done it, but I couldn't find it.

This works with IE6/7, Chrome and FF3. It should work with Safari and Opera.
Read the rest of this entry »

Advanced jQuery with John Resig

Talk at The Ajax Experience 2008.

Read the rest of this entry »

Advanced JavaScript: closures, prototypes, inheritance

Talk given by Stoyan Stefanov at The Ajax Experience 2008

Read the rest of this entry »

The Ajax Experience resources link

You can find great videos and power points at The Ajax Experience.
Read the rest of this entry »

Intro to jQuery with John Resig

Some codes from the video.

jQuery("div").load("url") // is the same as
jQuery.ajax({
    url: "test.html",
    complete: function(h) {
        jQuery("div").html(h);    
    }
});

// only extract h2
jQuery("div.load").("file.html h2") // and it is the same as
jQuery.ajax({
    url: "test.html",
    complete: function(h) {
        jQuery("div").html(
            jQuery(h).find("h2"));
    }
});
// To get external script
jQuery.getScript("somescript.js", function(){
});
jQuery(document).ready(function(){
});

// for async
jQuery.ajax({ 
    url:"somescript.js,
    async: false
});
//example
jQuery(document).ready(function(){
    jQuery("form").ajaxForm(function(html){
        jQuery("#item").val('').focus();
        jQuery("ul").html(
            jQuery(html).find("li");
    });
});  

Read the rest of this entry »

Jquery videos from Ajaxian

Link:
http://ajaxian.com/archives/jquery-ajax-experience-framework-videos
Video 1: Intro to jQuery with John Resig
Video 2: Advanced jQuery with John Resig
Video 3: An In-Depth Look at jQuery UI with Paul Baukus
Video 4: Rich Interactivity, Simplified, with jQuery UI with Richard Worth
Video 5: jQuery on Rails (The Real Ones) with Jonathan Sharp
Read the rest of this entry »

sIFR

When I was playing around with jquery plugin sIFR, I noticed that downloaded sIFR3 files from http://www.sifrvault.com/ do not work with this plugin.

http://jquery.thewikies.com/sifr/

Then I found this.
http://wiki.novemberborn.net/sifr3/How+to+use

You can download the latest version from here.
http://wiki.novemberborn.net/sifr3/nightlies
Unzip it and you can find demo folder in the zip. And put it in a server, i.e xampp.

Access it by typing this to webaddress.
http://localhost/sifr3-r436/demo/index.html

I downloaded some fonts from sifrvault.com and tested it and it works perfectly.
Please note that I have to put flash files in design so src is design/myflash.swf.

     var cochin = {
      src: 'design/cochin.swf '
      ,ratios: [7, 1.32, 11, 1.31, 13, 1.24, 14, 1.25, 19, 1.23, 27, 1.2, 34, 1.19, 42, 1.18, 47, 1.17, 48, 1.18, 69, 1.17, 74, 1.16, 75, 1.17, 1.16]
    };

    var rockwell = {
      src: 'design/rockwell.swf '
      ,ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25, 22, 1.22, 27, 1.24, 29, 1.21, 34, 1.22, 41, 1.21, 45, 1.2, 46, 1.21, 59, 1.2, 68, 1.19, 69, 1.2, 96, 1.19, 97, 1.18, 102, 1.19, 103, 1.18, 107, 1.19, 108, 1.18, 112, 1.19, 114, 1.18, 116, 1.19, 120, 1.18, 121, 1.19, 1.18]
    };
var futura = { src: 'design/Futura.swf' };
var acme_explosive = { src: 'design/acme_explosive.swf' };
var snell_roundhand = { src: 'design/snell_roundhand.swf ' };
var avantgarde_md_bt = { src: 'design/AvantGarde_Md_BT.swf ' };
  
//continue

Read the rest of this entry »

z-index problem with IE

This article helped me how to solve IE z-index problem. There is a good comment at the end as well.
Title is called Squish the Internet Explorer Z-Index Bug and written by Brenelz Web Solutions.
http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/

I had jquery dropdown menu from www.kriesi.at and jquery.innerfade.js on a home page. The dropdown menu goes behind the slideshow in IE 6/7.
I have forgotten about it and here comes a rescue. I added z-index: 3000 to not closest parent but 2 levels up in my case. Thanks.
Read the rest of this entry »

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 »