Difference between revisions of "Collapsing columns"
From Joomla! Documentation
Mike dowler (talk | contribs) m (→See also) |
Mike dowler (talk | contribs) m (Changed formatting, added includeonly title) |
||
Line 1: | Line 1: | ||
− | + | <includeonly>==Collapsing columns==</includeonly> | |
− | For example, if you want to include a "user1" module position only if there are modules enabled in that position, then you could use this code: | + | A common requirement when designing web pages in Joomla! is for a Module position to be removed when no Modules are enabled in that position so that the space is available for other page elements. The region removed is referred to as a "collapsed column". This can be achieved using the <code>countModules</code> function. |
+ | |||
+ | For example, if you want to include a "<code>user1</code>" module position only if there are modules enabled in that position, then you could use this code: | ||
<source lang="php"> | <source lang="php"> | ||
<?php if ($this->countModules( 'user1' )) : ?> | <?php if ($this->countModules( 'user1' )) : ?> | ||
− | |||
<div class="user1"> | <div class="user1"> | ||
<jdoc:include type="modules" name="user1" style="xhtml" /> | <jdoc:include type="modules" name="user1" style="xhtml" /> | ||
</div> | </div> | ||
− | |||
<?php endif; ?> | <?php endif; ?> | ||
</source> | </source> | ||
− | Notice that the | + | |
+ | Notice that the <code><jdoc:include /></code> tag and its surrounding <code><div></code> are only included if the <code>countModules</code> call returns a non-zero value (the PHP <code>if</code> statement treats zero as being '''false''' and any non-zero value as being '''true'''. | ||
Sometimes you may want a pair of module positions to collapse either singly or together. | Sometimes you may want a pair of module positions to collapse either singly or together. | ||
<source lang="php"> | <source lang="php"> | ||
<?php if ($this->countModules( 'user1 or user2' )) : ?> | <?php if ($this->countModules( 'user1 or user2' )) : ?> | ||
− | |||
<div class="user1user2"> | <div class="user1user2"> | ||
− | |||
<?php if ($this->countModules( 'user1' )) : ?> | <?php if ($this->countModules( 'user1' )) : ?> | ||
<jdoc:include type="modules" name="user1" style="xhtml" /> | <jdoc:include type="modules" name="user1" style="xhtml" /> | ||
Line 26: | Line 25: | ||
<jdoc:include type="modules" name="user2" style="xhtml" /> | <jdoc:include type="modules" name="user2" style="xhtml" /> | ||
<?php endif; ?> | <?php endif; ?> | ||
− | |||
</div> | </div> | ||
− | |||
<?php endif; ?> | <?php endif; ?> | ||
− | |||
</source> | </source> | ||
− | Notice how the region (which is styled by the CSS class "user1user2") is only output if ' | + | Notice how the region (which is styled by the CSS class "<code>user1user2</code>") is only output if either '<code>user1</code>' or '<code>user2</code>', '''or both''' have at least one Module enabled. |
− | If you want a divider to separate the two | + | If you want a divider to separate the two Module positions then you must be careful to only output the divider if '''both''' Module positions have Modules enabled in them. For example, |
<source lang="php"> | <source lang="php"> | ||
<?php if ($this->countModules( 'user1 or user2' )) : ?> | <?php if ($this->countModules( 'user1 or user2' )) : ?> | ||
− | |||
<div class="user1user2"> | <div class="user1user2"> | ||
− | |||
<?php if ($this->countModules( 'user1' )) : ?> | <?php if ($this->countModules( 'user1' )) : ?> | ||
<jdoc:include type="modules" name="user1" style="xhtml" /> | <jdoc:include type="modules" name="user1" style="xhtml" /> | ||
Line 51: | Line 45: | ||
<jdoc:include type="modules" name="user2" style="xhtml" /> | <jdoc:include type="modules" name="user2" style="xhtml" /> | ||
<?php endif; ?> | <?php endif; ?> | ||
− | |||
</div> | </div> | ||
− | |||
<?php endif; ?> | <?php endif; ?> | ||
</source> | </source> | ||
+ | |||
====See also==== | ====See also==== | ||
* [[php:if|PHP ''if'' statement]] | * [[php:if|PHP ''if'' statement]] |
Revision as of 16:01, 22 May 2008
A common requirement when designing web pages in Joomla! is for a Module position to be removed when no Modules are enabled in that position so that the space is available for other page elements. The region removed is referred to as a "collapsed column". This can be achieved using the countModules
function.
For example, if you want to include a "user1
" module position only if there are modules enabled in that position, then you could use this code:
<?php if ($this->countModules( 'user1' )) : ?>
<div class="user1">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>
Notice that the <jdoc:include />
tag and its surrounding
are only included if the countModules
call returns a non-zero value (the PHP if
statement treats zero as being false and any non-zero value as being true.
Sometimes you may want a pair of module positions to collapse either singly or together.
<?php if ($this->countModules( 'user1 or user2' )) : ?>
<div class="user1user2">
<?php if ($this->countModules( 'user1' )) : ?>
<jdoc:include type="modules" name="user1" style="xhtml" />
<?php endif; ?>
<?php if ($this->countModules( 'user2' )) : ?>
<jdoc:include type="modules" name="user2" style="xhtml" />
<?php endif; ?>
</div>
<?php endif; ?>
Notice how the region (which is styled by the CSS class "user1user2
") is only output if either 'user1
' or 'user2
', or both have at least one Module enabled.
If you want a divider to separate the two Module positions then you must be careful to only output the divider if both Module positions have Modules enabled in them. For example,
<?php if ($this->countModules( 'user1 or user2' )) : ?>
<div class="user1user2">
<?php if ($this->countModules( 'user1' )) : ?>
<jdoc:include type="modules" name="user1" style="xhtml" />
<?php endif; ?>
<?php if ($this->countModules( 'user1 and user2' )) : ?>
<div class="divider"></div>
<?php endif; ?>
<?php if ($this->countModules( 'user2' )) : ?>
<jdoc:include type="modules" name="user2" style="xhtml" />
<?php endif; ?>
</div>
<?php endif; ?>