Selector Gadget

This is a great bookmarklet. The selector gadget is very easy to use. This bookmarklet will tell you a selector by clicking your target.
http://www.selectorgadget.com/
Read the rest of this entry »

sIFR alternative

After my successful attempt with sIFR3, I also tried Flir. But this was miserable failure. I just could not work it out to use it.
Then today I got sIFR alternative javascript cufon. This was so easy to implement. I downloaded a free true type font and used a generator and download it. All I need to do is to add cufon.js and the downloaded js. It was so smooth and easy to implement.

You can read more details article.
Read the rest of this entry »

Wordpress Podcast by Drew Douglass from Themeforest.net

This is a nice series of Wordpress podcast.
I have not used wp yet, but it seems very easy to use it.
Great tutorials. I highly recommend to subscribe Themforest RSS.
This is Day 7. If you want to watch from Day 1, visit Themeforest.net.
You can find other great podcasts as well, such as jQuery, php etc.
It's a great place to visit.


Read the rest of this entry »

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 »