• 2014-12-12

    Pure JavaScript Swipe Event Plugin for PC and Mobile Web

    Views: 4207 | No Comments

    I tried many JavaScript Swipe event plugins, such as the jQuery mobile swipe plugin, and the jQuery.event.swipe by stephband, and many others. Unfortunately, none of them works for me. Many weakness of those code that I made decision not using them:

    The demos provided are so poor, they are not interesting.

    The swipe event is fired only after the touch ends(your finger lift off the screen, or release the mouse button), so your event handler is so delayed to the user, that’s why the UI is not smooth. There must be move events before the swipe event fires.

    Treats swipe event as a serial of move events. In this way, you provide only one event handler just like you provide for Mac’s trackpad scroll events. The Mac trackpad hardware driver gurantees to generate smooth small scroll events.

    So, with my JavaScript swipe event plugin, your code would be as simple as:

    guesture.onmove = function(e){
    	layer.x += e.dx;
    	layer.y += e.dy;
    }
    

    Check out the exciting demo online! With PC chrome browser, or with your iPhone Safari, it is PC and Mobile compatible.

    Posted by ideawu at 2014-12-12 16:55:56 Tags:
  • 2011-07-08

    Address Picker Using Google Maps API v3

    Views: 17199 | 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: 17421 | 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: 11452 | 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, 4 Results.