Web Design & Develop

A very light, simple and easy to use address picker using Google Maps API v3 and jQuery, you may use this widget to embd in you web forms if you want user to input address or/and latitude/longtitude.

Continue reading »

Written by ideawu at 2011-07-08 16:27:21 | tags: Google Maps API, JavaScript, jQuery

There are certain wrong ways using JavaScript/jQuery to get the width/height of dynamic loaded image. Here are some reasons why your codes won’t work:

• You codes run before the image is downloaded from web server,
• event you use jQuery to bind a “load” event handler on that image, your codes won’t work when the image is loaded from browser cache(jQuery bug).

Let me show you the WRONG ways:

(WRONG)get width/height after setting html content

var html = '<img src="URL" />;
$('#my_div').html(html);
var width = $('#my_div img').width(); // may return 0

(WRONG)get width/height in “load” event handler

var html = '<img src="URL" />';
var img = $(html);
html.load(function(){
    // return 0 if image is loaded from browser cache
    var width = img.width();
});
$('#my_div').html(img);

And now, comes the right way…

The Exact way

var html = '<img src="URL" />';
$('#my_div').html(html);

var ni = new Image();
ni.onload = function(){
    var width = ni.width;
}
ni.src = img.attr(URL);

Written by ideawu at 2011-07-03 22:22:53 | tags: JavaScript, jQuery, js-image

Bind an event handler to one or more elements, allow to abort the bindation on other event. Usefull for showing tooltip when mouse moves on elements after a few time.

View: Demo

// define
(function($){
    $.fn.lazybind = function(event, fn, timeout, abort){
        var timer = null;
        $(this).bind(event, function(e){
            var ev = e;
            timer = setTimeout(function(){
                fn(ev);
            }, timeout);
        });
        if(abort == undefined){
            return;
        }
        $(this).bind(abort, function(){
            if(timer != null){
                clearTimeout(timer);
            }
        });
    };
})(jQuery);

// example
$('#my_img').lazybind(
    'mouseover',
    function(){
        alert(1);
    },
    500,
    'mouseout');

@Parameters

• event: string, event to bind to
• fn: function, callback
• timeout: int, time to wait before fn being called, in millisecond
• abort: string, on which event the binding will be cancelled.

Written by ideawu at 2011-05-27 16:40:48 | tags: JavaScript, jQuery