jquery mb.extruder
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.
v. 2.3
What’s new in 2.3:
- added “autoOpenTime” to control the open on mouseover behaviour. (0= do not open onmouseover – value in milliseconds)
- fixed several bugs.
2.0:
- You can now have extruder on top, left, right, bottom.
- I’ve now added a new property: accordionPanels to choose if panels should close once opening a new one or not (true/false).
v. 2.1:
- fixed a conflict with jquery version 1.4.3 that prevented vertical extruders to open.
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
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
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.
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 ?
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
PS. check your callbackfunctionnames in demo.html
Yes, I mean flap position from top. Thank you for feedback, and keep up the great work !
It newRooock!
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.
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
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
Hi Matteo,
You are the MAN !!!
This was the solution for the problem !
Thank you for your prompt reply,
bkiss
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?
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?
Sorry the ie8 problem I mentioned above, it was suppose to be in ie7 problem. I think it is the problem poa mentioned above
Hi Ivan,
I’m not supporting IE6 anymore, too buggy and too old browser.
For the IE7 bug I’m working on…
Bye,
Matteo
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?
should be: title:’<img src……'
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
Thank you for Extruder
http://phpbb3styles.maxthon.cz
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.
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
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
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
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.
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
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
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?
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
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
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
Hi Matteo,
really, I know this situation.
Never mind, time is only variable
Stano
Hi!
Thank you for your work.
http://forum.rocknijsie.pl <– my phorum with extruder
Bye.
Tom
Great job !
It’s possible to open the left extruder from a link inside the page (not only from the extruder tab)?
Thanks
Andrea
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();
Like this (open extruder from image)?
$(“#extruderLeft .test”).click();
(cutted code on previuos post…)
$(“#extruderLeft .flap”).click();
Hi,
Is it possible to save the current selected/opened panel within the extruder? If the extruder is opened again that the selected/opened panel is also opened.
Thanks,
Miro
Hi Miro,
there’s no method yet to do that, but you can change the jquery.mb.extruder script at line 191 commenting:
extruder.closeAllPanels();.Bye,
Matteo
Thanks for that. I’ll have a look.
Hi Matteo!
Your work is really a great effort! Excellent!
I am trying to implement both of your mbmenu and mbintruder plugins in the same site.
In Firefox it works brilliant, but in IE I have compatibility problems.
In mbmenu you use jquery1.3.2 but in the extruder you use jquery1.4.2
So if I use jquery1.3.2 then the extruder does not work in IE.
I use jquery1.4.2 then the extruder works well, but in mbmenu the submenus are flickering in both IE & Firefox.
Moreover IE givs the folloing error:
‘offset().top’ is NULL, or not an Object.
Line: 555
Char: 7
Code: 0
Is there a way to use both plugins in one page?
Thanks in advance,
Z.
Hi Matteo!
My mistake! I used the version 1.3 mbMenu demo, but now I realized, that you created a demo for 1.4 too.
Sorry!
Z.
It isn’t working correctly in Goggle Chrome. Is there a workaround, so the flap position is correct. My flap shows up in the middle of the page.
Yes, you find a bug; I update to v. 1.8.1 with the bugfix.
http://github.com/downloads/pupunzi/jquery.mb.extruder/pupunzi-jquery.mb.extruder-1.8.1.tar.gz
Bye,
Matteo
works … thank u
Hi Matteo!
Realy great work!!!
Just two questions.
1. Is it possible to have a few “top panels”?
2. Is it possible to have an option to “push” the main page (rather than “cover” it) when the panels are open? (Someting like this one http://srobbin.com/blog/jquery-pageslide)?
Thank you once again for your beautiful work!!!
Bye, Andrey
Hi Andrey,
at the moment you can have just one top panel but many left panels and it’s not possible to push the page… I get it as issue for next release.
Thnx,
Matteo
Hi Matteo, who can I put a form inside a child menu?
When i try to do it i get a strange behaviour.
Clicking in any “input” element the menu close himself.
Ciao Simone,
effettivamente questo è un bug…
Allora, se vuoi risolverlo subito devi cambiare 1 riga del codice ed aggiungere una classe alla tua FORM:
linea 283 (v. 1.8.1):
content.children()deve diventare:
content.children().not(".text")Aggiungi alla tua form: class= “text”
Ora ti dovrebbe funzionare correttamente.
Ciao
Matteo
Grazie sei gentile oltre che geniale!
Ultimo appunto:
Con chrome e i vari IE le lettere accentate nelle linguette in html diventano mostruose: Es. “Novità” ma credo riguardi il plugin fliptext o magari la pagina abbisogna di una codifica particolare.
Ciao Simone,
se la pagina ha un’encoding UTF-8 non dovresti avere problemi; altrinemti puoi provare a scrivere il titolo già encodato Ex: novità -> Novità
Ciao,
Matteo
I just wish down and right extrude….
Keep up the good work!
Hi the top extruder is not working for me…i have placed the extruderTop.html in the parts folder. The js files are in the inc folder and so are elements and css. I can see the extruder button but it does not drop down. I downloaded the examples folder and have done everything exactly as it is. Can anyone give me some further support on this???
Hi,
the path of contents you are loading inside the extruder via ajax must be relative to the page you are loading the extruder from. So, if your calling page is at the same level of inc folder and parts folder than the path to be called is: parts/extruderTop.html; but if is somewhere else it could be: ../parts/extruderTop.html or someotherfolder/parts/extruderTop.html dependig from your page position…
If you are using Chrome, it doesn’t make ajax call locally but on line it works.
Bye,
Matteo
Hello Matteo.
I read the document where you explain how to insert the code. But in this line: inc/jquery.mb.flipV.cryp.js
I don’t found in the inc folder “flipV.cryp.js” but this: “jquery.mb.flipText.min.js”. Where i can get FlipV please. Iam a beginner.
Thank you
Hi,
I don’t know which is the document you read but it’s old; if you need mb.extruder documentation please visit: http://wiki.github.com/pupunzi/jquery.mb.extruder.
Bye,
Matteo
hello) just noticed that, when using “inline” content link hover state doesn’t change in the extruder menu. tested it in the latest FireFox browser. Saw some other comment about the same issue in Docs. Other than that great component.
Hi Sergei,
that depends on your CSS customization… just take a look at the CSS file…
Bye,
Matteo
Thanks for the cool info , great material!
jquery mb.extruder Matteo Bicocchi's Blog
I had to change your code slight, to keep the state of the elements when they are moved into the container. You copy the HTML with looses the state of checkboxes in particular. (I am moving content from one place to the “side tab”. So I changed the code like the following (in buildMbExtruder):
var extruder,extruderContent,wrapper,extruderStyle,wrapperStyle,txt,timer;
extruder= $(this);
//extruderContent=$(this).html(); //removed so the data/binds move with it
extruder.css("zIndex",100);
var extW= this.options.position=="left"?1: this.options.width;
var c= $("").addClass("content").css({overflow:"hidden", width:extW});
extruder.wrapInner(c); //added code
c = jQuery(".content",extruder); //added code reset c so it is what the rest of the code expects.
//c.append(extruderContent); //removed so the data/binds move with it
//extruder.html(c);//removed so the data/binds move with it
Thanks for the great plug-in.
Hi Matteo,
i would like to understaind better what is the event to call to open the content of the menu’ by clicking on settingsBtn.png; what i want to do is to open it directrly on the page loqading without ” key press”
Thank’s
Ciao Francesco,
dove lo hai trovato settingsBtn.png?…
Per aprire direttamente un pannello quando la pagina viene caricata esiste un metodo: $(‘#extruderID’).openMbExtruder(true); passando il parametro “true” a questo metodo il pannello si chiuderà appena clicchi in un qualsiasi punto della tua pagina.
Per cui:
$(function(){$('#extruderID').openMbExtruder(true)
});
Ciao,
Matteo
Ciao Matteo,
per quello ci sono alla grande!! mi spiego meglio: l’extruder si apre , va benissimo poi clicco su l bottone che come immagine ha sttings.btn nella tua demo in mb.network clicchi sul pulsate e si aprono i sottomenu’; ecco io vorrei che in automatico si aprissero questi sottomenu’ ma nn riesco a trovare l’evento; ho trovato il $.fn.hidePanelsOnClose che lo fa chiudere … ma per apprirlo?
Grazie tante e complimenti per tutto davvero!!
ciao
Francesco
Ciao Francesco,
fare una funzione che apra un pannello specifico è possibile e facile; per il momento il componente è sviluppato per far si che quando apri un pannello vengono chiusi gli altri eventualmente aperti; per fare quello che vorresti tu dovrei cambiare il comportamento in modo che sia possibile scegliere di avere il comportamento attuale o far sì che l’apertura di un pannello mantenga aperti quelli eventualmente già aperti… sarà una feature per la prossima release
per aprire un pannello specifico aggiungi questa funzione nell’header della tua pagina:
$.fn.openPanel=function(){
$(this).find(".settingsBtn").click();
};
dai un’ID al DIV contenente il pannello che vuoi aprire;
chiama la funzione nel callback di apertura dell’extruder:
onExtOpen:function(){$("#[ID]").openPanel()},Ciao,
Matteo
ciao Matteo credo di nn aver capito bene: dunque io ho demo.html, extruderleft.html,network.html e mbextruder.js. Nell’ header di Demo html devo aggiungere $.fn.openPanel=function(){
$(this).find(“.settingsBtn”).click();}; poi in network.html do l’id al div e infine in mb extruder.js onExtOpen:function(){$(“#[ID]“).openPanel()}, ma nn mi è chiarissimo se nella openMbExtruder:function(c).
grazie ciao
Ciao Francesco,
Non devi toccare mbextruder.js; quando inizializzi un extruder, la funzione permette di definire dei metodi di callback che vengono invocati con determinati eventi;
per fare in modo che il tuo extruder si apra con un pannello espans puoi definire l’azione che l’extruder dovrà eseguire alla sua apertura; l’evento quindi da definire è onExtOpen.
Ecco un’esempio:
$("#extruderLeft").buildMbExtruder({
position:"left",
width:300,
extruderOpacity:.8,
onExtOpen:function(){$(“#panelID“).openPanel()},
onExtContentLoad:function(){},
onExtClose:function(){}
});
Penso comunque di pubblicare entro la fine della prossima settimana una nuova versione con implementate nuove funzionalità (come quella di poter aprire più submenu contemporaneamente).
Ciao,
Matteo
Hello Matteo,
I was going to use extruder coming from the left (similar to the OUR NETWORK tab in the demo) but when I look at your demo page in IE7 there is a problem. The content is showing when the tab is closed. Has anybody gotten it to work in IE7? It seems to slide out okay and the second tab beneath it seems to work.
Your help would be appreciated.
Thanks!
Hi Hemrie,
this issue has been solved in the last release candidate 1.8.6; here is the download: http://github.com/pupunzi/jquery.mb.extruder/zipball/1.8.6rc1
Bye,
Matteo
THANKS!!!!!!!!!!!!!
I’m having the same problem:) Just ie7. I’m seeing the posts hanging outside the left extruder. (LOVE this btw) I don’t support ie6 so I don’t care what it does there.
Hi Krysta,
IE7 has some unblocking dispaly issue… sorry.
Bye,
Matteo
Hi Matteo!
How can I add an image on the tabs instead of Text (Title)… there is a way to do that ?? Keep the good work… It is really good.
I would appreciate your help.
Tks.
Hi Rodrigo,
Actually you can add images only on the extruder top flap, not on the left one.
You can add your image by writing the img tag as title:
class="{title:'<img src=\'http://www.mondografica.it/wp-content/uploads/2008/06/free_vista_icons.jpg\'> extruder top', url:'parts/extruderTop.html'}"Hope to add this feature in the next release.
Bye,
Matteo
hello i have a left panel and a top panel but when i start the site the toppanel is open the left is closed i dont understand why is the top open it closed after 2000 by setting in autoclosed can i take a comand to closed all pannels at start ??
my content is a login form in the top panel and the code is
db= data table mysql
$(function(){
$(“#login”).buildMbExtruder({
position:”‘.$positions.’”, //db top
width:’.$breite.’, //db 200
positionFixed:’.$posfix.’,// db true
extruderOpacity:.8,
slideTimer:100,
autoCloseTime:’.$autoclosed.’,//db 2000
hidePanelsOnClose:false,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
an the php code :
close “.$row->title.”
“.$row1['title'].”
“.$loginsc .”
i have test this but that is not going nothing is showing
Hi Harry, panels should be closed at startup… it’s quite strange your top panel starts open, don’t know why…
do you have a public URL where to see it?
Bye,
Matteo
hello ,thanks for answer ok now the problem is gone away, but please take a look to my website in firefox is it ok but in ie is the button hight not ok .
how can i take the text height max =inhalt ?
Hi Harry,
try changing line 46 & 47 of jquery.mb.flipText.js:
From:
if(!tb) el.css({‘writing-mode’: ‘tb-rl’, height:h, filter: ‘fliph() flipv("") ‘, whiteSpace:"nowrap"}).css(‘font-weight’, ‘normal’);
label=$("<span style=’height:0;width:0;’>"+el.html()+"</span>");
To:
if(!tb) el.css({‘writing-mode’: ‘tb-rl’, height:h, filter: ‘fliph() flipv("") ‘, whiteSpace:"nowrap", lineHeight:fontsize+2+"px"}).css(‘font-weight’, ‘normal’);
label=$("<span style=’height:0;width:0;line-height:0;’>"+el.html()+"</span>");
Bye,
Matteo
Hello Matteo, excelent work.
Man, i need to use it on one proyect im building, but i need to display the FLAPS from the right side of the browser… can you help me out?
Hi Carlos,
.
this issue has been added in the latest release candidate 1.8.9rc1; if you want you can download it here: http://github.com/pupunzi/jquery.mb.extruder/zipball/1.8.9rc1
be careful that this is not yet a public release and it could have bugs
Let me know if it works fine,
Bye,
Matteo
Great Component! I’ve made a small change that I think others might like. I want the “tab” to be more of a toggle. So if i click it a second time when its open, it automatically closes it. I noticed if you click it a second time, it actually starts to mess things up even when you click outside the panel. Adding a simle hasClass function in openMbExtruder will solve it:
openMbExtruder:function(c){
var extruder= $(this);
if (extruder.hasClass(“open”))
{
extruder.closeMbExtruder();
}
else
{
$(document).unbind(“click.extruder”+extruder.get(0).idx);
var opt= extruder.get(0).options;
extruder.addClass(“open”);
if(!isIE) extruder.css(“opacity”,1);
var position= opt.position;
extruder.mb_bringToFront();
if (position==”top”){
extruder.find(‘.content’).slideDown( opt.slideTimer);
if(opt.onExtOpen) opt.onExtOpen();
}else{
if(!isIE) $(this).css(“opacity”,1);
extruder.find(‘.ext_wrapper’).css({width:”"});
extruder.find(‘.content’).css({overflowX:”hidden”});
extruder.find(‘.content’).animate({ width: opt.width}, opt.slideTimer);
if(opt.onExtOpen) opt.onExtOpen();
}
if (c) {
setTimeout(function(){
$(document).one(“click.extruder”+extruder.get(0).idx,function(){extruder.closeMbExtruder(); console.debug(extruder.get(0).idx)});
},100);
}
}
},
Thank you very much, worked a treat!
Hello Matteo,
I am a student in computer science in France. And I wonder if it is possible that I use
your mb.extruder for my homepage ? What’s the terms ?
I really appreciate your work. I hope to hear from you soon.
See you later
Hi Luccio,
of course you can use it on your site, all my components are under GPL, MIT licence, so just leave a reference to me on your page code.
Bye,
Matteo
Is there a way to delay the opening of an extruder panel?
I hsvr multiple extruder panels over the top of each other and I would like the first panel to close before the next one opens, adding a small delay to the second panel opening should allow time for the first one to close.
Hi Alan,
no, there’s no parameter to set a delay for the open panels action; as I can understand you don’t like that each extruder panels closes other panels while it’s opened…
You can add yourself a timeout delay around line 322 of the original code,
content.slideDown(400);Bye,
Matteo
Hi, from where i can download this widget?????
Hi muhammad, the link is on the page… click on the SAVE button… anyway here is the direct link:
http://github.com/downloads/pupunzi/jquery.mb.extruder/pupunzi-jquery.mb.extruder-1.8.1.tar.gz
Bye,
Matteo
Hi,
This is a very awesome plug-in.. great work! I am currently working to get it into an Adobe AIR application. It works perfectly fine when the position is “top” but if I change it to “left” nothing appears.
Thanks,
–Dave
Hi dave,
is i possible to see your page on line to get what’s going wrong?
Bye,
Matteo
I can zip what I have and send it to you some how. The application I am working on is not public.
–Dave
Hi Matteo,
Great work, very impressive!
I downloaded the extruder and it seems to be working fine except that the top menu wouldn’t drop down if I click it and the left ones do slide but they wouldn’t show the external html contents, what am I doing wrong?
I’m using your demo,
http://localhost/pupunzi-jquery.mb.extruder-b22a229/demo.html
Thanks.
Hi Matt,
I put it online if you wanna take a look: http://www.moemaamoun.com/demo/extruder/demo.html
I’m not certain what I’m doing wrong, but would appreciate your help.
Thanks.
Hi Moe,
Extruder content you can’t see are loaded via Ajax using POST method; your server doesen’t seam to allow POST (405 Method Not Allowed).
You can solve this problem either asking your provider to allow POST requests or changing all the ajax call in the mb.extruder.js from POST to GET.
Bye,
Matteo
Hi Matt,
Thanks a lot for your reply, changed it and it worked like magic! Really useful.
One last question: Do you reckon I’d face the same problem with the image gallery?
Thanks.
Moe.
Hi Moe,
mb.gallery doesn’t use ajax to load images; you should not have the same problem.
Bye,
Matteo
Hi Matt,
Thank you for your quick responses!
I have one more problem, everything works fine now, except that I wanted to put an RSS feed in the sliding tab.
The tab seems to load the html fine, but it doesn’t load the RSS feed in google chrome or safari, it does work perfectly well in firefox and ie8, haven’t tested on 7 yet, but so far it seems to be something is about the compatibility with chrome and safari.
Can you help?
Here’s test address: http://www.moemaamoun.com/test.html
Hi Moe,
don’t really know… the error is shoot by the rssfeed function; it’s returning undefined…
TypeError: Result of expression '$('#feed').rssfeed' [undefined] is not a function.You can try to call this function at the end of the called page instead of on document ready; once you insert content via ajax the document is already ready so the function you are invoking is called before the element is written in the page; if you move the function at the end it will find the element and it should work.
Another problem is that you should not have the header on the called page; your called page should be:
<script src="js/jquery.zrssfeed.min.js" type="text/javascript"><span style="color:Red;">html text! </span>
<div id="feed"> </div>
<script type="text/javascript">
$('#feed').rssfeed('http://www.moemaamoun.com/blog/?feed=rss2', {
limit: 10
});
</script>
Bye,
matteo
Hi Matt,
Yeap that was it, that sorted it out, it seemed like it’s true because on firefox sometimes it didn’t work untill I visited the rssfeed page, which I think cached it.
But yeah, of course putting it at the end of the page makes absolute sense! Thanks a lot.
I also think it’s worth mentioning when I moved the code inside the sliding tag, it worked fine, like a charm.
Once again, thanks a lot for everything from sharing your work to supporting it very well
Thumbs up!
Excellent piece of work. Now for stupid question…
How do I call a javascript function from clicking a menu or submenu item. In some cases, I will be wanting to implement more than one menu item to call the same function, but with different parameters.
Thanks in advance for your help.
Hi Billy,
you just have to create your function and call it via href:
on the main page you need to define the function:
function myFunc(params){// your code
}
either on the menu line drawer page:
<div id="tw" class="voice {panel:'parts/extr.tw.html'}"><a class="label" href="javascript:myFunc(myParams)">teamwork</a></div>or on submenu lines drawer page:
<div ><a class="label" href="javascript:myFunc(myParams)">some action label</a></div>Hope this can help you,
Matteo
Thanks for the useful things. These are really useful for us…
This is a really great plugin. However, would there be a reason for the Ajax POST method over GET in the demo? This was something that was kind of frustrating and I spent about 30 minutes trying to see what the issue was. It’s not a lot of time wasted, but would be nice to have this in a comment within the demo or something that’s highlighted for those who are less proactive in reading LOL.
Hi Pete,
can you tell me wich is teh reason I should use the GET method instead?
Bye,
Matteo
Hi Matteo,
this is a nice one and a gave it at try in FreewayPro. Well – Freeway is a nice and handy app that’s more oriented in designing like in a DTP app – so hard enough to implement without any code knowledge. Extruder works the more or less but what I haven’t found out yet is:
If there’s a second left panel how to style them both different. In the css I just found the /*extruder LEFT*/ style but not a /*extruder LEFT1*/ (or something like that). Could you point me on this styling issue.
The test page I’m working is:
http://www.kimmich-dm.de/extruder/index.php
Thanks for any help.
Thomas
Hi Thomas,
As you can see in my demo file you can customize your extruder element by adding a custom class to the DOM element and working on its properties via CSS;
you can see that one of the left panels has a different color (red) and if you take a look at the code you’ll see it has an “a” class used to customize it via the style on the page.
Hope this can help you,
bye,
Matteo
Hi Matteo,
i see this was a stupid question cause it is as you said an “application issue” and I found out the how to do.
Anyway I think it could be a good idea to share following thought:
jQuery is to some point very non-compatible with other scripts (prototype) running sometimes parallel on a page. Extruder is a very heavy and important implement and should not be influenced by these scripts. For this I added the following line into before tag:
jQuery.noConflict();
and let the followed script run like this:
jQuery(function(){
jQuery(“#extruderTop”).buildMbExtruder({
positionFixed:false,
…
instead of the regular “$”. Maybe this helps to a certain point in fixing some problems (and if this has been written somewhere here, sorry for another blindness)
Thomas
Thnx Thomas
Is there a way to get rid of the 1 pixel line where the exttuder shows in it’s closed position?
Hi Alan,
you can work on css to do that…
Bye,
matteo
Hi Matteo,
Well I’m completely stumped, perhaps you can help me. I have used your beautiful Expander in my website, and it works wonderfully on my local disk. Then, when Dreamweaver uploads the site to my internet server, all the content on the expander pages are gone! The tabs are there, properly labeled, but no content when expanded. I’ve checked all the links on the server, they appear to be correct. Any suggestion as to what may be wrong?
Thanks in advance,
Billy
Hi Billy,
you can solve your issue by changing from POST to GET all the ajax call in the jquery.mb.extruder.js; this happens because your server doesn’t allow POST ajax requests.
lines: 190, 311. that could solve the problem.
Bye,
Matteo
Hi Matteo:
Why the restriction “no more than 1 extruder on top”? Commenting out that part of your code in mbExtruder.js, and positioning by hand seems to work just fine, thus:
<div id="flapHello" class="flapt {title:'Hello', url:'', lpos:'680px'}"> ...
and then after init
$(".flapt").css({top:"49px", left:"auto"});
$(".flapt").each(function (i) { // use metadata lpos:'Npx'
$(this).css("margin-left", $(this).metadata().lpos);
});
Hi, can you send me prewiev of your succesing place more than one slider on the top? I need doing it as you. Thank a lot .
Hi,
Thanks for you really great job.
I wonder if it’s possible to expand menu items by a click on the menu title and not only tru the icon on the right.
Hope you’ll understand ^^
Regards,
Erick
Hi Erick,
actually mb.extruder does it automatically if you don’t print out a link as label of the menu voice:
The above code open the panel by clicking on the labeland on the icon
<div class="voice {panel:'parts/extr.creativity.html'}" panel="parts/extr.creativity.html">
<span class="label" style="cursor: pointer;">mb.creativity</span><span class="settingsBtn" style="opacity: 0.5;"></span>
</div>
The above code open the panel only by clicking on the icon
<div class="voice {panel:'parts/extr.components.html'}" id="top2" panel="parts/extr.components.html">
<a href="http://pupunzi.com/#mb.components/components.html" class="label">mb.jquery.components</a>
<span class="settingsBtn" style="opacity: 0.5;"></span>
</div>
Bye,
matteo
Hello,
thanks a lot for your answer but here what i did :.extruder .settingsBtn{
display:block;
position:absolute;
width:100%; /* Erick*/
height:36px;
/*background: url(“../elements/settingsBtn.png”) no-repeat bottom; Erick*/
cursor:pointer;
right:-3px;
top:-4px;
/*z-index:1000;*/
}
It works as i want like that, cliking on the label doesn’t work for me.
Thank’s again for your great work and answers.
Erick
Hi Matteo,
Thanks for sharing this wonderful extruder . Nevertheless my extruder doesn’t show any content.
I tryed everything bud nothing worked.
Please give me a clue
Marcel
Hi Marcel,
Here you can find tha answer: http://jquery.pupunzi.com/questions/554/mbextruder-method-not-allowed
bye,
matteo
Hi Matteo, first i want too congratulate you for your excellent work.
I use MbContainer, and its a very good container I like its feeling and the way i can parameter it.
Anyway, i discover now Extruder, and it is THE solution for an idea in a little web app i’m developping.
I’ve just a little question. Is it possible to change the flap using image icone instead text.
I suppose i can do by modifying css, but is there an other way ?
Thank you very much
ps sorry for my english I’m french
Guillaume
actually i found a way to replace text by image in the flag.
I just do a $(“.flapLabel”).remove(); after executing the buildMbExtruder function in order to remove the flag label element.
Next i modify the css .extruder.left .flap style adding a background-image properties and it works.
Maybe it isnt the best way to add an image, but it work.
I have the same problem.
Can you explain in more detail how to replace text by another image.
Hi rajeev,
actually there’s no builtin solution tosolve the problem; the solution provided by Guillaume is valid:
Hope to update the extruder giving this feature as soon as possible.
Bye,
Matteo
Very nice work
)
I’d love to use it but I have a cross browser issues.
The tabs show well on chrome but when opened the content is not loaded.
I’m testing the demos on version 2.0.
Is there any fix for this please?
Thanks
Steven.
Hi Steven,
Chrome doesn’t allow ajax calls from a local file (I don’t know why!), anyway it will work once published on a public server.
If it still doesn’t work, and at this point should not work on all the browsers, that means your server doesn’t allow ajax calls using POST methods. To solve this second issue just change the call method from POST to GET in the mbExtruder.js file.
Bye,
Matteo
Hi Matteo Bicocchi,
Congratulations. I am, just like you, a jquery addicted and I am positively surprised by this plugin. I was trying to find a “bottom docking menu” for quite some time but on google just appears a “MAC-style-like” one.
I have a small doubt: On your demo, on the “div#extruderBottom” if I place inline the HTML data from the extruderLeft.html and remove the “url”, the dock menu will not appear with the rounded corners…
You can see the screenshot here: http://yfrog.com/f/5i29736515p/
Thanks in advance,
Bruno.
Hey. The plugin looks fantastic and I really want to get it working. I’m trying to plug it into Drupal and am having the following error returned.
TypeError: Result of expression ‘$(“#extruderTop”).buildMbExtruder’ [undefined] is not a function.
Is this because something is being called in the wrong order. Just can’t seem to crack it and everything else seems to be in the correct place.
Help appreciated.
Hi David,
I’ve never worked with Drupal and I don’t know how to implement js plugins on it.
it seams your page can’t see the buildMbExtruder function… maybe you are pointing to a wrong path… did you try to debug your page with any developer tool to get a more comprehensive error description?
Do you have a public URL where to test your code?
Bye,
matteo
Hi Matteo
Thanks for your reply. I’m currently bashing it around here: http://ifg-hk.com.s106474.gridserver.com/
I’ve not created any content for the extruder. Just trying to get a working version first. I’m using safari’s de-bugging tools which aren’t a great deal of help for anything other than identifying the error.
Any thoughts?
Thanks
Thanks
Hi David,
As I can see from yor page code you included all the js calls of my demopage… you should include only the one relative to the extruder you want to show on your page:
$(function(){$("#extruderTop").buildMbExtruder({
positionFixed:false,
position:"top",
width:350,
extruderOpacity:1,
autoCloseTime:0,
hidePanelsOnClose:false,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
than, on the body of the page, where you define the extruder div, you should define the extruder attribute as you see on the demo page:
<div id="extruderTop" class="{title:'extruder top', url:'parts/extruderTop.html'}"></div>At the moment this is what can I suggest. Try this changes and let me know…
Bye,
Matteo
hi Matteo ,
great job…i want to use ur plugin in my login page of my site, so whenever i will click “register” option in my login page the register form comes out from top…how can i implement this ?
Hi Arpit,
As you can see on the demo file mb.extruder expose several methods that can be called from outside the component; one of this method open and close any extruder on the page.
The code to open an extruder from any event s:
$('#extruderTop').openMbExtruder(true); on your “register” element add an onclick event calling the function where “extruderTop” is the ID of your extruder.You can see the DOC page at this url: http://github.com/pupunzi/jquery.mb.extruder/wiki.
Hope this can help you,
Matteo
E un plugin davvero fantastico. Grazie mille Matteo.
Hi matteo, i’ve an other question.
Is it possible to modify the vertical spacing between the top of the first left extruder and the top of the body ?
And is ti possible to change the spacing between extruders flap?
Actually i want extruders-left flaps move on the horizontal axis to get the optimal space when i resize the window
Thank you very much
Actually, i have a page scrollable, with 4 extruders on the left.
If my browser window is to small, i have to scroll to see the lasts extruder flap.
So i used the positionFixed option = true to have the content panel on the good position.
But with this option, when i scroll my page (if the navigator is too small), i cant see the lasts bottom panels.
I will try to change your code, if you have a fix, it would be great.
Thank you
Guillaume
Ok i found an issue.
I put the positionFixed=false, and i added a little script on windows resizing event to resize the ext_wrapper div to the good size and it solves my problem. Howover, if there is a solution for the first question (modify the y-position of left flaps) i would be happy !
thank you for your work
Guillaume
Hi Guillaume,
I found at that in the “mbExtruder.js” file, you have line 39 (in the defaults settings) “flapMargin:25,” which changes the space between flaps.
Eela
Hi,
Is there a way to get this to open using on rollover instead of onclick?
Great code!
Thanks!
Hi Rob,
If you follow this link http://github.com/pupunzi/jquery.mb.extruder/zipball/2.2 you can download the 2.2 prerelease of the mb.extruder component with a new feature that let you define the time in milliseconds to open it on mouse over (“autoOpenTime”).
I’m still working on it so it could be buggie; let me know if it works for you.
bye,
Matteo
Hey. I have been getting errors in Safari and Chrome that send the tabs to the bottom of the page. refresh fixes but initially it doesn’t work.
http://www.mcg.edu/mobile/medlab/cbcshorthand.html
I tried to replicate your issue but it works fine for me… sorry
Thanks for the great code. I am playing with it now.
Regarding the GET/POST issues, i have found this solution for IIS7 MS KB942051. Resolution 2 is the one that I employed (literally renamed the hml file extension to aspx) and everthing worked. I (obviously) also changed the names of the files in the demo code as well.
I am not sure if there is another solution for Apache, etc, but this seems to work for IIS.
I hope this helps someone.
Cheers!
Hi Atron,
Thnx for your post.
Bye,
Matteo
hola Mateo..tengo mi pagina modulada en php..es decir, tengo un menu(mbMenu) y cargo dinamicamente el contenido mediante “jQuery”, mi problema es que cada ves que cargo el contenido de la pagina que crea el “extruder” , la primera vez lo crea pero la siguiente ves aparece le error: “more than 1 mb.extruder on top or bottom is not supported jet… hope soon!”. Mateo….como puedo destruir el extruder que ya existe? hay algo asi como: “jQuery(“#extruder”).destroyMbExtruder();” ??? . intente con jQuery(“#extruder”).empty(); pero no funciono…ES MUY IMPORTANTE..Gracias..te escribi la pregunta en español(mi idioma) e ingles..
ANDRES.
Hello Matteo .. I have my php page .. modulated ie I have a menu (mbMenu) and dynamically load the content using “jQuery”, my problem is that every time I load the contents of the page that creates the “extruder” The first time I created but it appears you see the following error: “more than 1 mb.extruder on top or bottom is not supported jet … hope soon!”. Matteo …. as I can destroy the extruder that already exists? There are something like: “jQuery (” # extruder). destroyMbExtruder (); “?? . try jQuery (“# extruder.”) empty (), but did not work … IT IS VERY IMPORTANT .. Thanks .. I wrote the question in Spanish (my language) and English ..
ANDRES..
Hi Andres,
.
I can’t speak spanish, so I’m answering in english
The mb.extruder component sets a global object (document.extruder) where I store a counter for each extruder created on the page; this is needed to evaluate the “top” position for left and right extruders’flaps and to prevent the creation of more than 1 extruder on top and bottom (actually I’ve to manage the position for top/bottom multiple extruders). In your case just reset the top counter before reinitializing the extruder as follow:
document.extruder.top=0.I think this should solve your problem.
Bye,
Matteo
Thanks !!!!!! IT WORKS !!!!! BYE
Hello!
it is a really cool tool!
But is it possible to let the real site content being adjustable in their widths?
If I pull the menu off, the content should be going smaller. Do you know what I mean?
Thanks,
Martin
hi Matteo!
i am not sure if this a double post, my browser was a bit idle when i pushed the post button 5 mins ago, so
Thank you for this excellent plugin!!!!!
as you can see i am using it already in my site -> studiomoccoro.com
i got 2 questions for you.
a) would it be possible to have top and bottom placed on divs just like right and left extruders do?
b) where is the donation button?
tnx again,
george
Hi George,
Actually you can place just one extruder for the top and one for the bottom. When I’ll have time I’ll work on this feature.
I’ve no Donation button exposed but, if you want, here is a Paypal link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DSHAHSJJCQ53Y
Bye,
Matteo
Ciao Matteo,
Scusami se uso i commenti per chiederti questa cosa ma… ho provato a caricare gli stessi file su 3 diversi servizi di hosting (tutti linux/php) e su due dei tre non mi carica i contenuti all’interno delle maschere mentre nel terzo funziona perfettamente. Premendo sulle linguette laterali si apre una banda vuota mentre i menù top e botton non partono proprio ( si vede solo una piccola linea nera).
Ho provato a cercare se cèra qualcosa da settare ma nn ho trovato nulla.
Spero ci sia una soluzione perchè il componente che hai creato è davvero bello e mi piacerebbe poterlo studiare meglio.
Grazie e buona serata
Giacomo
Ciao Giacomo,
Il tuo problema è quasi certamente dovuto al fatto che i server su cui non funziona non accettano chiamate ajax che utilizzano POST; per risolvere il problema devi cambiare nel file mbExtruder.js, dove vengono fatte chiamate ajax (linea 207 e 329), da POST a GET il type della chiamata.
Fammi sapere se questo risolve il problema,
Ciao,
Matteo
Ciao Matteo,
funziona perfettamente.
Grazie per l’aiuto e alla prossima
I am working with your plugin. It’s great stuff so far. My issue is this. I downloaded the package. The demo’s work fine.
I then start importing the pieces of code into my separate page and updating all the references as needed. I am missing something and Ive been racking my brain for days trying to figure it out.
I cannot get any of the labels to show text. The part where the titles should be. I get a blabk flap in the “left” position and an empty flap in the “top” position.
I looked in the error console and I seen this error:
Error: extruder.find(“.flapLabel”).getFlipTextDim is not a function
Source File: file:///D:/!backup/Web%20Studio/project1/lib/mbExtruder.js
Line: 121
I included the js files in the exact order you have it in the demo. They all link correctly. snippet from html page
$(function(){
$(“#FBfeed”).buildMbExtruder({
position:”left”,
width:300,
textOrientation:”bt”,
extruderOpacity:.8,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
And here is the call…
wow, 2 days of banging my head on the desk and 5 minutes after i decide to post here, i find my mistake. apparently lib/javascript is not a correct type. Stupid typo… great script man!
You can delete this post in its entirety if you want.
Hi Matteo,
Great Work!.
Is it possible to change parameters after once we buildMbExtruder ?
for example:
#(‘nofify’).buildMbExtruder({
positionFixed:true,
width:820,
…
})
after that in an another function I want to change the width to 1000px without changing the content or closing it.
Hi!
Is there the possibility to change an item title after the extruder is created?
Thanks in advance, and thanks for your work!
Hi,
is there the possibility to change a flap label text, after it has been created?
Thanks in advance, and thanks for your work!
Hi Marco,
you can change the extruder top and bottom label but not left and right actually.
for top and bottom extruder label:
$(“#yourExtruderID”).find(“.flapLabel”).html(“your text”);
I’m working on a method to change labels for left and right extruders.
Bye,
Matteo
If you want to change the extruder left/right label you can do as follow:
$(“#yourExtruderID”).find(“.flapLabel”).html(“your text”).mbFlipText();
It works for me.
Bye,
Matteo
Hi, if I use mb.extruder together with lightbox. If a user clicks on the lightbox URL for an image (rel=”lightbox”) instead of opening the modal form the lightbox the user gets the content of the image in the browser.
Are there known issues with lightbox and mb.extruder?
Thanks!
Hi Koen,
do you get some specific error on the page?
Bye,
Matteo
Hello Matteo, sorry for the late reply. No, no real error message. I solved the problem by some visual changes. Thanks for the reply though.
Hi Matteo,
I’ve got your extruder working very well on my page (you’ve seen it in the other comment on the mbtabs section) and i’ve managed to get it to open from the main menu using:
$('#extruderLeft2 .flap').click();as an extra do you know how i would automatically select a radio when the window opens or with the onClick?
Thanks in advance for input.
Regards,
Duncan
Here’s the link again: Chadderton website
The extruder is invoked when you select one of the ‘find a property’s’.
Hi Duncam,
1) there’s a method to open the extruder from an external event:
$('#yourExtruderID").openMbExtruder(true). So you don’t need your custom method.2) the mb.extruder component has an “onExtOpen” callback event that is invoked once the extruder is opened.
The code could be something like:
function myFunc (extruderID, radioID){
$.mbExtruder.defaults.onExtOpen= function(){
$("#"+radioID).click();
}
$('#"+extruderID).openMbExtruder(true);
}
then on your menu voice invoke the function with the correct parameters.
Bye,
Matteo
P.S.: I notice that in the left extruder the position absolute of “question_one” element is breaking the smoothness of the extruder; you should try to keep it relative to work fine.
Hi Matteo – lightening reply thank!
apologies for the post below but my browser wasnt registering the one you replyed to!!
I’ll give the above a try out and report back.
Cheers,
Duncan
Hi Matteo -
I’ve modified the function to:
function buyToggle (extruderLeft2, buyradio){$.mbExtruder.defaults.onExtOpen= function(){
$("#"+buyradio).click();
}
$("#"+extruderLeft2).openMbExtruder(true);
}
to suit – and placed the
Properties For Saleon the menu button.
Now i’m getting the error:
Error: extruder.get(0) is undefined
Source File: http://www.chaddertonestates.com/scripts/mbExtruder.js
Line: 211
I know i’m close !!
Regards,
Duncan
The parameters to pass to the function must be two string rapresenting the IDs of the elements:
The function:
function myFunc (extruderID, radioID){
$.mbExtruder.defaults.onExtOpen= function(){
$("#"+radioID).click();
}
$('#"+extruderID).openMbExtruder(true);
}
How to invoke it:
myFunc ("extruderLeft2", "buyradio")Bye,
matteo
Hi Matteo –
It’s still not playing nice!
Functions:
function buyToggle(extruderID, radioID){$.mbExtruder.defaults.onExtOpen= function(){
$("#"+radioID).click();
}
$("#"+extruderID).openMbExtruder(true);
}
function rentToggle(extruderID, radioID){
$.mbExtruder.defaults.onExtOpen= function(){
$("#"+radioID).click();
}
$("#"+extruderID).openMbExtruder(true);
}
And the button reaction to invoke them:
onClick="javascript:buyToggle('extruderLeft2', 'buyradio');"onClick="javascript:rentToggle('extruderLeft2', 'rentradio');"
Soooo close!
You can call the same function passing different parameters, not necessarly dupliate it…
first call: onclick=”myFunc(‘extruderLeft2′, ‘buyradio’)”
second call: onclick=”myFunc(‘extruderLeft2′, ‘rentradio’)”
Anyway try this:
function myFunc (extruderID, radioID){
$(“#”+extruderID).openMbExtruder(true);
$(“#”+radioID).click();
}
I tested it and it works fine.
Hi Matteo – yeh it’s working great.
Thanks so much for all your help and patience!
Merry Xmas.
D
Hi Matteo,
I’ve got your extruder working very well on my page (you’ve seen it in the other comment on the mbtabs section) and i’ve managed to get it to open from the main menu using:
$('#extruderLeft2 .flap').click();as an extra do you know how i would automatically select a radio when the window opens or with the onClick?
Here’s the link again: Chadderton website
The extruder is invoked when you select one of the ‘find a property’s’.
Thanks in advance for input.
Regards,
Duncan
Hi again Matteo,
I’m just IE fixing the site and I’m having a few problems with the extruder closing when a drop down is selected, it works fine in FF but IE 7 & 8 have this problem.
any ideas?!
Thanks in advance.
D
Hi author,
This app works file with Chome, but not IE 8 when I use chinese (Big5) word as tab title. They look upside-down in IE.
Terry
(HK)
Hi again Matteo,
I’m just IE fixing the site and I’m having a few problems with the extruder closing when a drop down is selected, it works fine in FF but IE 7 & 8 have this problem. Its the same site that I posted about previously.
any ideas?!
Thanks in advance.
D
Hi Matteo – I still haven’t found a solution for the extruder closing when a drop down is selected, i’ve search through the posts and been on other forums with no joy.
I would appreciate a little help!
here’s the link again: Chadderton
Thanks in advance.
D
Hi Matteo,
This is great!
Is there a way to make this work when Javascript is off?
Thanks.
Hi,
All my components are javascript based so they’ll not work if javascript is disabled. Sorry,
Bye,
Matteo
Component “jquery mb.extruder” no works in Opera 10.0.0.1156 Final !
Hi,
I am using extrude bottom. How can i get it open when the page loads?
Hi,
As you can see from the demo page you have a specific method to open an extruder:
$.fn.openMbExtruder(true)the boolean define if the opened extruder should be close once you click anywhere on the page.Just apply this method to the extruder you want to open in that way:
$(function(){
$("yourExtruderID").openMbExtruder(true);
}
See the documentation for better explanations: https://github.com/pupunzi/jquery.mb.extruder/wiki
Bye,
matteo
Sorry Matteo,
I added the code:
$(function(){
$(“extruderBottom”).openMbExtruder(true);
}
to the head of my HTML page. But it is not working.
I need the extruder open in the initial stage itself.
Help me please.
Thanks…
If your extruder ID is “extruderBottom” than the code should be:
$(function(){$(“#extruderBottom”).openMbExtruder(true);
}
In jQuery the id selector identifier is “#”; the class identifier is “.” as on CSS.
Bye,
Matteo
All your plug-ins are brilliant. Thanks so much.
On my website I have tried the extruder with Top ist is working but there is an content error
Do not know where I can fit this
Regards
Hi Kazama,
I should see your page to understand what’s going wrong with your code…
Bye,
Matteo
Lets me describe it like this. The Content of the extruder is displaced. I think css must be modified but what in detail?
I was viewing your demo using Safari 5.0.3 and fairly quickly broke the plug-in. First off, does the demo at http://pupunzi.com/mb.components/mb.extruder/demo/demo.html use the most recent updates to the plug-in?
I had clicked on the sublists on the top left navigation panel, they closed, but would never re-open. That is consistent every time I try the demo. . However at one point, I was opening and closing that navigation list and then the contents went blank – just an empty box. In fact all contents of all extruded panels were then empty. Restarting Safari did not fix this, but emptying the cache did. I love your plug-ins they are very inspirational, but the ease with which this particular plug-in broke makes me wary of using it. I will try to see if I can recreate what I did when it broke, which was just opening and closing the top left panel using the tab and the buttons on the page.
Hi Scott,
The demo uses the 2.0 version while the latest public is at 2.1 and on gitHub youìll find the 2.2.
I’m not able to replicate yor issue; the content of the tab are loaded via ajax and your problem could be due to a failed call to the content page and could even be possible that Safari cahed the response… If you have problems on your component impementation you could try to add a custom number to the content URL of the panel to be sure Safari doesn’t cache it;
You can do it at line 199 ->
var url=this.options.url +"?" + new Date().getTime();and at line 332 ->
data: voice.attr("data") +"?" + new Date().getTime(),if your ajax content is a dinamic page with params on the querystring than you should add the date directly on the URL.
This should prevent any caching problem.
Bye,
Matteo
Hello,
Great work. But need some help please. I’m trying to integrate data table (jqGrid) into a page using your extruder menu but did not get it to work. I need to load different grids from the menu.
Here is a link to jqGrid demos:
http://www.trirand.net/demophp.aspx
Would you like to help?
Thank you.
-Fadi
Hi,
I cannot load internal pages .. each page should have the extruder included in it??
we cannot load different pages (php scripts) inside a single one page having extruder???
Maybe using DIV
!
Thank you.
-Fadi
I would love to integrate mbExtruder with my website but somehow I don’t get it right. It seems to work with Google Chrome, Safari and IE8, although, I can’t override any css. In FF the mbExtruder component doesn’t show up at all.
Here is a link
http://yukonlive.ca/yukonlive/extrudertest.faces
Any help would be greatly appreciated.
Stephan
Hi Matteo,
I think mbExtruder is one of the most useful jQuery plugins I came across, however, I couldn’t get it to work in FF with my setup. So, I gave it another try today and finally figured out what caused my issue. To make it short I put it in the wrong of my FacletTemplateClient.
Everything is working as expected now and I just want to thank you for providing such an innovative suite of jQuery plugins. Must have something to do with the great artistic tradition of the city you are living in.
Thanks again.
Stephan
Hi very nice plugin. Am still trying to get hang of it but one thing is killing my enthusiasm. When i load large tables say: Table with 5000+ rows the scrolling and resizing dies down, page up and down keys scroll just fine…. I am using the tables plugin to filter rows on client side. I know pagination is an option but still is there a fix for this?
Please advise.
Hi Ziggyz,
We all have problems with consistent tables like yours, expecially using IE…
The only suggestion is to limit the rows per view with pagination, no other solution. The DOM become really heavy and javascript became slow traversing it…
Bye,
Matteo
I am trying to get the extruder to work inside your tabs – but they are docking to the screen instead of inside of the tab.. I tried adjusting positioning to relative, which gets it inside the tab, but then it stays hidden. Maybe someone has a working example done so I can learn from that? Thanks
(Also, if the accordian has any issues of going into a tab, I would love some sample code on that; especially since I’d really like to embed an accordian inside the extrude inside the tab
Hi Matteo,
Thanks for this extruder which help me a lot ! Easy to use and modify.
Just a few question : When I click on the page (not in the content extruder div), all extruders are closed.
How to desactivate it ? I would like to keep the opened extruder visible.
I have tried all parameters but nothing works.
Tanks for your help
Hi Laetitia,
if you set to false the “closeOnExternalClick” property once you initialize the extruder than it will not close clicking outside.
This will at the same time let tow or more extruders to be opened at the same time.
Bye,
Matteo
Hi Matteo,
I was able to put a scrollable inside an extruder for the purpose of rotating image ads. Everything works fine except it seem I can’t bind a click event to an element or an element.
Binding a click event works in a scrollable as well as in an extruder but not if I put a scrollable inside an extruder.
My code for binding a click event looks like this:
…
if ( imgData.adValue > 0.0 ) {
a.href = ‘http://’ + imgData.pageLink;
a.target = ‘_blank’;
// attach click event
jQuery(a).bind(‘click’, function(event){
event.preventDefault();
jQuery(‘#rvRentalsExtruder’).closeMbExtruder();
jQuery.colorbox({
href: ‘http://’ + imgData.pageLink,
iframe: true,
width: ’85%’,
height: ’85%’
});
});
}
else {
a.href = ‘#’;
}
…
Do you have any idea what prevents the binding?
Thanks,
Stephan
Hi Stephan,
You should consider that the content into the extruder is rendered on the page just when you click on the extruder flap. If you whant to attach events to extruder content elements you should run the function into the “onExtContentLoad” extruder callback.
Hope this can help you,
Matteo
Hi Matteo,
thanks for your reply.However, I have played with the extruder functions before and the only way to get scrollable to work in extruder is to put the scrollable initialization code into “onExtOpen”. At any other location scrollable doesn’t scroll and just stays at the first image.
As I have mentioned in my last post if I put an “” element in to extruder and bind a click event this works just as expected, but not if the image elements are part of a scrollable and in an extruder.
Unfortunately, Firebug and Chrome dev tools don’t give any clue why the binding of a click event fails.
In addition I seem to have a styling issue too. I want to change the background color of the extruder but this css doesn’t do the trick:
.extruder .content {
background: transparent !important;
background-color :#000 !important;
}
Stephan
Hi Stefan,
When do you initialize the lightbox function for images inside the extruder?
You should do that once images are dwritten in the page otherwise it can’t work.
Bye,
Matteo
Forgot … here is an unofficial link
http://yukonlive.ca/labs/campgrounds.faces
If you click on an image in the extruder a new tab will open instead of opening the link in a lighbox within my website.
Problem solved!
Hi Matteo,
it looks like the order of initialization caused my problem. I first initialized the scrollable and then the extruder. After changing the order everything works the way I want it.
Thanks for providing such great plugins.
Stephan
Hi Matteo,
if you add content inline the background color seems to be always dark gray and I couldn’t find a css way to change it. The only thing that I could change was the opacity with
.extruder .content {
opacity: 0.9
}
or
.extruder.right .ext_wrapper {
opacity: 0.9
}
but setting background or background-color or both has no effect.
Could you please help on that?
Thanks.
Stephan
Very impressed with all your plugins and very appreciated to you for sharing them (using a couple).
Have a recommendation though: since recent browsers support CCS3 why not delete the “-moz-” prefix in css styling to allow rounded corners and shadows also in IE9 and Chrome/SRWare Iron browsers.
Hi,
Thanks for the advice, I’ll remove the prefix.
Bye,
Matteo
Let me correct my advice since removing the prefix will invalidate the effect on older Firefox versions.
Instead just add a new line with the same effect but without the “-moz” prefix.
sorry for that and keep up the good work
The text on the extruder flaps does not display properly when you zoom out while using Chrome. Is there a fix/workaround for this?
Thanks,
Ed
Hi,
Try to set the overflow of the flap to “hidden” on the CSS.
Bye,
Matteo
Hi,
Thanks for getting back to me on this. However, I am still experiencing this problem. I see the same issue when zooming in/out on your extruder demo page (only when using chrome). As you zoom out, the text on the flap gets cut off and becomes unreadable. Does anyone have any ideas on this? I am stumped.
Thanks,
Ed
I am noticing some differences in the DOM between Chrome and FIrefox. In chrome, the actually has a child element . I do not see this in Firefox, and it seems as though this child element (that just holds repeated info from the parent element) is the element that is not properly resizing on the zoom. Is this the culprit, or am I looking at something wrong here? I am very new to this kind of work.
Thanks again,
Ed
Sorry to re-re-post, but it looks like the tags in my last one got cut out. What I was attmepting to say is that the object element (class=”flip_label”) contains a child svg element, and that child element does not seem to resize properly when zooming
Hi,
the SVG child is needed to flip the text and the problem seems that webkit can’t zoom this correctly. I can’t figure out how this can be solved,
sorry.
If you find a solution please let me know.
Bye,
matteo
I’ve successfully implemented. I also have a desire to know how you manage to do the letters in the shadow under the footer? It is a very nice effect. Thanks
Greetings,
I really like your plugin but it makes my site very slow and it is not W3C Valid CSS. why is that? Thank You
Hi,
If you see the validation test for CSS all the problems are relative to the specific CSS attributes for Firefox (-moz) and Chrome (-webkit) to get round corners, box shadows and text shadows; You can work on CSS by your own to remove those if you really whant to be CSS W3C compliant; anyway you should know that all off this CSS attributes are part of the HTML5 CSS3 promoted by the W3C itself…
For the speed problem, that sounds strange; this plugin has any cicle that could stress the CPU… did you try it on a recent browser like Firefox or Chrome or IE8 / 9 ?
Bye,
Matteo
i tried implementing your plugin locally, it works fine with firefox but not with chrome. the content simply doesnt load. i tried changing the type to GET instead of POST but still no change. please help me with this. i want to include your fantastic plugin on my website but i am stuck because of this problem.
Please help.
Hi Nikihil,
this is a chrome bug; it doesn’t allow local ajax call but if you run this on a server it’ll work fine.
If you want to see it working locally you should run the page inside a webserver (http://loclhost/myPage.html).
Bye,
Matteo
i want to position the extruder at the top right corner.is there a tweak available to do this? what portion of code do i need to change?
you can manage position via CSS.
#extruderTop{
left:auto !important;
right:0 !important;
margin-right:0;
}
Tried your plugin demo in safari on mac os x, the left and right sliders do open, but their content is not there, just blank. The top and bottom do not open at all. Could this be fixed?
Thanks much for this plugin!
Hi Wesley,
if you are running your page locally the problem is that the ajax calls are not executed using jQuery 1.5 or higher. if it happens on your server the problem is that your server doesn’t allow POST method.
Both problems are easily solvable:
1. local calls: in the mbExtruder.js file where you find $.ajax({… you need to add the datatype attribute to let it work: dataType:”html”, (see this article I wrote: http://pupunzi.open-lab.com/2011/04/24/jquery-1-5-2-ajax-module-and-local-files-issue/.
2. on the web server: in the mbExtruder.js file change all the ajax call type from POST to GET.
Bye,
Matteo
Actually, it was here, in your online demo.
However, I now noticed this:
Here: http://pupunzi.com/#mb.components/mb.extruder/extruder.html
It worked once, then I checked the demo in a new window and it didn’t work.
I checked the page above again, and it didn’t work any more either.
Left and right show blank areas when clicked open.
Btw, top and bottom extruder never open, on neither online demo page.
Hi Wesley,
You are right!!
It seams that Safari has some problem if the ajax call is syncronus…
You can solve this problem changing the two ajax call:
from async:false
to async:true
in the mbExtruder.js file.
Bye,
Matteo
Hello,
I would like to make the Left Extruder flap with a width:20px;
By doing this the flap is smaller but it becomes detached from the content or the border 10px.
How to fix this?
Hi Joao,
I think you should work on the “.extruder.left .flap” class in the css file; anyway this is just a CSS issue that can be solved spending a while on the CSS.
Bye,
Matteo
Hi Matteo,
thank you very much for this amazing piece of code – i love your worx :O)
I’m trying to use the mb.extruder in a coming project but i have the problem that i need 3 top extruders –
I coded to fix them on 25, 50 and 75% but failed … is there a possibility to do it general or is my idea totally bullshit?
Thanx in advance for a very much appreciated little hint
Marc
Hi Marc,
Actually the component doesn’t allow multiple top or bottom extruder elements; this is allowed only for left and right once.
If you whant to make some experiment to let multiple top or bottom extruder work than you should comment those lines of code (from 93 to 99):
if (isHorizontal){ this.options.position=="top"?document.extruder.top++:document.extruder.bottom++; if (document.extruder.top>1 || document.extruder.bottom>1){ alert("more than 1 mb.extruder on top or bottom is not supported jet... hope soon!"); return; } }This will let you define more than one top/bottom extruders.
Bye,
Matteo
P.S.: if you produce some nice piece of code please let me know.
Bye,
Matteo
Hi,
I uploaded the file of menu but its not working properly pls see the link
http://www.landscape.pk/demo_left.html
This is due to your server that doesn’t allow GET method on ajax requests.
(The error in console: 405 Method Not Allowed – The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.)
To solve this problem you need to change “POST” to “GET” wherever into the mbExtruder.js file. Or ask your administrator to let POST calls.
Bye,
Matteo
Am I right in understanding that the only way to have accordion sub menus is via the url AJAX?
I was looking to use this for an offline web app, but this would not allow it to truly be offline, and it also breaks the Chrome security model if trying to get the files locally.
Is there any easy way to populate sub menus via javascript?
Does anyone know how i can use this tool in joomla 1.5
I have been trying to use it on an article and it strips all tag that link the scripts
Hi!
great plugin!!
i couldn’t find a way to have NESTED submenus.
it seems you can have:
1 – direct links
2 – Sub-menu where header itself is a link, when clicking on the icon on the right you can see or close the sub-links
3 – Sub-menu where clicking on the header open the sub-links
…………
but you cannot have a Sub-menu UNDER the Sub-menu etc…
Am i wrong?
Thanks
Hi Matteo, nice work! But I have a problem (sorry for my bad english)…
I´ve modiffied the css and I´ve put an image as a button, works fine in IE and Firefox, but In Safari and Chrome It appears a white square near the label, i find the code who asigns this color in jquery.mb.flipText.js on line 39: [var bgcol=(el.css("background-color") && el.css("background-color") != "rgba(0, 0, 0, 0)") ? el.css("background-color"):"#fff";] if i chanfe #fff to #000 for example it change the color.
Have you an idea of how can i do to make transparent this square? I hav not idea of .js… ¡please help me!
Thanks,
Emy
Hi again!
I´ve found the trick, i don´t know if it´s the best but works! and as I´ve seen in other comments have the same problem I decided to post here to spread it:
the black or white square is the text box, if you have an image and no need the text box (as it´s my case) you must assing a big negative fixed position to de text label:
.extruder.right .flap .flapLabel{
background:#FFF;
position: absolute;
top: -1000px;
}
I repeat, it´s a trick but it was useful for me.
Regards,
Emy
Hi Emy,
.
Just to explain why there’s that background color on the flap element:
I’m using SVG element to let the text rotate and webkit browsers doesn’t allow transparency on text boxes inside SVG; that’s why the component tries to get the background of the parent element.
Great workaround
Bye,
Matteo
Hello sir. This is great work. Well done! Can I please include the left and right extruder on the Home Page of my website? It is going to go live in a few days.
Hi Karan,
Of course you can.
Bye,
Matteo
Hi Matteo,
Congratulations on such an excellent job …… I am interested in implementing your extruder but I have a question that probably can clear my head. You can include php content? As you do?
Thank you.
Hi Luis,
Of course you can. I use to include my javascript components into our Java application; javascript works client side and how you generate the HTML code serverside doesn’t matter.
Bye,
Matteo
Hi,
Cool plugin, pretty useful, but i have a problem, and i cannot find a solution in the documentation or these replies.
I have a working left panel that loads a secondary page content from a php page, these php page must be dynamic, it loads a list of notifications that depends on a mysql database. I need that when i click the flap, the content from the php page loads, currently when i click the flap i can see that the php page loads but in an static way, it doesn’t refresh after a second click, it remains the first load content. I think that a solution could be to reload the page loaded in the left panel in an onExtOpen function, but i don’t know how to reload the content that way.
Can you help me?
Thanks in advance,
Greetings,
Cris
Hi,Matteo
I placed on my site yours sliding panel, so my biggest problem with it, is when i click outside sliding panel, it didnt close. Once it work on left side of pannel sometimes working on right side of slide pannel. sometimes the panel hangs. Is any way to resolve this bug?
Thanks a lot
Giussepe
Hi Jussepe,
I test your page and it works for me;
what browser are you using?
does it happens on the component demo page too?
Bye,
Matteo
Hi Matteo,
any plans to use the other ways to get the metadata to set the flap title besides the class attribute ? the Javascript meta class supports setting a tag to get the metadata from, and this would make it much easier for templating systems, so one does not have to fight with the multiple quiting that play against each other in such cases.
Anyway, great work!
Congratulazioni tutto questo raro evento che accade una volta ogni cento anni!
Hello, I’m incorporating the lovely mb.extruder in one of my sites. Everything about the mb.extruder works fine by itself. Although, I’d like to put the miniAudio player inside the voice panels which expand. I got a standard html5 audio src tag to show up. but it doesn’t sit nicely within the extr.components html page.,
Is there a way to get the inline miniAudio player sitting nicely in there ?
and if so, where do the specific js go ? In my index or the extr.components page (which has no head or body tag)
here’s the development thus far:
http://9walls.sunfalls.org
thanks for your amazing work !
Hi,
you can add the miniAudioPlayer as external page via ajax without any problem; see in this example how I included the YTplayer: http://dl.dropbox.com/u/1976976/extruder%2BYTPlayer.zip
And use the same logic for the miniAudioPlayer.
Bye,
Matteo
thanks for getting back., great example with the youtube background !
i figured out a simple html5 audio player, as well as using another player as well.
will give the mb.miniaudio another go soon,
i’d like to see miniaudio within the voices panel accordion style extruder.
-uxepi
oh, i have an extruderLeft opening with extruderTop.html. works fine.. and i want to put audio within the components accordion. is there a way to keep the extruder open when a user click a link within it.,and not have it automatically close:
like, to start a song playing via click, but keep the panel open. until user wants to close it ?
Hi Matteo,
either I’m dumb or blind or both. I can get the bottom to be a 100% width (.extruder.bottom .footer) but have actually no luck with the extruderTop to stretch all across the page. Does anyone have a solution for this?
Cheers
Thomas
Hi Thomas,
just set the width parameter of the initialize function to “100%”:
$("#extruderTop").buildMbExtruder({
positionFixed:false,
width:"100%",
extruderOpacity:1,
autoCloseTime:4000,
closeOnExternalClick:false
});
Hope this can help you.
Bye,
Matteo
Hello,
I love your work ! Great great job !
if you can help it will be greatly appreciate !
I have a question, I have a simple left extruder and the content is either a simple html or asp file, my issue is that the content can be long and I need to have people with small screen being able to scroll it (not the whole page just the content), I tried few thing without result, I am not so good I admit
Thanks
JP
Hi,
You can solve your issue by wrapping the content into a DIV with a “max-height:100%” and “overflow-y:scroll”; this will add scrollbars inside the extruder and you’ll be able to scroll the content.
Bye,
Matteo
Hi, I’m so glad I found your script and was able to implement it on a site I’m working on. I’m using it as a bottom drawer which will be populated with just HTML. I went ahead and styled according to my design and I have it working across browsers, android, iPad, that is pretty great! Thank you. However I’m running into a problem, when the page loads the drawer is open, every time you load. Would you mind telling me how to make it stay closed unless you click on it? Here is a link to the demo I’m working on.
beardofzeus.co/about.html
Thank you!
Hi baconegg,
I get your code locally and using the original CSS it works perfectly… So the problem you have is due to somewhat on your mbExtruder CSS file; try to compear your with the original one to find out what’s wrong.
Some minutes later…
Just add style=”position:relative;” to your “footer” element and it should work
Bye,
M
Hello, great work!
Is it possible to use mbExtruder on a wordpress website?
thanks
Hi Chris,
I think it is possible if wordpress is installed on your server as it is pure javascript; I’ve nerer implemented it directly into a wordpress installation so I can’t help you on how to do that.
Bye,
Matteo
Awsome plugin. I just need to figure out one thing. I need to auto open on page load. Any ideas?
Hi,
there’s a method to open the extruder from an external call:
$('#extruderTop').openMbExtruder(true);.Just use that as follow:
$(function(){$('#extruderTop').openMbExtruder(true);
});
Anyway there’s a Doc page you can consult: https://github.com/pupunzi/jquery.mb.extruder/wiki
Bye,
Matteo