jquery mb.extruder

mb.extruder

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

This jQuery component let you easily build a sliding panel where to insert any kind of content; it has built-in 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 meta-data attribute settable on the extruder container.

v. 2.5.5

PayPal

What’s new in 2.5.5:

  • Added responsive behavior: if the width of the extruder is more than the window width the extruder will resize to fit the window size.

What’s new in 2.5.4:

  • IE11 issue compatibility for vertical labels.

What’s new in 2.5:

  • jQuery 1.9 compatibility issue

384 Responses

  1. Ali Abu Thahir
    Ali Abu Thahir at · Reply

    Hi Pupunzi,

    I’m trying to use mbextruder 2.x with twitter’s bootstrap 3.x. The extruder doesn’t render the bootstrap elements properly.

    Pls let me know the fixes/workarounds to get it working.

    Regards,
    Ali

    1. Ali Abu Thahir
      Ali Abu Thahir at ·

      Hi Pupunzi,

      Got the twitter bootstrap rendering issue resolved. Pls ignore my question dated – August 2, 2014 at 8:24 am

      Regards,
      Ali

  2. Mike
    Mike at · Reply

    Hi pupunzi,

    Thank you for your script. It works like magic!
    Just one qustion, is it possible ALWAYSE “on load” of my page, where I use your script to show the panel without clicking?

    I tried to do that, changing the “slideTimer” value to 0

    $(window).load(function() {
    $(‘#extruderLeft1′).openMbExtruder(true);
    });

    $(“#extruderLeft1″).buildMbExtruder({
    position:”left”,
    width:300,
    extruderOpacity:.8,
    hidePanelsOnClose:true,
    slideTimer:0,
    onExtOpen:function(){},
    onExtContentLoad:function(){},
    onExtClose:function(){}
    });

    But after all one can see very fast move from left to the right.
    Yes, it is very fast but still I can see this action.
    Is there any tricks to hold this panel fixed until it will be clicked?

    Thank’s in advance!
    Mike

  3. James
    James at · Reply

    I want to place a mbextruder at the top-right of my page. But it’s always at top-center. How do I right-align it?

    Also, the flapDim doesn’t seem to work, no matter what value i put in there…

    Please help

  4. D
    D at · Reply

    I tried to add some event handlers on the menu’s links but nothing was triggered.
    I think its because of the extruder js, but i havent debugged it yet.
    Is it possible?

    1. D
      D at ·

      Hi, thanks for answering (I wasn’t expecting that lol)

      So this is the piece of code that is not working.
      Somehow the events are not being propagated and I can’t see why.
      None of these handlers are triggered :

      $(‘.extruder-container a’).click(function(){
      alert(‘.extruder-container a’);
      });

      $(‘.label’).click(function(){
      alert(‘.label’);
      });

      $(‘.voice’).click(function(){
      alert(‘.voice’);
      });

      $(‘.extruder-container’).click(function(){
      alert(‘.extruder-container’);
      });

    2. D
      D at ·

      I figured it out.
      I was not thinking.
      The extruder elements are built when loading the page.
      I have to put my triggers inside

      $(window).load(function() {
      });

      thanks.
      It’s a great navigation menu
      simple and aesthetic

  5. Ayush
    Ayush at · Reply

    I put mb extruder on my page but that flip control is not showing in chrome after page fully loaded it is shown for sometime while loading page .

  6. Kevin Grandy
    Kevin Grandy at · Reply

    I am faced with inserting a whole hmtl document inside the flap. I can’t get a vertical scroll, and it wont scroll along with the main document. tried a number of things suggested on the interweb, including: height:101%, and overflow. Nothing is working for me. ???

  7. Rachel
    Rachel at · Reply

    Great plugin! I’m having trouble getting the text in the extended panel to show in Chrome. It looks fine in Firefox & Safari.

  8. Tomislav
    Tomislav at · Reply

    Hi,

    thanks for the great plugin.

    I have one question. Is it possible to hide flap completely? There is flapDim option, and if I set that to 0, flap is still there. I’ve tried with setting the empty title in combination with flapDim=0, but, flap is still shown (this time without any title, of course). Is there any way with the current implementation to hide the flap or there are some dirty tricks needed? Thanks in advance.

  9. Julien
    Julien at · Reply

    Hi,

    Thanks for this great script

    One thing i don’t find in the docs and comments, how to auto open a flap on extruder load ?

    Thanks in advance

1 19 20 21

Leave a Reply