Many times people are asking me to implement features to my jquery components but most of the times those features are easily implementable by adding custom behavior to the callbacks functions yet available.

In ths post we’ll see how to realize a functional dock element for the mb.containerPlus.

For this tutorial I’m using the latest 2.5.0 release of this component that has implemented a new onCreate event callback and many other useful features (take a look at the component page).

1. How should it works?

In my project I need that for each container in the page there should be a small icon rapresenting it in a specific place called “Dock”. The “Dock” element is the place where all the containers are collected once minimized. This behavior is already implemented in the component but as default the iconized container icon is placed as last of the dock area and it’s not shown once the container is open.

So, in my case I want the icons to be alwais visible except when the container is closed and shoud mantain ther position in the dock area. Those icons should also have some actions for restoring/iconizig the corresponding container.

2. How to obtain this behavior?

mb.containerPlus has callbacks events that let you implement additional functionalities for their behavior.

The standard initialization of a containerPlus does not introduce callbacks.

this is the simple code:

$(".containerPlus").buildContainers({
      containment:"document",
      elementsPath:"../elements/"
});

For this tutorial we have to create some extra methods to be invoked once the container is initialized, once it’s iconized and once it’s restored.

the final initialization code will be:

$(".containerPlus").buildContainers({
    containment:"document",
    elementsPath:"../elements/",
    dockedIconDim:45,
    <strong>onCreate</strong>:function(o){<strong>initDock(o,"dock")</strong>},
    <strong>onClose</strong>:function(o){<strong>close(o)</strong>},
    <strong>onRestore</strong>:function(o){<strong>restore(o)</strong>},
    <strong>onIconize</strong>:function(o){<strong>iconize(o)</strong>},
    effectDuration:300
})

As you can see some extra methods has been added as callbak to the init function.

onCreate callback:

On the onCreate event I added the initDock(o,dockID) function that build the placeholder for the initialized container icon on the “Dock”; the function is:

function <strong>initDock(o,docID)</strong>{
   var opt= o.get(0).options;
   var docEl=$("<span>").attr("id",o.attr("id")+"_dock").css({width:opt.dockedIconDim+5,display:"inline-block"});
   var icon= $("<img>").attr("src",opt.elementsPath+"icons/"+(o.attr("icon")?o.attr("icon"):"restore.png")).css({opacity:.4,width:opt.dockedIconDim, cursor:"pointer"});
   icon.click(function(){o.mb_iconize()});
   docEl.append(icon);
   $("#"+docID).append(docEl);
   o.attr("dock",o.attr("id")+"_dock");
}

The two parameters I’m passing to the function are the container element (o) provided by the mb.containerPlus callback method and the “Dock” element ID (docID).

Here is what this function does:

 var <strong>opt</strong>= o.get(0).options;

it fills the opt variable with the container options to get easily some usefull properties for its manipulation.

var docEl=$("<span>").attr("id",o.attr("id")+"_dock").css({width:opt.dockedIconDim+5,display:"inline-block"});

it defines the placeholder for the container icon on the dock as docEl, setting an ID (composed by the container ID and a “_dock” postfix ) and some CSS properties: the width retrived from the dockedIconDim option setted as option of the init function.

   var icon= $("<img>").attr("src",opt.elementsPath+"icons/"+(o.attr("icon")?o.attr("icon"):"restore.png")).css({opacity:.4,width:opt.dockedIconDim, cursor:"pointer"});

it defines the icon element to be placed inside the placeholder retriving it from the container attribute “icon” created by the metadata written in the container DIV class.

icon.click(function(){o.mb_iconize()});

it attaches an onclick event to the icon to iconize the corresponding container.

docEl.append(icon);
      $("#"+docID).append(docEl);

 o.attr("dock",o.attr("id")+"_dock");

onClose callback:

On the onClose event I added the close(o) function that hide the placeholder icon once the container is closed:

function close(o){
    $("#"+o.attr("dock")).find("img:first").hide();
}

onRestore callback:

On the onRestore event I added the restore(o) function that shows the placeholder icon of the restored container:

function restore(o){
     $("#"+o.attr("dock")).find("img:first").show();
}

onIconize callback:

On the onIconize event I added the iconize(o) function that hides the placeholder icon of the iconized container; the mb.containerPlus component will fill the “Dock” placeholder with its icon:

function iconize(o){
   $("#"+o.attr("dock")).find("img:first").hide();
}

3. The javascript code:

Here is the initialization javascript code for containers in this tutorial:

$(function(){
  function initDock(o,docID){
     var opt= o.get(0).options;
     var docEl=$("<span>").attr("id",o.attr("id")+"_dock").css({width:opt.dockedIconDim+5,display:"inline-block"});
     var icon= $("<img>").attr("src",opt.elementsPath+"icons/"+(o.attr("icon")?o.attr("icon"):"restore.png")).css({opacity:.4,width:opt.dockedIconDim, cursor:"pointer"});
     icon.click(function(){o.mb_iconize()});
     docEl.append(icon);
     $("#"+docID).append(docEl);
     o.attr("dock",o.attr("id")+"_dock");
  }
  function iconize(o){
     $("#"+o.attr("dock")).find("img:first").hide();
  }
  function <strong>restore</strong>(o){
     $("#"+o.attr("dock")).find("img:first").show();
  }
  function <strong>close</strong>(o){
     $("#"+o.attr("dock")).find("img:first").hide();
  }
  $(".containerPlus").buildContainers({
    containment:"document",
    elementsPath:"../elements/",
    dockedIconDim:45,
    onCreate:function(o){initDock(o,"dock")},
    onClose:function(o){close(o)},
    onRestore:function(o){restore(o)},
    onIconize:function(o){iconize(o)},
    effectDuration:300
  });
});

4. The HTML code:

And here the HTML code to define a container:

<div id="c1" class="containerPlus draggable resizable {buttons:'m,i,c', icon:'browser.png', skin:'black', width:'500',iconized:'true', dock:'dock', title:'container 1'}" style="position:fixed;top:130px;left:400px">
    Content goes here
</div>

As you can see the code to define the containerPlus is really simplified respect previous versions. You don’t need to write all the container structure but only the content.

take a look at the demo

This demo is included in the component package you can download from the mb.containerPlus page:

go to the component page

The new Youtube API allow developers to invoke a chrome-less AS3 player and use a javascript API to build our own controls, we have almost all the controls available: player.playVideo(), player.pauseVideo(), player.setVolume(), player.mute(), player.unMute(), player.getVideoStartBytes(), player.getVideoBytesTotal(), player.getVideoBytesLoaded(), player.getCurrentTime(), player.getDuration() … All we need to make a custom and customizable control tool for our movie player.

Going on developing it, a great idea was growing in me… Why not using any movie from Youtube  as background of a website page instead of images…
I sow a site (from http://jquery14.com) that uses a movie as background with a really nice effect (http://insideccs.com/#/before_getting_in/degree/). This is what I was thinking at.

And how to have this movieplayer as background?

Well, of course we can’t set it via CSS; this is not supported. But we can have a DIV with an absolute position containing our embedded chrome-less player  under all the other elements of the body; the EMBED must have the WMODE property set as TRANSPARENT to prevent the movie to be over the rest of the content and it must have WIDTH and HEIGHT set to “100%”.

And this is what my jquery.mb.YTPlayer plug-in can do for you; what you have to do is just insert a line of HTML code into your page, include the js in the head of your page and call the method. All the rest is the plug-in:

In the head:

 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="jquery.metadata.js"></script>
 <script type="text/javascript" src="jquery.mb.YTPlayer.js"></script>

In the body:

<a href="[the youtube video URL]"
   class="movie
   {opacity:.4, isBgndMovie:{width:'1990',mute:false}, ratio:'4/3'}"> [Alternative link] </a>

And the js call:

<script type="text/javascript">
 $(function(){$(".movie").mb_YTPlayer();});
</script>

The plug-in can also be used as alternative Youtube player just removing the  isBgndMovie meta parameter; in that case you can specify the width, the aspect ratio (4/3 or 16/9) and you can customize the controls via CSS.

The advantage you whould have is also that the embed of the player is provided with all the browsers support controls using the swfobject.js.

Take a look at this video:

The jquery.mb.YTPlayer plug in is under development but it will be soon available.

If you are interested on you can download the 1.0rc3 from here.

Take a look at this article on how you can customize a Patapage button on your page instead of have the default docked one:

http://blog.patapage.com/