idea's blog

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.

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

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);

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;
});

+ 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 »