madrobby / zepto

Zepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API

Zepto.js – a minimalist JavaScript library

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.

See zeptojs.com for an extended introduction, downloads and documentation.

Zepto.js is licensed under the terms of the MIT License.

Want to give us money or a tip? Don't. Instead please donate to charity: water.

Building

The official site offers a download of the default distribution of Zepto. This is good for starting out. However, at some point you might want to add some optional modules and remove some of the default ones you don't need, to keep the size at a minimum. That's when you need to check out Zepto's source code and use the build commands.

You will need Node.js installed on your system.

$ npm install
$ npm run-script dist

# do a custom build
$ MODULES="zepto event data" npm run-script dist

# on Windows
c:\zepto> SET MODULES=zepto event data
c:\zepto> npm run-script dist

The resulting files are:

1. dist/zepto.js
2. dist/zepto.min.js

If you install CoffeeScript globally, you can run make directly:

# one-time operation
$ npm install coffee-script --global

$ coffee make dist
$ MODULES="zepto event data ..." ./make dist

# on Windows
c:\zepto> SET MODULES=zepto event data
c:\zepto> coffee make dist

Zepto modules

Zepto modules are individual files in the "src/" directory.

module	default	description
zepto	✔	Core module; contains most methods
event	✔	Event handling via on() & off()
ajax	✔	XMLHttpRequest and JSONP functionality
form	✔	Serialize & submit web forms
ie	✔	Support for Internet Explorer 10+ on the desktop and Windows Phone 8
detect		Provides $.os and $.browser information
fx		The animate() method
fx_methods		Animated show, hide, toggle, and fade*() methods.
assets		Experimental support for cleaning up iOS memory after removing image elements from the DOM.
data		A full-blown data() method, capable of storing arbitrary objects in memory.
deferred		Provides $.Deferred promises API. Depends on the "callbacks" module.
callbacks		Provides $.Callbacks for use in "deferred" module.
selector		Experimental jQuery CSS extensions support for functionality such as $('div:first') and el.is(':visible').
touch		Fires tap– and swipe–related events on touch devices. This works with both `touch` (iOS, Android) and `pointer` events (Windows Phone).
gesture		Fires pinch gesture events on touch devices
stack		Provides andSelf & end() chaining methods
ios3		String.prototype.trim and Array.prototype.reduce methods (if they are missing) for compatibility with iOS 3.x.

Contributing

Please read our contribution guidelines for information on how to contribute.

Get in touch:

• @zeptojs

Write documentation

Zepto docs are written in Markdown and live in the "gh-pages" branch. They are published on zeptojs.com.

You can use GitHub's web interface to make quick changes to documentation for specific Zepto features (example: ajaxSettings). This will submit a pull request to us that we can review.

Report a bug

1. Check if the bug is already fixed in the master branch since the last release.
2. Check existing issues. Open a new one, including exact browser & platform information. For better formatting of your report, see GitHub-flavored Markdown.

Running tests

You will need to install PhantomJS. On OS X, that's easy:

$ brew install phantomjs

To run the automated tests:

$ npm test

To run a test server, which you can hit with your browsers and devices:

$ npm start

Go to http://your-ip-address:3000/ on your browser and follow the instructions. For your convenience test failures and exceptions will be reported to the the console you started the test server in (as well as the browser console if available).

zepto's Issues

Handle JSONP with getJSON

To allow for some cross domain ninjary.

find() doesn't always work on iOS 3.0

repro url

• http://dl.dropbox.com/u/1227871/bugs/find/index.html

repro

1. use iOS 3.0
2. tap "more"
3. nothing happens

expect

1. additional rows in the table are shown

console error

I downloaded version 3.2.1 of Safari, the error message shown in the console is:

Value undefined (result of expression this.dom.map(function (el)
{
    return $$(el, selector);
}).reduce) is not object.
http://dl.dropbox.com/u/1227871/bugs/find/zepto_0.3.js (line 63)

I think this is same error message reported in the mobile safari console, however I'm not sure because the mobile console truncates the message.

Thanks

Untitled

.offset() returns nothing in iOS 3.1.2

Yep, it's completely empty in iOS 3.1.2, works fine in Chrome etc but in mobile safari iOS 3.1.2 = not working =P

.css('property') returns nothing

.css('property') returns nothing if you don't actually set the property first with zepto, ex:

$(someobj).css("-webkit-transform", "translate3d(0px,0px,0px)");

If we now do alert($(someobj).css("-webkit-transform"));
We get the propety, but if we set the property in our stylesheet it would return nothing, tested in Chrome and iPhone 3gs

Merge pull request #83 from matt1/zepto

The new code you added into touch.js causes the swipe to get fired off when you double tap; or if you tap once, every other tap after that.

Removing the new code seemed to have fixed this issue.

empty() should remove event handlers

jQuery's fn.empty() removes all event listeners as well as DOM elements from the given selector. Useful when re-rendering parts of a UI.

example.html and anim() are inconsistent

The test

in example.html does not rotate, traced to how anim() parses the parameters that it is passed (Leaving aside the missing ../src/fx.js)

As the function anim() in fx.js no longer has any string handling it can't deal with the test case in example.html (i.e. where the function is passed the string 'rotate(720deg)'. anim() will give a (correct) result if the input properties are passed in object form i.e. {rotateZ: '720deg'}

Suggest that example.html be modified as follow:

<script src="../src/zepto.js"></script> <script src="../src/fx.js"></script> <script> $('div').anim({rotateZ: '720deg'}, 0.5, 10); </script>

Does this make sense (or was the intention that anim() be able to handle either strings or object properties, in which case it would be anim() that needed to be fixed...

$(element).dom[0]

Is the .dom necessary?
It would be a lot more convinient to use the jQuery syntax $element[0]

Thanks, Ran

A Zepto and JQuery Middleground

Issue may be revisited latter...

doubleTap(); for AJAX loaded elements

it looks like the $('some selector').doubleTap(function(){ ... }); is not working for AJAX loaded elements

how to combine it with live() ?

Thanks in advance !

zepto + backbone error.. can't repro in jquery 1.4.4

here's a gist with the info i could collect on it..
https://gist.github.com/749108

I know it's lame to lay every problem with backbone + zepto at your feet (I've brought the issue to the attention of the crew in #documentcloud, as well).. just curious if anyone with more expertise can nail down where the problem lies (backbone, zepto or my application code).

Thanks.

a datepicker: is it in the scope of zepto?

Hi
What are your thoughts on including a datepicker that really rocks into Zepto.
It is essentially the reason I use jQuery in one of my projects - but I want to throw that out.

Or maybe there is a library of choice out there that I have missed. Would be grateful for your feedback

Jerky / sticky scrolling

I'm finding on the iPhone when I scroll my pages they seem to stick initially, and don't get as much momentum as normal. Only when including either zepto.js or zepto.min.js

I'm wondering if trying to listen for touchstart events is tripping up the normal browser behaviour (even though I haven't attached any touchstart events).

We tested with several different iPhones (both iOS 4.2.1)

Including a parameter to allow events to be caught in the capturing phase

Could bind support event capturing thus:

$("#elementId").bind("click", callbackFunctionName, true);

Where "true" means "use capturing" please?

Looking at the source code event listeners are always added with useCapturing set to false:

element.addEventListener(handler.e, delegate || fn, false);

Zepto support for BlackBerry Webkit (BlackBerry 6)

BlackBerry 6 is, by all accounts, an excellent browser.

I've been developing a webapp for iPhone, Android, and BlackBerry 6. I've found this version of BlackBerry to be surprisingly good.

Zepto doesn't support it for at least the swipe event. Any chance of support in the future?

Like the project, curious about direction

Hi, I think this project fills a much needed niche for having a fast lightweight JavaScript framework for mobile webkit browsers. Although I'm not sure if 2k is a worthy goal, i.e. I don't think the issue with mobile js frameworks is size, IMHO its achieving maximum performance . I've just finished developing a fairly large HTML5 Ajax app with SenchaTouch and found it to be horrendously slow. I've pretty much given up on SenchaTouch and am going to try again with just the fastest .js components I can find which is why I like your project.

I also like Underscore.js (and its perf goals) and at the moment there is only a little overlap but I'm just curious what zepto's strategy will be: Whether it will stay as a good compliment library with it? or whether it simply incorporate more of its features? or to just has a binding to Underscore.js for its features?

Also I'm pretty much re-thinking all my Ajax development (with the hope to achieve better perf) and I'm curious what you're thoughts are (since you vast experience with js perf) on whether it would be better for performance if I was to say just maintain a single click/touch event handler: e.g.:

    <span data-cmd="createCustomer">add</span>
    <span data-cmd="editCustomer/1">edit</span>
    <span data-cmd="deleteCustomer/1">delete</span>

    globalClickOrTouchEventHandlers: {
       /* list of all event handlers interested in receiving the event */
       "addCustomer": [functions(){}, ...]
       "editCustomer": [functions(){}, ...]
    }

Forgetting for a moment the API to un/register the event handlers, I'm just curious whether having this approach of just having a single global event handler for clicks/touches (IMHO the most common on mobiles) that just checks if there is a 'data-cmd' attr on the element and calls the registered event handlers if any, would yield a noticeable perf improvement over the conventional approach of un/registering DOM event handlers for each element?

Uncaught TypeError: Cannot call method 'removeChild' of undefined

I learning backbone.js and swapped out jQuery with Zepto (0.4) in the todo list demo app (http://documentcloud.github.com/backbone/examples/todos/index.html) .

Commented out usage of fadeIn() and fadeOut() on tooltip but get error: Uncaught TypeError: Cannot call method 'removeChild' of undefined when deleting an item.

Error is caused by $(this.el).remove(); in todo code, I found that in zepto.js it is caused by last block of code (element.parentNode.removeChild(element);) which is at the very bottom.

As I'm not sure what this "cache" code does so interested to learn.

Full jQuery feature emulation

I know it's not a project goal..
Still, it's a need that I personally have and probably other developers do too.

Has anyone tackled this?
Zepto guys, what are your thoughts (or plans) on this?

In my project I try to switch to Zepto.js seamlessly, minimizing code refactoring. I privately enhanced the script to support:

Animate
$obj.animate(props, dur, easing, callback)
Trim
$.trim(string)
Val
$obj.val([value])
Create element
$('<tag attribute='value />')
Window object
$(window)
Parent
$obj.parent()

And I plan including - unbind, replaceWith and others I may need for my current project.

I'd be happy to share my current progress with everyone.
Cheers, Ran Ben Aharon {[email protected]}

attr() behaves differently than jQuery with text input elements

Using jQuery().attr('value') on a form input element with type='text' returns the current value of entered in the element.

The zepto version of attr('value') returns undefined with called on a text input element like

<input id="element_id" type="text">

and always return the value of the value attribute rather than the entered on a text input element like

<input id="element_id" type="text" value="some val">

The root of the problem is the use of element.getAttribute to return the value of elements. The current value of the input element is not reported to the DOM, so getAttribute is unable to return the current value.

It is possible to get the correct value of the element using the following as a workaround.

$('#element_id').dom[0].value

add a simple .delay() function

Why not adding a simple .delay() function which will do setTimeout

Issue with .parent() method

So I have a simple code:

      $(element).bind("click", function(evt){
        console.log($(this).parent());
      });

and that is giving me the error:
Object # has no method 'parent'

Support for .end() and .andSelf()

The thing I most miss about jQuery's chaining syntax is .end(). Specially when there is a very long chain.

Is there any way we can inject the previous Zepto object as a property of new Zepto Objects.

I was thinking of implementing the .end() and .andSelf() methods,
but unlike jQuery, where a prevObject is injected into new jQuery objects by the pushStack method, Zepto does not have anything akin to pushStack.

Any pointers in that direction would be helpful.

If we can augment the Zepto Object, then implementing .end() is as trivial as return this.prevObject;. And .andSelf() could also inject prevObject into the current Zepto collection.

Thanks.

$('html')?

A very important feature for jQuery users.

Thanks, Ran

$(document).ready is not implemented

While documented, $(document).ready doesn't seem to be implemented yet.

iOS 3.1.3 - Error: SYNTAX_ERR: DOM Exception 12

My client is getting this error right off the bat on her ancient iPhone running 3.1.3.

From her debug console she gets...

JavaScript Error on Line 2
http://jordandobson.com/loyola/_js/zepto.min.js
Error: SYNTAX_ERR: DOM Exception 12

It happens on both these pages...

http://jordandobson.com/loyola/oh/

http://jordandobson.com/loyola/rfi/

I'm not sure what would do this... but is there anything I can do to debug this issue with her?

• Jordan

[req] toggle class

A toggler for a class (in prototype: toggleClass) would be nice like in other frameworks

Untitled

S3 access denied

I tried to download you zip, but S3 doesn't like me:
http://cloud.github.com/downloads/madrobby/zepto/zepto-0.1.1.zip

AccessDeniedAccess Denied0412F2D345E1CF546eMQ8dwC7I8F5j0W21FvrDvDQwC0OwQeeImpdnldIPVjpidJILzWd3I+bnlc7gnl

Permissions?

Trigger click event on a radio button input doesn't (always) select it.

I have a radio button inside an li. This should work (and actually triggers the event handler I have assigned to the input) but skips the default behavior of selecting the input. I have e.stopPropagation in that event handler, but it doesn't seem to matter with or without it.

        $(".smList_PaymentPlans li").bind("click",function(e){
           $(this).find("input").trigger("click");
        });

Can't preventDefault on triggered events

If I trigger a click event on a anchor link element that I have set it to do something else than following the href when triggered programmatically the e.preventDefault() is ignored.

EXPLAIN?

Can someone explain to me how you guys managed to fix the :active pseudo css classes in iPhone?

without your framework none of my a:active styles work... and with it they do...

I don't understand!?

Ruby-style String interpolation

yay || nay?

add ability to reset css properties

Currently I found it impossible to reset certain CSS properties. I extended the function like: http://pastebin.com/5tp2dJxP to regain this feature. But this should be optimized & implemented

Adobe Air?

I don't see much for support of Adobe Air, which has a Webkit engine. Any potential issues with using Zepto for Air development?

Unbind?

Would it be possible to emulate jQuery's unbind call with no arguments, that is call $('div').unbind() and remove all the current event listeners attached to the object? Perhaps it's already possible and I'm not seeing it.

anim + event end callback support

This is not an issue per say but more of a feature request. It would be nice if anim() took a function callback for when the animation ended. So just a binder on webkitTransitionEnd.

Workaround for mobile safari's innerHTML bug

Zepto's .html(myHtmlString) is rendered somewhat on mobile safari because of the innerHTML method (most likely a race condition that prevents the DOM from being populated correctly. As usual with race conditions the problem can be reproduced on a somewhat sporadic basis).

The bug is documented here with an example http://bit.ly/ev5BI0. The workaround suggested in the link is clunky, but I haven't seen anything else that would work. Would it make sense to incorporate it in zepto?

Animations should allow 0 for duration

Currently .anim({translateX:100},0) executes the animation over 0.5 seconds instead of applying it immediatly (a.k.a behaves like .anim({translateX:100},0.5))

live() event handler problem

I've noticed something strange, could be my fault, but the live() event handler seems to have problems with using $(this) for example:

This works:

$('p.yay').live('click', function(){ alert("Clicked a p.yay element!") });

But this does not:

$('p.yay').live('click', function(){ $(this).hide() });

(also returns an error in the console)

$.ajax() should return the xhr object

$.ajax() should return the xhr object - this would improve jQuery compatibility (see at http://api.jquery.com/jQuery.ajax/)

multiple classes + addClass()

it looks to me that the addClass() function removes other existing classes, rather than allowing multiple classes.

Can't get $.post to send parameters

I've tried using $.post to send variables to the server either using a JS object or a string but it seems I cannot get it to work I keep getting an empty $_POST array. Maybe I'm doing something wrong but I really cannot get it to work:

$.post('/helper/login.json',
    'var1=' + _var1 + '&var2=' + _var2,
    function(data){
        if(data.logged)
        {
            window.location = window.location;
        }else{
            alert('Wrong username or password');
        }
    }, 'json');

I also tried setting data as { var1: _var1, var2: _var2 } but also a no go.

Two versions of remove() ?

In Zepto, a method ($.fn.remove) is defined in zepto.js. In assets.js, another method with the same name is defined. Is there a reason for this?

1px GIF results in broken link

The "smaller" 1px GIF in commit 2e7b461 results in a broken link in most other browsers than Chrome. If we want that result then we might as well use 'data:image/gif;base64,' or maybe ''?

Description of delegate

The README file says:

$('some selector').delegate('some subselector', 'touchstart', function(event) { ...

The callback function should be:
... function (TARGET, event) { ...

detect.js bug

Hi!

The line 18 in detect.js has potential bug:
version: navigator.userAgent.match(/WebKit/([\d.]+)/)[1];

I.e. in FF it gives error, as the match result is null. Better be checked before accessing elements.

More over, I suppose the whole snippet:

$.browser = {
  webkit:true,
  version: navigator.userAgent.match(/WebKit\/([\d.]+)/)[1];
}

looks strange. Probably if you only support webkit-based browsers, it should at least degrade gracefully. Thnx

$.fn.load checks for this.length rather than this.dom.length (with patch)

$.fn.load currently checks for this.length rather than this.dom.length which results in the function existing without executing the AJAX call.

Patch attached below -

diff --git a/src/ajax.js b/src/ajax.js    
index cab1a0c..58dc9df 100644
--- a/src/ajax.js
+++ b/src/ajax.js
@@ -18,7 +18,7 @@

   $.fn.load = function(url, success){
     var self = this, parts = url.split(/\s/), selector;
-    if(!this.length) return this;
+    if(!this.dom.length) return this;
     if(parts.length>1) url = parts[0], selector = parts[1];
     $.get(url, function(response){
       self.html(selector ?

Handling of HTML boolean attributes

With this html:

<input type="text" required>

Calling $('input').attr('required') will return undefined. It should return true right?

Callback on anim function

The animate function should get a callback like the jquery animate equivalent.