We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. Hasan
  2. General Discussion
  3. Thursday, 18 September 2014
  4.  Subscribe via email
Hello,
I want to use Bootstrap's tab feature (from /html/modules.php) on one of my module position with that code:
<jdoc:include type="modules" name="<?php $this->_p('mytabs') ?>" style="t3tabs" />

Everything is OK but fade effect doesn't work because fade and in classes added to each DIVs.

So how can I use fade effect of the Bootstrap's tabs in my module position?
Thanks
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Hasan,

Please refer to the Bootstrap documentation to see how to implement Fade effect for you module: http://getbootstrap.com/javascript/#tabs
If you have any further concern, please let me know, we're willing to help you.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
As I said T3's default "t3tabs" module type already has fade and in markups in the DOM, as stated in the Bootstrap documentation. But it doesn't work, so I think this is a bug.
Here is the t3tabs code:
function modChrome_t3tabs($module, $params, $attribs)
{
$area = isset($attribs['id']) ? (int) $attribs['id'] :'1';
$area = 'area-'.$area;

static $modulecount;
static $modules;

if ($modulecount < 1) {
$modulecount = count(JModuleHelper::getModules($attribs['name']));
$modules = array();
}

if ($modulecount == 1) {
$temp = new stdClass;
$temp->content = $module->content;
$temp->title = $module->title;
$temp->params = $module->params;
$temp->id = $module->id;
$modules[] = $temp;

// list of moduletitles
echo '<ul class="nav nav-tabs" id="tab'.$temp->id .'">';

foreach($modules as $rendermodule) {
echo '<li><a data-toggle="tab" href="#module-'.$rendermodule->id.'" >'.$rendermodule->title.'</a></li>';
}
echo '</ul>';
echo '<div class="tab-content">';
$counter = 0;
// modulecontent
foreach($modules as $rendermodule) {
$counter ++;

echo '<div class="tab-pane fade in" id="module-'.$rendermodule->id.'">';
echo $rendermodule->content;

echo '</div>';
}
echo '</div>';
echo '<script type="text/javascript">';
echo 'jQuery(document).ready(function(){';
echo 'jQuery("#tab'.$temp->id.' a:first").tab("show")';
echo '});';
echo '</script>';
$modulecount--;

} else {
$temp = new stdClass;
$temp->content = $module->content;
$temp->params = $module->params;
$temp->title = $module->title;
$temp->id = $module->id;
$modules[] = $temp;
$modulecount--;
}
}

I just wonder why tab items don't have Fade effect even it's implemented as stated in the Bootstrap documentation.
Thanks
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi again,

You may have to embed JS of tab so that the tabs function can be implemented.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.