This is a great update for this component.

You can now control the player also when it’s set as background!

Give it a try!

Here’s an excerpt:

London Olympic Stadium holds 80,000 people. This blog was viewed about 630.000 times in 2011. If it were competing at London Olympic Stadium, it would take about 8 sold-out events for that many people to see it.

Click here to see the complete report.

As most of you know there are new features in CSS3 that let you animate HTML elements using just CSS.

Using CSS3 “transition” you can control which property to apply, the duration of the transition, the transition timing and the transition delay.
The transition considers also the “transform” parameter specified in the CSS class.

Actually jQuery .animate() method doesn’t consider the CSS3 support and it applies the animation using javascript.

That’s why I realized the mb.CSSAnimate() simple method that uses CSS3 instead of javascript to animate HTML elements; it provides a callback function fired once the transition ends as jquery.animate() does and it fallback to jquery.anomate() if “transition” is not supported by the browser.

Why should we consider to use CSS3 instead of javascript to animate HTML elements?

Well… First CSS3 animation use less CPU than javascript; the UX is smoothness (especially on mobile devices); on iOs is hardware accelerated; you can animate also background color, rotation, scale, skew or any of the CSS properties available that the default .animate() method doesn’t provide.

What happens if the browser doesn’t support CSS3 using mb.CSSAnimate()?

Actually the mb.CSSAnimate() method has a fallback to the jquery.animate() one; of course if you were animating a “transform: rotate()” property you’ll lose it .

How can I use specific prefixed CSS property with mb.CSSAnimate()?

To use specific browsers property with mb.CSSAnimate you just need to remove the prefix from the property.
For example if you want to animate the “-webkit-transform: rotare(180deg); -moz-transform: rotare(180deg); -o-transform: rotare(180deg); -ms-transform: rotare(180deg)” property here is how you should call the method:

$(myObj).CSSAnimate({"transform": "rotate(180deg)"},1500,"ease-out", "all", callback);

Some useful links:

When can I use CSS3 Transitions?: http://caniuse.com/css-transitions;
MDN transition: https://developer.mozilla.org/en/CSS/transition
CSS 3 Transitions: http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
Understanding CSS3 Transitions: http://www.alistapart.com/articles/understanding-css3-transitions/

Take a look at the demo:
http://pupunzi.github.com/jquery.mb.CSSAnimate/demo.html

Download:
https://github.com/downloads/pupunzi/jquery.mb.CSSAnimate/jquery.mb.CSSAnimate.1.0.zip

I’ll add documentation and a component page soon.

The jQuery mb.components family is growing up and a new tool to zoom images has been added.

I hope you like it and you enjoy it!

Here is the component page where you’ll find links to the demo page, to the download file and to the doc page:

http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-zoomify/

jquery.mb.extruder has been updated to version 2.3

This release fixes several bugs and introduce a new parameter to control the open on mouseover behaviour: “autoOpenTime” (0= do not open onmouseover – value in milliseconds)

Go to the component page or see the demo

I’m glad to announce that the new pupunzi.com site is out!

I really liked the site as it was before, and as it happens with all the changes,  I’m feeling both sad and happy… But everything must change with time.
This new site gets advantage of all the new HTML5 features (it works great with  “modern” browsers including IE9) and gives the idea of what it’s possible to do with the new web technology generation.

Previous path to components and sections are preserved to maintain all the trackback links unchanged; the graphic is completely new and striking; there are sounds ( you can turn off)  that automatically turn off once the page looses focus; there are tree more jquery plugins published and whaiting for you:

1. jquery.mb.bgndGallery
2. jquery.mb.miniAudioPlayer
3. jquery.mb.valueSlider

Take a look and let me know your impressions.

http://pupunzi.com

Did you know that Licorize has an API that you can use via javascript to get public bookmarks filtered by tags, projects, users?

If you are interested on showing your latest bookmarks inside your website, Licorize has a public API that let you retrieve them via a jsonp call.
On Licorize site there’s a section dedicated to the documentation quite exaustive; the API expose method to authenticate in Licorize via OAuth or XAuth, the GET and the SET methods (create, edit, delete strips) and few examples of use in Java and Objective-C/Cocoa.

But here I want to explain how you can insert public Licorize strips into your HTML page using the API via javascript (jquery).

First we have to define where the list of bookmark will be inserted into the DOM of our HTML page:

<div id="licorize_links" class="feeds"></div>

To retrieve the list of bookmarks from Licorize we need to make an ajax call to the proper API URL; this call will return a JSON object containing all the strips filtered by the parameters passed to the request. For example, if I want to get all my public strips, the URL will be:

http://licorize.com/api/1/users/pupunzi/strips/list.jsonp

Where:

http://licorize.com/api/1/ is the base API url
/users/ define the filter by user
/pupunzi/ is my user name in Licorize
/strips/ define the objects I want to get
/list.jsonp is the type of data to be returned

Some other example of URLs can be:

Get Licorize User Public Strips List: http://api.licorize.com/api/1/users/[username]/strips/list.jsonp
Get Licorize Public Project Strips List: http://api.licorize.com/api/1/users/[username]/[projectName]/strips/list.jsonp
Get Licorize User Strips – in Visible Projects – Filtered By Tag: http://api.licorize.com/api/1/users/[username]/tags/[tagName]/strips/list.jsonp
Get All Licorize Strips – in Visible Projects – Filtered By Tag: http://api.licorize.com/api/1/tags/[tagName]/strips/list.jsonp

The request needs some other parameters that we will pass as JSON object data:

var req = {
    "embedded": "yes", // define the type of use of the strips
    "millis": 0,
    // 0 means from now; it is a value int in milliseconds that define the date of the last saved strip we whant to get
    "limitResultTo": 10,
    // is the number of strips we want to get
    "orderBy": "asc"
    // or "desc" define the order of the retried strips
};

Here is the AJAX call:

$.ajax({
url: "http://licorize.com/api/1/users/pupunzi/strips/list.jsonp",
data: req,
dataType: 'jsonp',
jsonp: "__jsonp_callback",
jsonpCallback: "listCallback",
success: function(response) {
               var strips= response.strips;
               //here goes the code to parse the response...
        }
});

The JSON that will be returned (response) will contain several information; the part of this response we need for our scope is response.strips.

Each strip element contains all the DATA of the strip as JSON object:

{"type":"BOOKMARK",
  "id":3153587,
  "position":0,
  "millis":1305145392843,
  "lastMod":1305153539000,
  "creator":"Matteo Bicocchi",
  "title":"Free Music Archive: Experimental",
  "url":"http://freemusicarchive.org/genre/Experimental/",
  "tags":"experimental, music",
  "teamName":"Web technology - resources",
  "ownerName":"Matteo Bicocchi",
  "gravatarUrl":"http://www.gravatar.com/avatar/03604fe1ab8aedd7fd69ba097439593c?s=40&d=identicon",
  "thumbUrl":"http://s3.amazonaws.com/Licorize/thumbs/freemusicarchive.org/3b54a64dd887b428ded06cdf7850cdf0.jpg"}

Inside the “success” callback of the AJAX call you can now loop the strips, get the desired parameters and create the HTML structure:

var LicorizeContainer= $("#licorize_links");

for (var i in strips) {
var stripContainer= $("</pre>
<div>").addClass("stripContainer");</div>
<pre>

      var strip = strips[i];
var stripTitle= $("</pre>
<div>").addClass("stripTitle").html(strip.title);</div>
<pre>
      stripContainer.append(stripTitle);
      var ...

      LicorizeContainer.append(stripContainer)
}

Now that all the strips in the response have been parsed you can style them via CSS as you need.

For a working demo:

http://jsfiddle.net/pupunzi/62beA/

to know more about Licorize:

http://licorize.com

A good way to manage long list in short space!

jQuery.mb.verticalSlider let you show long list of elements managing pagination, it can work with elements already in the DOM of your page or loading them via ajax when needed. And it uses mouse wheel of course.

take a look!

What is it?

mb.ile is a work in progress framework that provides simple solutions for any HTML mobile applications.

Several bigs like jQuery, Dojo, jQTouch, extJs, etc. are developing their own framework for mobile applications, and we tested some of them to realize the client for our latest Licorize app.
Actually we adopted the jQuery mobile framework to develop it, but what we find out is that both jQuery mobile and jQTouch (the two we considered) have a strict approach that constrain the developing solutions to their point of view.
Just to give an example, our application (Licorize) is based on a template system to show different kind of strips (if you want to know more about it just take a look at http://licorize.com) and most of the links are  javascript calls that build on the fly the layout of the page getting content via an ajax call that returns a jsonp object. Well, jQuery mobile doesn’t allow this approach (all the link should point either to an element on the page or to an external file but can’t be a javascript method) and we had to hack  with some workarounds to obtain what we needed. Another problem we met is related to the header and footer behavior; we needed fixed position to maintain them in place while scrolling the content, as most of mobile applications do. The only solution jQuery mobile offers is a buggy method to hide them once the body is scrolling and then show them again when the scroll ends… Even if it could be a solution, the problem is that most of the times header and footer are lost…

The question is “Can we adopt a framework and at the same time have freedom on developing applications as we want?“; the answer is “No“. Any time we decide to adopt a framework for developing our applications we must accept its rules; but at the same time, a framework should impose as few rules as it can to let developers invent their solutions.

The great UI of jQuery mobile made by the jQueryUI team has itself many limitations; for example if you want a combo in a FORM to behave in the native way you can’t because the framework manipulate all the elements to preserve the GUI and there’s no way to exclude elements from this manipulation.
We are talking about an alpha release of the jQuery mobile framework of course, and we expect great things from the jQuery team; but I really needed to try a different approach on that matter.
So I decided to develop something that could fit the needs of our own HTML mobile Application.

What are the features?

1. Simple structure of the page:

A mb.ile page has:

• A header
• A main area
• A footer

Differently from the other frameworks available, you can set header and/or footer as fixed position on top and bottom of the visible area even when the content is scrolled.
This feature is provided by the integration of the excellent plugin iScroll made by Matteo Spinelli (http://cubiq.org/).

Here is the main structure:

<div id="mbPage">
<div id="header"><h1>mb.ile</div>
<div data-role="content">content goes here</div>
<div data-role="footer" data-type="default" id="footer">
<div class="buttonBar column2"><span >button 1</span><span >button 2</span></div>
</div>
</div>

Pages can be in-line on the main page (index.html) or loaded via ajax as separate pages content.

2. intelligent transitions

As the other frameworks mb.ile let you choose transitions to move across pages and it automatically applies its reverse once the back button is pressed.

Actually you have this animations:

• slide-left
• slide-right
• slide-up
• slide-down
• fade
• pop
• flip-left
• flip-right
• swap-left
• swap-right
• cube-left
• cube-right

And the way to call them is really simple:

<a rel="page" data-animation="slideleft" href="pages/animations.html">animations</a>

3.  GUI

The main scope of this framework is to let developers manage contents as they want; what I found really unconfortable with jquery mobile, for example, is the uncontrolled transformation of dom elements: when I need to insert a select and I would like to style it as I want, I found out that my select has become something else out of my control. The mb.ile framework provides a simple CSS file needed for the structure and a “theme” css for the demo application interface. no DOM manipulation for elements is applied.

4. Intelligent history

Every page loaded in the application is stored into an “history” array and takes care which transition has been used and what page it’s caming from. That way the back button knows exactly what to do and brings you back to the right page even with deep structures.

5. Extensions

The framework cames with some useful extensions like:

• Drag and drop feature
• Sortable feature
  Both provided by the implementation of jQueryUI on touch devices of jason kuhn (http://jasonkuhn.net)
• Sliding headers
• Panels
• Selectable list lines
• Buttons
• …

You can easily implement your own extension and initialize them in a really simple way when needed.

Take a look

Here is a short video of mb.ile in action:

Here is a live demo: http://pupunzi.com/mb.ile

Actually tested on iPhone.
To have the best experience add this url to your iPhone home and start it as application.

Here is the gitHub repositiory: https://github.com/pupunzi/jquery.mb.ile

All feedbacks are wellcome!

This release fix a bug introduced by jquery 1.4.3 that prevented the vertical extruders to open.

Get this update now!