Showing posts tagged js

Upload And Preview Image Without Refresh

When we use the iframeSubmit function, we’ll have the form point to upload.php for image submissions and the result will be loaded within the iframe (which is now a hidden element in the page). The upload.php script should process the submission and generate an iframe content which will call the function defined and passed by iframeSubmit, with the results of the operation.

That’s the key.

From: Upload and display an image without a page refresh.

Object comparison in JavaScript

http://stackoverflow.com/questions/1068834/object-comparison-in-javascript

Why not JSON.stringify it then compare?

  1. JSON.stringify removes properties that are set to undefined.
  2. What if the data is the same but the order of the keys is different?
  3. String performance.

screen.height, screen.availHeight, window.innerHeight

屏幕分辨率高度,屏幕内可用高度(桌面去掉任务栏,浏览器可用高度),浏览器内可用高度

$.getWinSize = function() {
    if (window.innerWidth != undefined) {
        return [window.innerWidth, window.innerHeight];
    } else {
        var body = document.body, de = document.documentElement;
        return [Math.max(de.clientWidth, body.clientWidth), Math.max(de.clientHeight, body.clientHeight)];
    }
};

Read Request Payload in Codeigniter

I was using Codeigniter with Backbone. When I try to call the save() method in the Backbone it sent a POST Request to the server. But it sends data to the server using a Request Payload and not the standard Form Data approach that jQuery, and standard HTML forms submit with.. After a bit study I think there are two easy way to handle this.

On the front end you can enable Backbone.emulateJSON() or on the server side, $requestBody = json_decode(file_get_contents('php://input'),true);.

I heard something like $this->request->body but it never works.

Updating address bar with new URL without hash or reloading the page

Lazy Load Script

You can always use $.getScript, or the old fashioned way:http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

One fun thing about this entry:

There’s been competitions for writing a short and compact version of addEvent, and the winner of that competition was John Resig, with this little beauty:

function addEvent(obj, type, fn)  {
  if (obj.attachEvent) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn](window.event);}
    obj.attachEvent('on'+type, obj[type+fn]);
  } else
    obj.addEventListener(type, fn, false);
}

Note: This is unsafe code, since it relies on serializing a function to a string, something that Opera mobile browsers have disabled.

bind, live, delegate & this

The events attribute

The Backbone events attribute allows us to attach event listeners to either custom selectors, or directly to el if no selector is provided. An event takes the form {"eventName selector": "callbackFunction"} and a number of DOM event-types are supported, including click, submit, mouseover, dblclick and more.

What isn’t instantly obvious is that under the bonnet, Backbone uses jQuery’s .delegate() to provide instant support for event delegation but goes a little further, extending it so that this always refers to the current view object. The only thing to really keep in mind is that any string callback supplied to the events attribute must have a corresponding function with the same name within the scope of your view.

Important thing is:

Backbone uses jQuery’s .delegate() to provide instant support for event delegation but goes a little further, extending it so that this always refers to the current view object.

So event function bind to the element could always use function in the scope of the view (current object).

Tumblr Pin Button Animation Implementation