DailyJS

DailyJS

The JavaScript blog.


Tagfullscreen
Featured

testing routing fullscreen

Page, testr.js, screenfull.js

Posted on .

Page

If I had to place a bet on the most activity by one person on GitHub, I'd bet on TJ Holowaychuk. His latest project is Page.js (GitHub: visionmedia / page.js, npm: page), which is a client-side router. The routing syntax works like Express, so variables are denoted by :name, and the * route can be used to catch 404s. In this case, 404 is open to interpretation.

page('/', index)  
page('/user/:user', show)  
page('/user/:user/edit', edit)  
page('/user/:user/album', album)  
page('/user/:user/album/sort', sort)  
page('\*', notfound)  
page()  

It's actually a very lightweight project, based around pushState, but it includes detailed comments and Mocha tests.

testr.js

testr.js (License: MIT) by Matt Fysh is for unit testing RequireJS modules. Use it with your favourite test framework to test both stubbed and script-loaded dependencies:

testr('path/to/module', stubs);  
testr('path/to/module', useExternal);  
testr('path/to/module', stubs, useExternal);  

The author has written some projects that use testr.js -- asq and after both use it with Jasmine.

screenfull.js

screenfull.js (GitHub: sindresorhus / screenfull.js, License: MIT) by Sindre Sorhus is another wrapper around the Fullscreen API. The semantics are similar to the specification, but a lot simpler -- the README has a comparison with "vanilla" JavaScript which is several lines of code. Using screenfull.js, only screenfull.request() is required to trigger fullscreen mode.

The library can do other things as well: a single element can be fullscreened, or events can be used to detect a change to fullscreen mode.

Featured

jquery plugins validation jqueryui fullscreen

jQuery Roundup: jQuery UI 1.8.20, jq-quickvalidate, Fullscreen Plugin

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery UI 1.8.20

jQuery UI 1.8.20 has been released. This release marks the twentieth maintenance release, and includes bug fixes for Draggable, Sortable, and Datepicker.

jq-quickvalidate

jq-quickvalidate (License: GPLv2, Demo) by Cedric Ruiz is a form validation plugin. The author has provided CSS and icons, so it's easy to drop into a site.

There are built-in validators, but custom ones can be added using a regular expression or function. Basic usage looks like this:

$('#my-form').quickValidate({
  inputs: {
    username: {
      filters: 'required username exclude',
      data: {
        exclude: ['Paul', 'Mike']
      }
    },
    'pass': {
      filters: 'required pass'
    }
  }
});

Fullscreen Plugin

jQuery Fullscreen Plugin (License: MIT) by Klaus Reimer is a jQuery-friendly API for working with the fullscreen mode present in supporting browsers. Vendor-specific versions are supported for WebKit and Firefox.

It can make an element or the entire document fullscreen:

$(document).fullScreen(true);
$('#myVideo').fullScreen(true);

It can also exit fullscreen, or check if fullscreen is currently active. A related plugin is jquery.fullscreen.js, which provides handling for various fullscreen-related events.

Featured

jquery templating plugins fullscreen

jQuery Roundup: 1.7 RC2, jQote2, jquery.factory, Native Fullscreen

Posted on .

Note: You can send your plugins and articles in for review through our [contact form](/contact.html) or [@dailyjs](http://twitter.com/dailyjs).

jQuery 1.7 RC2

jQuery 1.7 RC2 is out,
with a Halloween-themed announcement:

In RC2, we fixed a tricky problem that sometimes caused Internet Explorer 8 to go full-zombie when jQuery was loaded. Appropriately enough, the crash was related to creating a detached element that we were using to perform feature detection. IE8 seems frightened to a crashy death when it sees a detached body. If you still see any problems with IE8 crashes, please let us know.

It sounds like IE8 is the new IE7 (which was the new IE6)!

jQote2

jQote2 (GitHub: aefxx / jQote2, License: MIT) by aefxx is a
template plugin that works a little bit like
.tmpl().

The author has written jQote2 API
documentation
. I picked out the
Fibonacci example because it demonstrates some interesting features of
this plugin. Given this HTML:

    <![CDATA[
    <%= ( ( this.n == 0 ) ?
            0 : ( this.n == 1 || this.n == 2 ) ?
                1 : parseInt($.jqote(fn, {n: this.n-1})) +
                        parseInt($.jqote(fn, {n: this.n-2})) ) %>
    ]]>

... and this JavaScript:

$(function() {
  var lambda = $.jqotec('#template');

  $('#fibonacci li').each(function(i) {
    $(this).text($.jqote(lambda, {n: i}));
  });
});

then an unordered list displaying the Fibonacci sequence will be
displayed for the number of list elements in the template.

Despite having some advanced features, this plugin performs well when
compared to other templating plugins. The benchmarks compare Srender,
mustache.js, Underscore, jQote2, Tempest, and nano, with Underscore and
jQote2 coming out on top.

jquery.factory

jquery.factory by iwyg is a class constructor library. Objects can be created using the
factory function that has the following signature:

var MyClass = $.factory(ParentClass, constructorFunction, prototypeObject);

It comes with documentation and unit tests. It doesn't yet offer much
that goes beyond prototypal inheritance, but the author only published
it two days ago so perhaps there's more to come.

Native Fullscreen

In Native Fullscreen JavaScript
API
,
John Dyer writes about the history and current state of browser full
screen support, complete with a demo and jQuery plugin.

The API is still heavily in flux especially since the W3C joined in this week. I spent some time working through the differences to implement FullScreen in MediaElement.js HTML5 video player, and it’s working great in Safari 5.1+, Chrome 15+, or Firefox Nightly.

The resulting code can be used like this:

if (fullScreenApi.supportsFullScreen) {
  myButton.addEventListener('click', function() {
    fullScreenApi.requestFullScreen(someElement);
  }, true);
}