I just published a relevant update of jquery.mb.extruder plug in.

Now you can locate it on top, left, right or bottom border of the browser window.
You canalso choose to close or not other panels once a new one is opened.

go to the component page!

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,
    onCreate:function(o){initDock(o,"dock")},
    onClose:function(o){close(o)},
    onRestore:function(o){restore(o)},
    onIconize:function(o){iconize(o)},
    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 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");
}

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 opt= 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);

it places the icon into the placeholder and than the placeholder into the “Dock” element.

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

it redefines the “dock” attribute of the container to let it iconize into its placeholder.

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 restore(o){
     $("#"+o.attr("dock")).find("img:first").show();
  }
  function close(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

Use a Youtube movie as background or view it in a chrome-less player!

With this jQuery component you can set a YT movie as background of your page
or view it into a chrome-less customizable player!
All the controls are javascript and CSS

Take a look!

jquery.mb.maskedGallery

If you need a custom frame for your images, Here it is! you can slide images inside your custom mask, add cotrols for navigation, action  and description for each image!

Try it now!

The new mb.menu is out!

With great new feature and some bugfix.

take a look!

Once upon a time, not so long ago, websites were designed to show how good we were, what beautiful things we did. Without any possibility of interaction between us and our visitors. Just a showcase. We could put photos, text, catalog items, present our work with a wonderful graphic interface…

More things we wanted to have, the more complicated was to create our desired site: Connections to databases, code, server side applications, disk space, security… real hell!
Fortunately times have changed and the web has become a place where not only one can watch what others do, but a place where we can interact, exchange views, share content, learn and teach.

It has become a multidirectional interchange of ideas, experiences and contents;
the new frontier of social communication.

That’s why we decided to develop Patapage

Patapage is the superHero of the new World Wide Web era.

It lets any site interact with people in the easiest way we could have thought, without compromising your way of working and designing and without any server side implementation.

What are the tools that it can offers to make our site more accessible, without requiring intellectual efforts and waste of time and money?

Here are nine features
that your static or dynamic site should have to be socially  interactive
and that you can do easily with Patapage:

1. Threaded comments for your pages

2. Wiki like contents on your page

3. Google search® for your pages

With this jQuery plug-in you can easly insert media from the most famous social media services just with 1 line of code!

Ex: [ youtube=http://www.youtube.com/watch?v=PLs5HN7FS0w ]

Take a look!

The new mb.gallery is out!

A new version (2.0) of mb.gallery is out; this is a rewritten version of the previous mb.gallery. It load faster and it’s fully customizable via CSS.
It cames with an additional plug-in (jquery.mb.flickr.js) that let you build a gallery from any public Flickr set or account images (you’ll need your Flickr API key).

Published mb.gallery 2.0.1 with a bugfix for IE

I just published a fast update to solve a terrible bug that prevented IE to load the choosen CSS file on the fly.

Take a look!

get the update now!

Changes:

line: 59: var extW= this.options.position==”left”?1: this.options.width;

line 70: {position:position,top:0,left:0,width:1};

line 77: wrapperStyle={position:”absolute”, width:this.options.position==”left”?1:this.options.width};

line: 218 extruder.find(‘.content’).animate({ width: 1 }, opt.slideTimer,function(){

line: 219: extruder.find(‘.ext_wrapper’).css({width:1});

What’s new in 1.8.0:

1. Extruder is child of any DOM element.
2. Extruder can have inline content. (not only Ajax).
3. better close event.
4. added autoCloseTime parameter to specify time in milliseconds the extruder should close on mouse out (0 = never).
4. added hidePanelsOnClose parameter to specify if subpanels should hide on extruder close.

Take a look!