jquery mb.extruder « Matteo Bicocchi's Blog

jquery mb.extruder

mbExtruder

A good way to have extra content or a navigation tool in your page!

This jquery component let you easly build a sliding panel where to insert any kind of content; it has builtin all the functionalities for managing menu lines and sub panels with accordion effect. It can get the content via ajax and therefore you can dynamically build it by passing DATA via request using the metadata attribute settable on the extruder container.

demo page:

http://pupunzi.com/#mb.components/mb.extruder/extruder.html

jQuery project page:
http://plugins.jquery.com/project/mbextruder

download example:
http://mbideasproject.googlecode.com/files/jquery.mb.extruder.1.5.zip

documentation:
http://code.google.com/p/mbideasproject/wiki/mbExtruder

Dependencies:

jquery.hoverIntent.js
jquery.metaData.js
jquery.mb.flipV.js (soon available)

here is the js call:

 $("#extruderTop").buildMbExtruder({
          positionFixed:true,
          width:350,
          sensibility:800,
          position:"top",
          extruderOpacity:1,
          flapDim:100,
          textOrientation:"bt", // or "bt" (top-bottom or bottom-top)
          onExtOpen:function(){},
          onExtContentLoad:function(){},
          onExtClose:function(){},
          slideTimer:300
      });

The HTML constructor:

on the page:

<div id="extruderTop" class="{title:'Our network', url:'parts/extruderTop.html'}">
    <div class="content"></div>
</div>

There are two ways to fill the extruder:

The first is inline content

in this case you can put your content inside the “content” DIV directly; in the case you have a menu structure with a sub level content, that content can only be inserted via ajax using: {panel:’parts/your subcontent url‘, data:’DATA to bi passed in the request as json object or as query string‘} as class of the root voice.

The second is via ajax

This way lets you define the content of the extruder in a separate file called via ajax; the URL of the file is specified in the extruder DIV class attribute as above: {url:’parts/extruderTop.html’, data:to pass in the request as json object or as query string} Passing additional DATA you can manage dynamically the content to be shown building your own logic.

part to be included as primary content (in a separate file or just inline):

<div class="text">
    [text with no actions managed by the component including images or whatever you need]
</div>
<div class="voice {}"><a class="label" href="http://pupunzi.com">mb.ideas.home</a></div>
<div class="voice {panel:'parts/extr.components.html'}"><a class="label"
    href="http://pupunzi.com/#mb.components/components.html">mb.jquery.components</a></div>
<div class="voice {disabled:true}"><span class="label">mb.info (disabled)</span> </div>
...

In the primary conent, the one you can see opening the panel, you can display a list of lines with differen actions or just a content you define;
As you can see above, each line is defined by a DIV with class “voice” or “text” and has different action:

the first is simply a container of content (class=”text” in the DIV TAG);
the second is a direct link to a specified url in the href (class=”label” in the A TAG);
the third is a direct link to a specified url and has a sub panel which url is defined in the class attribute as “panel” (class=”voice {panel:’parts/extr.components.html’}” in the DIV TAG);
the forth is a disabled voice (“class=”voice {disabled:true}” in the DIV TAG);

secondary content file (must be in a separate file; it’s invoked in the “panel” metadata setted to the root voice as above):

<div class="text">
   [text with no actions managed by the component including images or whatever you need]
</div>
<div><a onclick="alert('mb.pdf.magazine');">mb.pdf.magazine</a></div>
<div><a onclick="alert('mb.video');" >mb.video</a></div>
<div><a onclick="alert('mb.more');" >mb.more</a></div>
...

Parameters:

width:350, (int) the width of the sliding panel
positionFixed:true, controls the position of the extruder (true is default and the extruder doesn’t scroll with the page; if set to false it scrolls).
sensibility:800, (int) the time in milliseconds to wait befor the slider will open without a click event
position:”top”, (string) to define if the slider is on the top or on the left of your page
extruderOpacity:1, (int) the opacity of the sliding panel once it’s closed (doesn’t work in IE)
flapDim: 100, (int) the width or height (depends on the extruder position) of the flap containing the title
textOrientation: “tb”, or “bt” (string) the orientation of the text for titles in the left panel flaps
onExtOpen, onExtContentLoad, onExtClose: “function(){}”, (function) collbacks function for each event
slideTimer: 300, (int) the time in milliseconds for the slide transition

Methods:

$.fn.disableExtruderVoice(): disable an extruder voice; the voice must have an ID.
$.fn.enableExtruderVoice(): enable an extruder voice; the voice must have an ID.

Written by Matteo Bicocchi

28/10/2009 at 12:16 am

40 Responses

Subscribe to comments with RSS.

[...] Go to the component page to view it in action and download the code! [...]

jquery.mb.extruder 1.0 « Matteo Bicocchi’s Blog

28/10/2009 at 12:49 am

Reply
Matteo… this is exceptional work and great ui
Is it possible on the your extruder.top to add images
as in the left.extruder using the div class ‘text’ or any other way (BTW i love this)
would be a great help! thank you once more for this amazing work if you can help i can pledge a donation as this would make it viable in my new site

richard cresswell

02/11/2009 at 8:34 am

Reply
- Hi Richard,
  The top extruder can have the same content of the left one; the only difference between the two is that on the left you can have more than one element and on the top only one…
  On the demo included in the download you can test changing the left one as top and viceversa.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  02/11/2009 at 8:30 pm
  
  Reply
[...] Demo | Descarga [...]

mb.extruder, plugin para jQuery | Recursos para Diseñadores Gráficos y Web | Creativos Online

04/11/2009 at 6:05 pm

Reply
[...] Take a look! [...]

jQuery.mb.extruder 1.5 « Matteo Bicocchi’s Blog

06/11/2009 at 11:55 pm

Reply
Great plugin!
I would like to report a problem in IE7. If for example I click the options box next to “mb.creativity”, the button right below it (“mb.network”) does not slide down to make room for the second-level menu items.

Mindy

18/11/2009 at 11:30 pm

Reply
Hi. Great work !
It would be great to have the parametervalue position:”right” !
And is is already possible to define the position of the flap ?

Rob

20/11/2009 at 9:07 pm

Reply
- Hi Rob,
  I’m working on right and bottom postioning;
  what do you mean by flap position? position from top?
  bye,
  Matteo
  
  P.S.: thnx for callbacks functions name… due to a refactor
  
  Matteo Bicocchi
  
  20/11/2009 at 10:42 pm
  
  Reply
PS. check your callbackfunctionnames in demo.html

Rob

20/11/2009 at 9:30 pm

Reply
Yes, I mean flap position from top. Thank you for feedback, and keep up the great work !

Rob

21/11/2009 at 5:48 pm

Reply
It newRooock!

iwans

25/11/2009 at 11:07 pm

Reply
Hello,
I made an adjustment in the extruder created by you and you can put the right screen. If you are interested send a mail to me.

Tiago Uriartt

03/12/2009 at 4:28 pm

Reply
Hi,

very nice work !.

But i found something very strange.
My test (downloaded from here) on localhost it’s working perfectly even in locally installed apache.
The same test copyed on our webhosting server in some browsers (Flock on windows, or Firefox on linux) we have a strange behaviour – the submenus doesn’t expand.

About 2 days testing and i am exhausted

bkiss

bkiss

07/12/2009 at 11:42 am

Reply
- Hi bkiss,
  All the menu calls are rendered via ajax with a POST method;
  probably your servere doesn’t allow POST requests and that could be the problem; to solve this issue or you ask your administrator to allow post request on your webserver, or you change all the ajax request in mbExtruder js from POST to GET.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  07/12/2009 at 2:40 pm
  
  Reply
  - Hi Matteo,
    
    You are the MAN !!!
    
    This was the solution for the problem !
    
    Thank you for your prompt reply,
    
    bkiss
    
    bkiss
    
    08/12/2009 at 7:18 am
The mb.extruder positioned top does not seem to work in ie7. See the demo page for an example of the incorrect behaviour. http://pupunzi.com/mb.components/mb.extruder/demo/demo.html. Open the “extruder top” –> mb.jquery.components submenu. The mb.menu submenu is overlapping the top lever menu mb.creativity.

Is there a solution for this?

poa

07/12/2009 at 6:48 pm

Reply
Great work, got 2 problems though

it isnt working in ie6, the flap animates when clicked, but content would never show

in some ie8 (not all), the panels will be stuck sometimes when clicked, for eg, when click panel 1, i suppose panel 2 would move downwards, but it would stay in the same position for a while, like a big delay, tested in firefox, safari, chrome with no problem, on other pc, ie8 has no problem at all

Any ideas?

ivan

09/12/2009 at 4:06 am

Reply
- Sorry the ie8 problem I mentioned above, it was suppose to be in ie7 problem. I think it is the problem poa mentioned above
  
  ivan
  
  09/12/2009 at 4:09 am
  
  Reply
- Hi Ivan,
  I’m not supporting IE6 anymore, too buggy and too old browser.
  For the IE7 bug I’m working on…
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  09/12/2009 at 9:24 am
  
  Reply
Hi me again.

I did some change to the put an image with some mouseover like this:

<div id="extruderTop" class="{title:'’, url:’extruderTop.html’}”>

and it works nicely, but on the left panels, class=”(title:”…. doesnt work properly, is there any way to also put images on the left flap?

ivan

11/12/2009 at 9:49 am

Reply
- should be: title:’<img src……'
  
  ivan
  
  11/12/2009 at 9:50 am
  
  Reply
found a black rectangle box if i change this from the demo:

to

It happens on safari and chrome, but IE8 and FF is fine

ivan

11/12/2009 at 9:57 am

Reply
Thank you for Extruder
http://phpbb3styles.maxthon.cz

Culprit

12/12/2009 at 9:19 pm

Reply
Hi, Matteo!

Thanks for great script!

I am modifying it so panel is not fixed, but absolute and left:100px; It is a bit padded from left side.
My problem is – content is visible! Hope you understand what do I mean.

As far as I understand, it could work as follows:
When panel is closed, content could have an opacity to zero.
When panel is opened, content could have opacity to 1.

Or, better way would be to use some kind of masking. but i am not sure it is even possible….

What could you advise?

Thanks,
Ed.

Smirnoff

18/12/2009 at 12:09 pm

Reply
- Hi Smirnoff,
  Actually the jquery.mb.extruder component in the “left” option can only be placed at the left of the page. I’m working to let it be positioned on any DOM element; maybe on next release…
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  18/12/2009 at 6:14 pm
  
  Reply
Hello,

I’m using the left extruder and I understand how to change the width of the sliding panel, but how do you change the height? I do not want it to expand the whole page down, just enough to fit my buttons. Any advise?

Thank you,

Shannon

Shannon

22/12/2009 at 5:01 pm

Reply
- Hello Matteo,
  
  I’m a big fan of your work. I’ve a question that is related to Shannon’s. Is there a way to resize the extruder, horizontally and vertically? I tried the resizable UI, but it doesn’t take. Also, I was going to try to make it work at the ‘bottom’ and ‘right’ positions, but after looking at your last comment, I’ll just wait for your next release. Again, great job.
  
  Regards,
  Karthick
  
  Karthick
  
  30/12/2009 at 7:14 am
  
  Reply
Hola…

Hello, excellent work.
But not everything in life can be so beautiful, what I mean is that the file “jquery-latest.js” is not compatible with that offered by the web “http://jqueryjs.googlecode.com/files/jquery- 1.3.2.min.js” and this presents conflict with yours …
I wonder how I can solve the compatibility problem, and working with applications developed for the “jquery-1.3.2.min.js” official.
Many thanks.

FRANCISCO MARTINEZ

01/01/2010 at 12:55 am

Reply
- Hi Francisco,
  You should have just one of jQuery files on your page and the jQuery-latest should be exactly the 1.3.2. Try pointing just on http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js instead of including it from your local file.
  Bye
  Matteo
  
  Matteo Bicocchi
  
  01/01/2010 at 12:28 pm
  
  Reply
hi Matteo great work, one question, how as I do so that the menu be not hidden to the left, that always this visible one

Jasson

05/01/2010 at 9:43 pm

Reply
hi,

how can i configure / change settings such that i can get the extruder instead of top position tobottom position and also the menu will open upwards?

varun shah

07/01/2010 at 11:51 am

Reply
- Hi Varun,
  At the moment the extruder can only be positioned to TOP or LEFT; I’m working on a new release where will be possible to position the extruder either on bottom or on right of the screen.
  Thnx,
  Matteo
  
  Matteo Bicocchi
  
  07/01/2010 at 9:53 pm
  
  Reply
  - Hi nice script, but for my requirements it’s important to have extruder positiond to bottom and right also.
    
    Matteo, when it will be released the next version supported these features?
    
    Nice job.
    
    Stano
    
    Stano Lacko
    
    08/01/2010 at 10:41 pm
Hi!

Thank you for your work.

http://forum.rocknijsie.pl <– my phorum with extruder

Bye.

Tom

watrix

09/02/2010 at 10:41 pm

Reply
Great job !
It’s possible to open the left extruder from a link inside the page (not only from the extruder tab)?
Thanks
Andrea

Andrea

04/03/2010 at 10:47 am

Reply
- Hi Andrea,
  Yes, you can open any extruder from an external link by triggering a click event on the extruder flap:
  
  For Ex.: if your extruder ID is “extruderLeft”:
  
  $(‘#extruderLeft .flap’).click();
  
  Matteo Bicocchi
  
  04/03/2010 at 1:15 pm
  
  Reply
  - Like this (open extruder from image)?
    
    $(“#extruderLeft .test”).click();
    
    Andrea
    
    04/03/2010 at 2:53 pm
  - (cutted code on previuos post…)
    $(“#extruderLeft .flap”).click();
    
    Andrea
    
    04/03/2010 at 3:34 pm
Hi Stano,
I’m spending a busy period and I don’t know when I’ll be able to work on it… maybe a week, maybe a month…
Bye,
Matteo

Matteo Bicocchi

09/01/2010 at 2:07 pm

Reply
Hi Matteo,
really, I know this situation.

Never mind, time is only variable

Stano

Stano Lacko

11/01/2010 at 2:59 pm

Reply

Matteo Bicocchi's Blog