• 2014-12-12

    Pure JavaScript Swipe Event Plugin for PC and Mobile Web

    Views: 4643 | 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:
  • 2013-10-06

    Build a web chat app with icomet

    Views: 11146 | No Comments

    icomet(https://github.com/ideawu/icomet) is HTTP a server-push comet solution, it supports all popular browsers and OSes, including Safari/iOS(iPhone, iPad, iPod), Safari/Mac, IE/Windows, Chrome, Firefox/Mac, Windows.

    icomet is written in C++, built with libevent, and is totally open sourced.

    Building a web chat with icomet is very easy, the provided JavaScript client library is easy to use:

    var comet = new iComet({
        channel: 'abc',
        signUrl: 'http://127.0.0.1:8000/sign',
        subUrl: 'http://127.0.0.1:8100/sub',
        callback: function(msg){
            // on server push
            alert(msg.content);
        }
    });
    

    You can see the Live Demo here: http://www.ideawu.com/icomet/chat.html

    Posted by ideawu at 2013-10-06 14:41:02 Tags: , ,
  • 2013-06-04

    Best Practice of JavaScript Inheritence

    Views: 4383 | No Comments

    Unlike other OO languages such as Java, JavaScript have no class grammar, the most similar concept to class is function. These codes below shows how to define a JavaScript class:

    function Base(arg){
        var self = this;
        self.base = 1;
        self.name = 'base';
    }
    

    But how to inherits from other clsss? You need to use prototype.

    function Child(arg){
        var self = this;
        self.name = 'child';
    }
    
    // Magic happens here!
    Child.prototype = new Base();
    Child.prototype.constructor = Child;
    

    You can now use Child as usual:

    var child = new Child();
    alert(child.base + ', ' + child.name); // 1, child
    

    You may want to wrap up the inheritence operation in one function:

    function class_extend(child, base){
        child.prototype = new base();
        child.prototype.constructor = child;
    }
    class_extend(Child, Base);
    
    Posted by ideawu at 2013-06-04 11:10:23
  • 2013-05-31

    Nginx 499 error code and AJAX termination

    Views: 10923 | No Comments

    In a recent project, we encounter strange Nginx 499 error code problem. The web page bind an event handler to an “a” tag, which invoke an AJAX operation, as shown below

    <a class="mybutton">Click Me</a>
    
    $('a.mybutton').click(function(){
        // ajax
    });
    

    The code works fine on most browsers, but doesn’t work on an embed web browser widget. I finally found out that it was an IE6 bug. The browser widget terminates the AJAX request after click event handler ends. To prevent this, you must return false in the event handler

    <a class="mybutton">Click Me</a>
    
    $('a.mybutton').click(function(){
        // ajax
        return false;
    });
    
    Posted by ideawu at 2013-05-31 10:35:14 Tags: , ,
  • 2013-04-02

    Tovi – The JavaScript image gallery and HTML slider

    Views: 4774 | No Comments

    + Features

    Images and HTML code snippets

    Both images and images and HTML code snippets can be played.

    Dynamic image sizing

    Center and resize images on the fly to suit the slider’s size, regardless of the image source. Images can be scaled by mouse wheel and trackpad, and can be dragged to place at any position of the slider window.

    Swipe and mouse drag to navigate

    Slides can be navigated by trackpad swipe or mouse drag and drop, just like iPhone panel.

    Continue reading »

    Posted by ideawu at 2013-04-02 22:09:02
|<<<12>>>| 1/2 Pages, 9 Results.