Background video made easy.

I’ve just update the WordPress background video component at version 0.5 adding a feature to the TinyMCE editor that makes really easy the inclusion of the background video in your WordPress page via the post editor.

Once installed the plugin you’ll find a new button on the editor toolbar that will insert the short code filled with all the needed parameters you define in the popup.

Give it a try

WordPress has just approved the porting of jQuery.mb.YTPlayer component for their platform: mb.YTPlayer background videos.

From today you can easily include any video hosted on YouTube directly as background of any post or page you are publishing with WordPress; just download the plugin, install it, use the settings panel to add a background video to the homepage or the short code as explained in the linked page, to add it to any post or page of your blog.
You can configure it to show progress bar and controls, set video opacity, loop it or mute it.
The background player will adapt its size to the screen optimizing its view in order to prevent the display of black strips due to different aspect ratio.

_____________________
_____________________

Give it a try at: http://wordpress.org/extend/plugins/wpmbytplayer/

jQuery.mb.containerPlus is going to have a new life.

jQuery.mb.containerPlus is one of the most appreciated jquery plug-in of mine (more than 25.000 downloads till now) and I decided it was time to radically update the code.

There are many improvements in this new release that certainly you’ll appreciate; here are some of them:

1. Skins doesn’t use images anymore and are completely realized via CSS3.
   This means you can easily modify and personalize containers for your usage.
2. improved compatibility with devices.
   You can drag and resize containers also on your iPad.
3. Implemented an easy way to add functionalities and customizations (plugins) via javascript.
   This method ( $.containerize.addMethod(“yourMethod”,fn) ) inject functionalities you can use for your container as, for example, adding a full screen behaviour.
4. Removed the dependence to the jQuery.metadata.js plugin.
   Now it uses the DATA attribute to store container properties.

I’m working to fix all the bugs and to implement all the features used in the previous release.

You can see a preview here:
http://pupunzi.github.com/jquery.mb.containerPlus/demo.html

Hope to make it public soon.
Suggestions are apreciated,
thanx.

A new important update for mb.YTPlayer component!

Adding a simple parameter the player will fit the window size according to its aspect ratio. This way you can remove the ugly black strips from the screen .

Implemented additional parameters for the $.fn.changeMovie() method to pass specific properties for the specific video.

Give it a try and  read the Doc

If you are getting crazy trying to sync all your Google calendars on your iPhone or iPad here is the solution:

Creating a gmail account from settings > mail, contacts, calendars you can than sync the default Google calendar with your Calendar app. But if you create a new calendar on Google, this is not sync on your iDevice.

After reading several posts on how to sync my extra calendars I finally find out the solution… And it’s really simple:

You just have to go to that page https://www.google.com/calendar/iphoneselect and select calendars you want to see on your device. That’s all

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/

If you have always done it that way, it is probably wrong.
(Charles Kettering)

Our product family is growing up and today we published a new free on line service for helping you bring change in company and teams though a process centered on reaching consensual change.

Give it a try and let me know your impressions.

http://yourchangemanifesto.com