• 2011-07-08

    Address Picker Using Google Maps API v3

    Views: 28165 | 9 Comments

    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.

    Map Address Picker

    Continue reading »

    Posted by ideawu at 2011-07-08 16:27:21 Tags: , ,
  • 2011-07-03

    The Exact Way to get Width and Height of Dynamic Loaded Image

    Views: 27923 | 5 Comments

    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,
    • even if 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

    // step 1: display the image
    var img = '<img src="http://image.jpg" />';
    $('#my_div').html(img);
    
    // step 2: get image's width
    var ni = new Image();
    ni.onload = function(){
        var width = ni.width;
    }
    ni.src = 'http://image.jpg';
    
    Posted by ideawu at 2011-07-03 22:22:53 Tags: , ,
  • 2011-05-27

    jQuery Delay Bind Event Handler(Lazy Bind)

    Views: 19146 | 1 Comment

    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.
    Posted by ideawu at 2011-05-27 16:40:48 Tags: ,
|<<<1>>>| 1/1 Pages, 3 Results.