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!

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/

This is a horrible hack that works beautifully (’till next Apple iOs update).

It was a while that we where looking for a background audio solution for our Adslife browser game when played on iPad or other iOs devices. Apple’s policy about audio and video autoplay in iOs browser is to deny this feature.
After several failed attempts I figured out a simple hack that makes it possible to call  directly the source URL of audio files and play them on the HTML page load.
I first noticed that Safari on iOs plays automatically a mp3 file (or even mp4: videos!) if it is directly called as a URL.
Then, why not include a hidden iframe in the page pointing to the audio file to load and play it once the page and iframe are loaded?

It works!
Once you load the page, just after buffering the mp3, the audio starts playing!

Here is the javascript code:

var isiOs = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i));

function bgAudio(opt){
if (isiOs){

var ifr=document.createElement("iframe");
ifr.setAttribute('src', opt.mp3);
ifr.setAttribute('id', "bgAudio");
ifr.setAttribute('width', '0');
ifr.setAttribute('height', '0');
ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr)

} else{

var audio=document.createElement("audio");
audio.setAttribute("id","bgAudio");
var mp3Source= document.createElement("source");
mp3Source.setAttribute('src', opt.mp3);
var oggSource=document.createElement("source");
oggSource.setAttribute('src', opt.ogg);

audio.style.display="none";

audio.appendChild(mp3Source);
audio.appendChild(oggSource);

document.body.appendChild(audio);

audio.load();
audio.volume=0.6;
audio.play();
}
}
window.onload = function() {
bgAudio({mp3:"http://dl.dropbox.com/u/1976976/segreteria.mp3", ogg:"http://dl.dropbox.com/u/1976976/segreteria.ogg"});
};

function stopBgndAudio(){
var el= document.getElementById("bgAudio");
document.body.removeChild(el);
}

And here is a demo page.

Actually I tested it on iOs 4.3.5 but I’m quite sure it works on previous versions too.
This hack does not solve the other limitation imposed by Apple on all iOs devices: Play two audios at once .
We can’t have everything in this life…

Hope this is helpful – and that you’ll play Adslife

I’m glad to announce that Adslife is now available as beta release

Why should you play this game?

Well, first of all this is something different from games you use to play;
It is all realized using HTML and Javascript (jquery) and you’ll not believe it;
You compete with other players all around the world not with guns but with beauty!
You can work as  barman if you are desperate;
Your masterpieces can be exposed to the Adslife Museum!
You can become a referral for other bids;

You can… Just start play and you will discover Adslife’s world.

If you don’t understand what Adslife is: http://adslifegame.com/applications/adslife/site/adslife-introduction.jsp
If you want to see how to make your bid: http://adslifegame.com/applications/adslife/site/adslife-videos.jsp

Enjoy the game and help us making a better web!

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

Getting over again this problem I found out what was wrong: all my ajax requests did’t expressly declarate the dataType attribute when called; this, for some reason, have no default fallback (dataType:”html”) if the request is made from a local file using the v. 1.5 of jQuery but it is resolved correctly once called from a web server.

So, after adding the correct dataType, all the ajax calls now works correctly even if called directly from a local file:

before:

$.ajax({
type: "GET",
url: url,
data:pageData,
success: function(response) {...}
})

after:

$.ajax({
type: "GET",
url: url,
data:pageData,
dataType:"html",
success: function(response) {...}
})

There’s no documentation about this issue on the jquery site and maybe someone will find this information usefull.
For an accurate documentation on the new ajax module read: http://api.jquery.com/category/version/1.5/.

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!