Page 1 of 1

[TUT] How to make collapsible modules in your template

Posted: Fri Jul 04, 2008 9:26 am
by ah72
Hello all,

Here's a module chrome that adds sliding containers for your modules:

save this code in "/templates/your_template/html/modules.php"

Code: Select all

<?php
/*
 * Module chrome that adds slides for modules
 * based on xhtml chrome (if your module is styled with xhtml chrome selected, you won't lose css when you change to this chrome )
 *
 * Usage: <jdoc:include type="modules" name="module_position" style="slide" slideOptions="{put options here to override defaults for all modules in this position}" slideOptions_mod{module_id}="{put here options to be applied only to module with id 'module_id'}"/>
 *
 * Example: <jdoc:include type="modules" name="left" style="slide" slideOptions="{transition:Fx.Transitions.Bounce.easeOut, opacity:true}" slideOptions_mod1="{show:0, , opacity:false}"/>
 * The above example will add slides for modules in the left position, with transition set to 'Bounce.easeOut' and with opacity effect for modules other than module having id '1'
 *
 * Slide shown/hidden status will be kept after page refresh. To override this, use option 'show:-1' (to hide) or 'show:0' (to show) in  slideOptions or slideOptions_mod{module_id}
 *
 * If slideOptions or slideOptions_mod{module_id} are not specified as in this example:
 * <jdoc:include type="modules" name="right" style="slide"/>
 * default options will be applied, check code below to see default options. check mootools Accordion documentation to get a full list of available options
 * 
 * v1.0 - by ah72, July 2008
 * 
 */

// no direct access
defined('_JEXEC') or die('Restricted access');

function modChrome_slide($module, &$params, &$attribs){

    if (!empty ($module->content)) : ?>
        <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>" id="module_<?php echo $module->id; ?>">
            <h3 class="slide_toggler" style="cursor:pointer;"><?php echo $module->title; ?></h3>
            <div class="slide_content">
                <?php echo $module->content; ?>
            </div>
        </div>
    <?php endif;

    $defaultSlideOptions = "{
        alwaysHide: true,
        show: (Cookie.get('slide_mod".$module->id."')=='hide')? -1 : 0,
        opacity: false,
        duration: 1*Math.min(1.5*( \$E('#module_".$module->id." div.slide_content').offsetHeight ? \$E('#module_".$module->id." div.slide_content').offsetHeight : 150 ), 300),
        transition: Fx.Transitions.Quad.easeOut,

        onComplete: function(element){
            if ( \$E('#module_".$module->id." div.slide_content').getStyle('height') != '0px' ) {
                \$E('#module_".$module->id." div.slide_content').setStyle('height', 'auto');
                Cookie.set('slide_mod".$module->id."', 'show', {duration: 365});
            } else {
                Cookie.set('slide_mod".$module->id."', 'hide', {duration: 365});
            }
        },
        
        onBackground: function(toggler, element){
            element.setStyle('height', element.offsetHeight+'px');
        }
        
    }";
    
    
    if (isset( $attribs['slideOptions'] )) {
        $slideOptions = $attribs['slideOptions'];
    } else {
        $slideOptions = "{}";
    }
    
    if (isset( $attribs['slideOptions_mod'.$module->id] )) {
        $slideOptions .= ', '.$attribs['slideOptions_mod'.$module->id];
    }
    
    JHTML::_('behavior.mootools');
    $js = 'window.addEvent(\'domready\', function(){ new Accordion($ES(\'#module_'.$module->id.' h3.slide_toggler\'), $ES(\'#module_'.$module->id.' div.slide_content\'), $merge('.$defaultSlideOptions.', '.$slideOptions.')); });';
    $document =& JFactory::getDocument();
    $document->addScriptDeclaration( $js );

}
?>

refer to comments in the previous code for usage instructions

This slide effect is based on mootools Accordion

Features:
  • Slide options configurable globally for all modules in a position and individually for each module
  • Slide shown/hidden status will be kept after page refreshes
Regards

Re: [TUT] How to make collapsible modules in your template

Posted: Sat Jul 05, 2008 8:26 pm
by herb200mph
ah72: got a site to look at with the sliding modules function? I'd like to see a practical application if possible.

Re: [TUT] How to make collapsible modules in your template

Posted: Wed Sep 17, 2008 8:41 am
by pedro1966
Need help, is it possible to use this fine tool in Joomla 1.0.x ?

Re: [TUT] How to make collapsible modules in your template

Posted: Wed Oct 15, 2008 8:01 am
by ghazal
Hi,
I discovered your very interesting (and working, which is the most important) tuts through the drop-down menu.
They answered some questions for which I had trouble finding solutions.
And i really thank you for that.

Today, I choose to post on this particular thread because it displays a point that has been bothering me a bit :
the fact that you insert/translate js code in/into php syntax.
- the cons for me is that, as I, for example, am not very used to this, but used to "pure" JS scripts, it is very difficult to debug or modify.
The topic has been discussed on mootools forum
http://groups.google.com/group/mootools ... bad16fce6c

Anyway, as long as the code you write is so useful,
keep up the good work

Re: [TUT] How to make collapsible modules in your template

Posted: Sat Jan 03, 2009 2:54 pm
by bascherz
This is pure genius and extremely handy. Thanks!

Re: [TUT] How to make collapsible modules in your template

Posted: Sun Jan 04, 2009 4:34 am
by bravo6me
hi,
I install module in Joomla 1.5.8
Template Plaza Celebed Plaza,
TP News Ticker mod_tpnewsticker success fully,
and it can Enable in Module Manager,

but i never find in admin (effect type can be chosen from the backend)
how/where to enter the news headlins on this module,

please help me, i am new in joomala
please e-mail me bravo6me@hotmail.com

best regards
bravo

Re: [TUT] How to make collapsible modules in your template

Posted: Wed Jan 28, 2009 10:09 pm
by designedfree4u
I have it going in the top module location, but when i click the module link the header div dosen't extend with sliding module. Is there a fix for that?

thanks,
J/M

Re: [TUT] How to make collapsible modules in your template

Posted: Thu Jan 29, 2009 12:52 am
by bascherz
It's probably because your header style has a height specified. Left and right module positions typically don't. But that's just a guess.

Re: [TUT] How to make collapsible modules in your template

Posted: Mon Jun 15, 2009 10:09 pm
by simcfc73
Really like this by the way.

Struggling to work out how to get individual modules to accept different styles.. what i want is for some of them to be open by default.

This is what I have now

<td width="157px" valign="top" class="side2"> <jdoc:include type="modules" name="right" style="slide" slideOptions="{transition:Fx.Transitions.Bounce.easeOut, opacity:true, show:-1}" /></td>

I would like module 18 to use the show 1 so its open... where so I put it?

Tried a few different ways but can't work it out.

Any help would be great.

Re: [TUT] How to make collapsible modules in your template

Posted: Wed Aug 04, 2010 4:34 pm
by bplumb
Hi all,

Sorry, this is probably a real n00b question, but where do I put the

<jdoc:include type="modules" name="left" style="slide" slideOptions="{transition:Fx.Transitions.Bounce.easeOut, opacity:true}" slideOptions_mod1="{show:0, , opacity:false}"/>

line? I'm guessing not in the module.php file?

Many thanks,

bplumb

Re: [TUT] How to make collapsible modules in your template

Posted: Wed Aug 04, 2010 5:25 pm
by bascherz
It goes in the template file where you want the module to appear (aka module position).

Re: [TUT] How to make collapsible modules in your template

Posted: Thu Aug 05, 2010 11:09 pm
by bplumb
Sorry, bascherz, is this in the template.css file then or the index.php file? Apologies for not really having much of a clue here, this is exactly the kind of thing I am looking for for our website but am really struggling to get it to work. I thought that adding it to the index.php file under the <div? section of that module would work instead of the existing <jdoc:include... would work, but unfortunataly this is not the case!

Any help greatly appreciated!

Re: [TUT] How to make collapsible modules in your template

Posted: Thu Aug 05, 2010 11:25 pm
by bascherz
Well, the original post tells you where to save the PHP file and the comments in that code tell how to format the jdoc reference that goes in your template index.php file. Not sure I can say it any better.

Re: [TUT] How to make collapsible modules in your template

Posted: Fri Aug 06, 2010 10:48 am
by bplumb
Hmm...buggered then! That is what I tried. I have added the main code underneath my existing modules.php code, then added the <jdoc:include... line to the index.php file yet it seems to do nothing.

If I wipe away all of the code in the modules.php file and only have the above code, then my modules have no titles, no background etc as the existing code pulls the styling of these. Bruce, could I possibly send you the code I have to see if you can spot anything obvious? And does anyone have a live website where I can see this working?

Many thanks,

bplumb

Re: [TUT] How to make collapsible modules in your template

Posted: Mon Aug 09, 2010 11:09 pm
by bplumb
Wahay! Sorted it. There was a ?> missing in my code! Grrr!

Can anyone help with styling this? ie, my normal module 'headings' are styled...is there a way that I can point the 'slide' module style to my original module style css?

Many thanks!

bplumb

Re: [TUT] How to make collapsible modules in your template

Posted: Sat Aug 21, 2010 12:37 pm
by bplumb
If you have several modules in one position, is it possible to make module 1 & 2 slilde, module 3 'none'?

Re: [TUT] How to make collapsible modules in your template

Posted: Sun Aug 22, 2010 2:01 pm
by bascherz
@bplumb: no, but you can certainly put two positions in the same location. I've put up to 4 in the same location that alternated having and not having the attribute.

Re: [TUT] How to make collapsible modules in your template

Posted: Sun Aug 22, 2010 11:38 pm
by bplumb
Thanks bascherz, that was my thinking. Back to the template then! :)

Re: [TUT] How to make collapsible modules in your template

Posted: Tue Sep 07, 2010 10:35 pm
by janie70
thanks for the post...it helped me tremendously.

Re: [TUT] How to make collapsible modules in your template

Posted: Sun Nov 14, 2010 3:55 pm
by polsart
Hi, firstly le tme thank you for this amazing module chrome, i am having one small problem i am trying to resolve and hoping someone has a solution.

Problem, INTERNET EXPLORER when i display a carousell inside this module position the image inside the article stays visible when the module is closed. All text from the module inside the slide module fades away nicely,

FIREFOX works a charm.

Any help or advice would be amazing

thanks

Re: [TUT] How to make collapsible modules in your template

Posted: Sat Dec 04, 2010 8:37 pm
by vampire666
I wonder if a plugin would be able to do this (that would show a new option in each module to enable/disable the collapse function, or entire module positions).

Anyhow, is there a way to style this?
Like preserve the css of the module and just add a + and - icon at the "left" or "right" of the module title.

Thank you.

Re: [TUT] How to make collapsible modules in your template

Posted: Sat Dec 04, 2010 10:48 pm
by bascherz
It's already there. You can initialize it to collapsed or expanded and click on the module title to toggle.
vampire666 wrote:I wonder if a plugin would be able to do this (that would show a new option in each module to enable/disable the collapse function, or entire module positions).

Anyhow, is there a way to style this?
Like preserve the css of the module and just add a + and - icon at the "left" or "right" of the module title.

Thank you.

Re: [TUT] How to make collapsible modules in your template

Posted: Wed Dec 08, 2010 7:59 am
by Ghonjez
Hi...

For create collapsible modules, i found useful extension for do this, might be helps :
c7Collapze Module >>> http://extensions.joomla.org/extensions ... ling/11339

regards :)

Re: [TUT] How to make collapsible modules in your template

Posted: Tue Apr 10, 2012 7:30 pm
by certico
I have updated ah72's code to work with Joomla 2.5 / Mootools 1.4
Details here: http://forum.joomla.org/viewtopic.php?f=619&t=709725