EzDev.org

zepto

zepto - Zepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API Zepto.js: the aerogel-weight jQuery-compatible JavaScript library


Get position/offset of element relative to a parent container?

I'm used to working with jQuery. In my current project however I use zepto.js. Zepto doesn't provide a position() method like jQuery does. Zepto only comes with offset().

Any idea how I can retrieve the offset of a container relative to a parent with pure js or with Zepto?


Source: (StackOverflow)

how does jquery fadeIn work? Doing the same with animate()

I love the simple jQuery fadeIn() function, especially because it works without having to set any opacity values to the selector! Just setting it to display:none and using fadeIn() always works.

However I'm not using jQuery for my current project but zepto.js. Zepto only comes with animate() and not with fadeIn().

I wonder how I can create the same behaviour with the animate function! What properties do I have to animate here?

$('#selector').animate({
    display: "block",
    opacity: 1
}, 500, 'ease-out')

Thank you in advance


Source: (StackOverflow)

Choosing library for UI widgets for mobile app

I've been developing a mobile app with AngularJS and zeptoJS but the combination of those two is not providing any UI widgets

I've seen this topic: Is there a UI library for angularjs for use in a phonegap app?

but I'm looking for more answers ( really, LungoJS is the only answer? and I'm not going to use jQueryMobile. ). Are there any other light libraries ?


Source: (StackOverflow)

What is the difference between Zepto and jQuery 2?

There are those two similar projects:

Zepto.js

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

jQuery 2.0

jQuery 2.0 beta: Here is your taste of the future, a jQuery that can be faster and smaller without the need to support IE 6, 7, or 8. It’s a great choice for platform-specific HTML applications.

Is this only about performance or do they follow different approaches?


Source: (StackOverflow)

How to implement my own history stack in a single page mobile web application?

I have a single-page mobile application developed with Backbone and Zepto.

It works correctly with the back/forward buttons in the browser.

When the user navigates to a page, the new content slides in from the right as the old contents slides away to the left (and out of the viewport). I want the same thing to happen if the user presses the "forward" browser button. This all works.

I've got a class that I add to the body element navigate-back that will flip this behaviour, so when the user navigates back with the browser's back button, they see the content sliding back in from the left and the other content sliding into the right. Basically just the opposite of going forward.

I need to detect if the user is navigating backwards so I can invoke the alternate behaviour. I have tried implementing my own history stack, but I've ran into lots of problems where sometimes it marks a forward as a back navigation which ruins the visual cue. It's descended into a kludge of hacks now and probably would only embarrass me if I posted it.

What is the best way to implement my own history stack so I can detect if the user is navigating forward/back in the context of a single-page Backbone mobile application?


Source: (StackOverflow)

How do I POST an array of objects with $.ajax (jQuery or Zepto)

I'd like to POST an array of objects with $.ajax in Zepto or Jquery. Both exhibit the same odd error, but I can't find what I'm doing wrong.

The data saves to the server when sent using a test client like 'RestEasy', and I can see the request getting mangled in the browser's net panel, so I believe JS is the culprit.

If I send an array of objects as the data property of a POST, they are not properly sent.

Data object:

var postData = [
    { "id":"1", "name":"bob"}
  , { "id":"2", "name":"jonas"}
  ]

Request:

$.ajax({
  url: _saveDeviceUrl
, type: 'POST'
, contentType: 'application/json'
, dataType: 'json'
, data: postData
, success: _madeSave.bind(this)
//, processData: false //Doesn't help
});

Request body as seen in the browser:

"bob=undefined&jonas=undefined"

This can be seen more directly by using the $.param method that both jQuery and Zepto use to prepare POST data.

$.param(
  [
    { "id":"1", "name":"bob"}
  , { "id":"2", "name":"jonas"}
  ]
)
// Output: "bob=undefined&jonas=undefined"

So it seems like the preparation that these libraries do for complex post data is different than I expect.

I see this answer, but I don't want to send the data as a query param as I'm POSTing lots of content. How do I send an array in an .ajax post using jQuery?

What is the correct way to send multiple objects over POST using jQuery/Zepto?

Using $.ajax({... data: JSON.stringify(postData) ...}) sends non-mangled content, but the server doesn't like the format.

Update: Seems like JSON.stringify sends correctly formatted content. The issue is that the server side is very, very specific about the structure of the object that it wants. If I add or remove any properties from the object, it will fail the whole process rather than using the properties that do match. This is inconvenient because it's nice to use server-sent content as a view model, but view models get changed. ...Still working on the best solution.


Source: (StackOverflow)

Zepto fallback to jQuery

I'm using ZeptoJS for my web app, but I'd like to fall back to jQuery if the browser doesn't support Zepto. Since IE is the only major browser not supported at the moment, I'm tempted to detect IE:

if(navigator.appName == 'Microsoft Internet Explorer'){
    // load jquery
} else {
    // load zepto
}

but I'd prefer to specificly detect Zepto support and use jQuery in other cases. Is there a feature detection way to do this?


Source: (StackOverflow)

jQueryMobile on Zepto.js?

I'm wondering if someone has tried already to port jQueryMobile on top of Zepto.js (http://zeptojs.com/) instead of the required jQuery?


Source: (StackOverflow)

Backbone.js Memory Management, Rising DOM Node Count

Situation: I'm working on a pretty decently complex single page Backbone app that could potentially be running for 8-12+ hours straight. Because of this, there's a need to ensure that the application won't leak and have a reputation for crashing after X hours or slow down dramatically.

The Application: The app is built on Backbone (mv*), Zepto (similar to jquery), Curl (amd loader) & Mustache (templating).

Problem: I've just conquered the event listeners. The garbage collector seems to be doing a fine job cleaning these guys up, but the DOM Node Count won't stop climbing.

Questions:

  • Is there a proper way to dispose of DOM Nodes so that they will be properly garbage collected, or is this DOM Node Count a running total that will never decrease?
  • Does anybody know of any of these frameworks to poorly handle DOM Nodes? Possibly Mustache?
  • Is the DOM Node Count even a reliable figure?

I'm really just looking for a head start on my adventure to stop these DOM Nodes from rising. Any help or guidance would be greatly appreciated (and accordingly upvoted).

I assumed that once the event listeners were properly disposed of that the DOM Node Count would just manage itself, but this doesn't seem to be the case.

Tests


Poorly Managed DOM Node Count

  • First Test: 6.8 minutes, 110,000 DOM Nodes

Edit: Without the Timeline recording, I reran the same script to randomly mash links and took a screenshot at around the 7 minute mark. After GC came through I had these results.

Poorly Managed DOM Node Count

  • Second Test: 7.1 minutes, 141,000 DOM Nodes (Without the timeline recording)

Edit: After Fix:

DOM Node Count under control After Upgrade Backbone and using listenTo and stopListening everywhere

  • 7 minutes: 6,926 DOM Nodes (see marked answer below).
  • 20 minutes: 6,000 DOM Nodes, 20 Event Listeners, Memory 20 MB.
  • 25 minutes: 11,600 DOM Nodes, 44 Listeners, Memory 21.7 MB.
  • 28 minutes: 9,000 DOM Nodes, 22 Event Listeners, Memory 21.7 MB.
  • 30 minutes: 13,700 DOM Nodes, 123 Event Listeners, Memory 21.7.
  • 31 minutes: 7,040 DOM Nodes, 30 Listeners, Memory 21.7.

Source: (StackOverflow)

View event listeners - Javascript

I'm wondering if it is possible to view

1. How many event listeners

2. What type of event listener

On a single web page.

Reason being is becuase im using off(); method.

I'm using this framework, which is basically jQuery but not.

Yeah, I'm using off but the even't isn't removing and and I have a feeling there is more than one eventListener on the element.

If it is not possible with javascript, it is possible in the browser?


Source: (StackOverflow)

Is Zepto.js only to be used for mobile web apps or can it be used for desktop just like jQuery?

The Zepto.js website says:

Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax.

Is it only recommended for use with apps that will be used on mobile devices or can it also be used in traditional computer browser web apps as well? What are the downsides of doing so?

I use jQuery a lot in my regular web apps (for computer browsers) and I've realized (after finding Zepto.js) that I don't always use all of jQuery's features, so Zepto.js is perfect for what I do.

Also, why is there focus on the 'WebKit' engine? Does it not work with mobile Internet Explorer on Windows Phone 7, Firefox Mobile on Android or Opera Mobile?

EDIT: The presence of $.os.android in addition to $.os.ios indicates that there is support for non-iOS platforms, so the last question is answered!

EDIT (final): I guess the real question is "Can the Zepto.js library, intended for use on mobile WebKit-based browsers, be used as a lighter-weight alternative to jQuery for the desktop also?" The answer is no.


Source: (StackOverflow)

How to test for mobile webkit

I'm looking to build a new website and want to take a responsible "mobile-first" approach. One tenet of this methodology is to only load what you need, and to avoid including large wasteful libraries and frameworks until you actually need them.

For this I intend to use modernizr2 to test for features and then load only required files and libraries.

On the javascript side, I'm really interested in using something like zepto.js (http://zeptojs.com/) which is a tiny javascript library (2-5k) optimized for mobile webkit (and mobile webkit alone) while maintaining a jquery compatible syntax. It's also been designed to be "hot-swappable" with full-on jquery. So my strategy is (in pseudo-code):

  • Test for mobile webkit
  • If(true) load zepto.js
  • if(false) load jquery

But now my question is: what (future proof) technique would you guys recommend for detecting mobile webkit, preferably in a pure javascript way (without using jquery, plugins or other libraries) and that could be integrated with modernizr's testing API?


Source: (StackOverflow)

How to fallback from Zepto, to Google CDN jQuery, to local jQuery?

I've seen pages that instruct or ask how to fallback from Zepto to jQuery (especially for IE), as here on SO and here on Zepto.js official page.
I've also seen examples on how to fallback from Google-hosted jQuery to a local site jQuery, as in Modernizr.load doc page.

My question is, how do I put the two things together? Possibly also without using Modernizr.load, just using proper <script> blocks?

Here's what I came up with, but it seems IE never finds the Google hosted version. Also, I'm not sure the Zepto = jQuery assignment works properly.

<script>
    document.write('<script src=' +
        ('__proto__' in {} ? 
            'js/vendor/zepto.min' : 
            'https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min') +
        '.js><\/script>');
</script>
<script>
    if (window.jQuery) { 
        window.Zepto = window.jQuery; /* let jQuery alias Zepto */ 
    }
    else
    { /* here jQuery could be rightly undefined because Zepto is loaded, 
         so this could be wrong. */
        document.write('<script src=' +
            'js/vendor/jquery-1.8.0.min' +
            '.js><\/script>');
    }
</script>
<script>
    if (window.jQuery) { 
        window.Zepto = window.jQuery; /* let jQuery alias Zepto */ 
    }
    else
    {
        /* same problem as before */
        console.error('Zepto nor jQuery available!');
    }
</script>

Is there a better way? TA

Edit

After @Ashfame answer, this is what I've used:

<!-- Load local Zepto.js or (as a fallback) jQuery from Google CDN or (as a fallback) local jQuery -->
<script>
    document.write('<script src="' + ('__proto__' in {} ? 
        'js/vendor/zepto' : 
        'http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery') + 
        '.min.js"><\/script>')
</script>
<script>
    window.Zepto || window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>');
</script>

I could not use the protocol-less/scheme-less URL of Google CDN as for some reason it didn't work on my local IE9 (it waits a lot, then always falls back to local).

I did not aliased anymore Zepto with jQuery: just used $ in JS code.

I don't seem to experience any problem related to jQuery loading out of order w.r.t. dependent code.


Source: (StackOverflow)

How to use requirejs with zepto

I can't seem to get zepto to work with requirejs.

Here are my files

main.js

require.config({
  paths: {
    zepto: 'libs/zepto/zepto.min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    cordova: 'libs/cordova/cordova-2.1.0',
    history: 'libs/history/history',
    historyZ: 'libs/history/history.adapter.zepto'
  },
  shim: {
        zepto: {
          exports: '$'
        },
        backbone: {
            deps: ['underscore', 'zepto']
        }}
});

require([

  // Load our app module and pass it to our definition function
  'app',
], function(App){
  // The "app" dependency is passed in as "App"
  App.initialize();
});

app.js

define([
  'zepto',
  'underscore',
  'backbone',
  'router' // Request router.js
], function($, _, Backbone, Router){
  var initialize = function(){
    // Pass in our Router module and call it's initialize function
    Router.initialize();
  }

  return {
    initialize: initialize
  };
});

router.js

define([
  'zepto',
  'underscore',
  'backbone',
  'views/dashboard'
], function($, _, Backbone, DashboardView){
  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
        ''      : 'showDashboard',
    }
  });

  var initialize = function(){
    var app_router = new AppRouter;
    app_router.on('showDashboard', function(){
        // We have no matching route, lets just log what the URL was
        //console.log('No route:', actions);
        var dashboardView = new DashboardView();
        dashboardView.render();
      });
    Backbone.history.start();
  };
  return {
    initialize: initialize
  };
});

You get the picture.. But when I run this all, I get this in Chromes console:

GET http://localhost/SBApp/www/js/jquery.js 404 (Not Found)         require.js:1824

and a script error (I threw in parenthesis bc this wouldnt let me post.)

and in Firefox with firebug, it spits out a scripterror

Has anyone had success configuring zepto with require and can throw me some help?


Source: (StackOverflow)

How to implement jquery like slideDown() in zepto

I am using zepto library for my mobile web site. I have recently learnt that zepto does not have slideDown() plugin like jquery. I would like to implement the same for zepto.

I have tried one on jsfiddle (http://jsfiddle.net/goje87/keHMp/1/). Here it does not animate while showing the element. It just flashes down. How do I bring in the animation?

PS: I cannot provide a fixed height because I would be applying this plugin to the elements whose height property would not be known.

Thanks in advace!!


Source: (StackOverflow)