Actions

Difference between revisions of "Collapsing columns"

From Joomla! Documentation

m (See also)
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
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.
+
<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 ''jdoc:include'' tag '''and its surrounding divs''' 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'''.
+
 
 +
Notice that the <code><jdoc:include /></code> tag and its surrounding <code>&lt;div&gt;</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 ''user1'' or ''user2'' '''or both''' have at least one module enabled.
+
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 module positions then you must be careful to only output the divider if '''both''' module positions have modules enabled in them.  For example,
+
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]]
Line 62: Line 55:
 
* [[php:alternative-syntax|Alternative syntax for PHP control structures]]
 
* [[php:alternative-syntax|Alternative syntax for PHP control structures]]
 
* [[Operators for use with the countModules function]]
 
* [[Operators for use with the countModules function]]
 +
 +
[[Category:Tutorials]][[Category:Template Development]]

Latest revision as of 07:32, 20 September 2010


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 <div> 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; ?>

See also