Need some help...trying to make the info center tabbed

[shadav]

ok so....I'm playing with the board's info center
trying to make it tabbed....
I've mostly got it working....
a few hiccups

after searching online for how to create tabs I went with this one:
inspirationalpixels.com/creating-tabs-with-html-css-and-jquery

but I'm sort of stuck at how to fix it 

ignore the ugliness once i can actually get it working i'll play with the looks of it...

so what i've done is
in BoardIndex.template.php
find

Code Select Expand

function template_info_center()
{
global $context, $settings, $options, $txt, $scripturl, $modSettings;

// Here's where the "Info Center" starts...
echo '
<span class="clear upperframe"><span></span></span>
<div class="roundframe"><div class="innerframe">
<div class="cat_bar">
<h3 class="catbg">
<img class="icon" id="upshrink_ic" src="', $settings['images_url'], '/collapse.gif" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />
', sprintf($txt['info_center_title'], $context['forum_name_html_safe']), '
</h3>
</div>
<div id="upshrinkHeaderIC"', empty($options['collapse_header_ic']) ? '' : ' style="display: none;"', '>';
after add

Code Select Expand

echo '
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">', $txt['recent_posts'], '</a></li>
<li><a href="#tab2">', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '</a></li>
<li><a href="#tab3">', $txt['forum_stats'], '</a></li>
<li><a href="#tab4">', $txt['online_users'], '</a></li>
</ul>
<div class="tab-content">';

find

Code Select Expand

// This is the "Recent Posts" bar.
if (!empty($settings['number_recent_posts']) && (!empty($context['latest_posts']) || !empty($context['latest_post'])))
{
echo '
add after

Code Select Expand

<div id="tab1" class="tab active">

find

Code Select Expand

// Show information about events, birthdays, and holidays on the calendar.
and before

Code Select Expand

echo '
</div>';

find

Code Select Expand

// Show information about events, birthdays, and holidays on the calendar.
if ($context['show_calendar'])
{
echo '
add after

Code Select Expand

<div id="tab2" class="tab">

find

Code Select Expand

// Show statistical style information...
add before

Code Select Expand

echo '
</div>';

find

Code Select Expand

// Show statistical style information...
if ($settings['show_stats_index'])
{
echo '
add after

Code Select Expand

<div id="tab3" class="tab">

find

Code Select Expand

// "Users online" - in order of activity.
add before

Code Select Expand

echo '
</div>';

find

Code Select Expand

// "Users online" - in order of activity.
echo '
add after

Code Select Expand

<div id="tab4" class="tab">

find

Code Select Expand

<br />[' . implode(']&nbsp;&nbsp;[', $context['membergroups']) . ']';
}
add after

Code Select Expand

echo '
</div>';

find

Code Select Expand

echo '
</div>
</div></div>
<span class="lowerframe"><span></span></span>';
replace

Code Select Expand

echo '
</div></div>
</div>
</div></div>
<span class="lowerframe"><span></span></span>';


in your index.css
add

Code Select Expand

.tabs {
width:100%;
display:inline-block;
}

/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}

.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}

.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}

.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}

li.active a, li.active a:hover {
background:#fff;
color:#4c4c4c;
}

.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}

.tab {
display:none;
}

.tab.active {
display:block;
}

create a file, I named mine tabbedinfo.js and upload it into your theme's scripts folder

Code Select Expand

jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

e.preventDefault();
});
});

in your index.template.php
find

Code Select Expand

// Here comes the JavaScript bits!
echo '
add after

Code Select Expand

<script type="text/javascript" src="', $settings['theme_url'], '/scripts/tabbedinfo.js"></script>


so as I said it's sort of working....if you click on a tab it does switch but the tab menu disappears and you'll need to refresh the page for it to start again.....

also it seems to for some reason mess up with the footer section layout....not sure what i did there

to see it in (somewhat working) action
http://adserver.business/test/smf/

so well....i need help to fix it 
please and thank you

[shadav]

well i fixed the issue with it messing with the footer layout by moving the 2 closing divs to the bottom
*really wish I could edit my post*

instead of
finding

Code Select Expand

echo '
</div>
</div></div>
<span class="lowerframe"><span></span></span>';
and replacing

Code Select Expand

echo '
</div></div>
</div>
</div></div>
<span class="lowerframe"><span></span></span>';

do this instead
find

Code Select Expand

?>
add before

Code Select Expand

echo '
</div></div>';

now the footer is displaying properly
but this issue of the tabbed menu disappearing when you switch tabs still happens


[edit] errrr scratch that....the footer is still slightly messed up.....ug....


[edit again] I moved the 2 closing end divs up, because i didn't want to include some things inside the tabs, they will always display
(the most online line and the if stats is off show a personal message bar)

so I moved the ending 2 divs up with the last tabbed ending div
so when finding

Code Select Expand

<br />[' . implode(']&nbsp;&nbsp;[', $context['membergroups']) . ']';
}
originally I'd said to add after

Code Select Expand

echo '
</div>';
but need to actually add

Code Select Expand

echo '
</div></div></div>';

but now the footer is back to being stupid hehehe
ug I don't know what I'm doing....... :p

[shadav]

hmmmmm.....it's acting like I have an extra end div in there.....

if I remove one of the closing end divs the footer displays normally....

ok I'm really confused, I didn't add any extra end divs.....

[vicram10]

your div tab content is only containing tab1 but tab2 and tab3 are out.

[shadav]

it shouldn't be though
here's the entire code

Code Select Expand


echo '
[color=red]<div class="tabs">[/color]
<ul class="tab-links">
<li class="active"><a href="#tab1">', $txt['recent_posts'], '</a></li>
<li><a href="#tab2">', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '</a></li>
<li><a href="#tab3">', $txt['forum_stats'], '</a></li>
<li><a href="#tab4">', $txt['online_users'], '</a></li>
</ul>
[color=red]<div class="tab-content">';[/color]
// This is the "Recent Posts" bar.
if (!empty($settings['number_recent_posts']) && (!empty($context['latest_posts']) || !empty($context['latest_post'])))
{
echo '
[color=red]<div id="tab1" class="tab active">[/color]
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<a href="', $scripturl, '?action=recent"><img class="icon" src="', $settings['images_url'], '/post/xx.gif" alt="', $txt['recent_posts'], '" /></a>
<a href="', $scripturl, '?action=recent">', $txt['recent_posts'], '</a>
</span>
</h4>
</div>
<div class="hslice" id="recent_posts_content">
<div class="entry-title" style="display: none;">', $context['forum_name_html_safe'], ' - ', $txt['recent_posts'], '</div>
<div class="entry-content" style="display: none;">
<a rel="feedurl" href="', $scripturl, '?action=.xml;type=webslice">', $txt['subscribe_webslice'], '</a>
</div>';

// Only show one post.
if ($settings['number_recent_posts'] == 1)
{
// latest_post has link, href, time, subject, short_subject (shortened with...), and topic. (its id.)
echo '
<strong><a href="', $scripturl, '?action=recent">', $txt['recent_posts'], '</a></strong>
<p id="infocenter_onepost" class="middletext">
', $txt['recent_view'], ' &quot;', $context['latest_post']['link'], '&quot; ', $txt['recent_updated'], ' (', $context['latest_post']['time'], ')<br />
</p>';
}
// Show lots of posts.
elseif (!empty($context['latest_posts']))
{
echo '
<dl id="ic_recentposts" class="middletext">';

/* Each post in latest_posts has:
board (with an id, name, and link.), topic (the topic's id.), poster (with id, name, and link.),
subject, short_subject (shortened with...), time, link, and href. */
foreach ($context['latest_posts'] as $post)
echo '
<dt><strong>', $post['link'], '</strong><br />in ', $post['board']['link'], '<dd>', $txt['by'], ' ', $post['poster']['link'], '<br />on ', $post['time'], '</dd></dt><br />';
echo '
</dl>';
}
echo '
</div>';
}
echo '
[color=red]</div>';[/color]
// Show information about events, birthdays, and holidays on the calendar.
if ($context['show_calendar'])
{
echo '
[color=red]<div id="tab2" class="tab">[/color]
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<a href="', $scripturl, '?action=calendar' . '"><img class="icon" src="', $settings['images_url'], '/icons/calendar.gif', '" alt="', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '" /></a>
<a href="', $scripturl, '?action=calendar' . '">', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '</a>
</span>
</h4>
</div>
<p class="smalltext">';

// Holidays like "Christmas", "Chanukah", and "We Love [Unknown] Day" :P.
if (!empty($context['calendar_holidays']))
echo '
<span class="holiday">', $txt['calendar_prompt'], ' ', implode(', ', $context['calendar_holidays']), '</span><br />';

// People's birthdays. Like mine. And yours, I guess. Kidding.
if (!empty($context['calendar_birthdays']))
{
echo '
<span class="birthday">', $context['calendar_only_today'] ? $txt['birthdays'] : $txt['birthdays_upcoming'], '</span> ';
/* Each member in calendar_birthdays has:
id, name (person), age (if they have one set?), is_last. (last in list?), and is_today (birthday is today?) */
foreach ($context['calendar_birthdays'] as $member)
echo '
<a href="', $scripturl, '?action=profile;u=', $member['id'], '">', $member['is_today'] ? '<strong>' : '', $member['name'], $member['is_today'] ? '</strong>' : '', isset($member['age']) ? ' (' . $member['age'] . ')' : '', '</a>', $member['is_last'] ? '<br />' : ', ';
}
// Events like community get-togethers.
if (!empty($context['calendar_events']))
{
echo '
<span class="event">', $context['calendar_only_today'] ? $txt['events'] : $txt['events_upcoming'], '</span> ';
/* Each event in calendar_events should have:
title, href, is_last, can_edit (are they allowed?), modify_href, and is_today. */
foreach ($context['calendar_events'] as $event)
echo '
', $event['can_edit'] ? '<a href="' . $event['modify_href'] . '" title="' . $txt['calendar_edit'] . '"><img src="' . $settings['images_url'] . '/icons/modify_small.gif" alt="*" /></a> ' : '', $event['href'] == '' ? '' : '<a href="' . $event['href'] . '">', $event['is_today'] ? '<strong>' . $event['title'] . '</strong>' : $event['title'], $event['href'] == '' ? '' : '</a>', $event['is_last'] ? '<br />' : ', ';
}
echo '
</p>';
}
echo '
[color=red]</div>';[/color]
// Show statistical style information...
if ($settings['show_stats_index'])
{
echo '
[color=red]<div id="tab3" class="tab">[/color]
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<a href="', $scripturl, '?action=stats"><img class="icon" src="', $settings['images_url'], '/icons/info.gif" alt="', $txt['forum_stats'], '" /></a>
<a href="' . $scripturl . '?action=stats">', $txt['forum_stats'], '</a>
</span>
</h4>
</div>
<p>
', $context['common_stats']['total_posts'], ' ', $txt['posts_made'], ' ', $txt['in'], ' ', $context['common_stats']['total_topics'], ' ', $txt['topics'], ' ', $txt['by'], ' ', $context['common_stats']['total_members'], ' ', $txt['members'], '.
<br />
', (!empty($context['latest_post']) ? $txt['latest_post'] . ': <strong>' . $context['latest_post']['link'] . '</strong><br />' : ''), '
<a href="', $scripturl, '?action=recent">', $txt['recent_view'], '</a>', $context['show_stats'] ? '<br />
<a href="' . $scripturl . '?action=stats">' . $txt['more_stats'] . '</a>' : '', '
</p>';
}
echo '
[color=red]</div>';[/color]
// "Users online" - in order of activity.
echo '
[color=red]<div id="tab4" class="tab">[/color]
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
', $context['show_who'] ? '<a href="' . $scripturl . '?action=who' . '">' : '', '<img class="icon" src="', $settings['images_url'], '/icons/online.gif', '" alt="', $txt['online_users'], '" />', $context['show_who'] ? '</a>' : '', '
<a href="' . $scripturl . '?action=who' . '">', $txt['online_users'], '</a>
</span>
</h4>
</div>
<p class="inline stats">
', $context['show_who'] ? '<a href="' . $scripturl . '?action=who">' : '', comma_format($context['num_guests']), ' ', $context['num_guests'] == 1 ? $txt['guest'] : $txt['guests'], ', ' . comma_format($context['num_users_online']), ' ', $context['num_users_online'] == 1 ? $txt['user'] : $txt['users'];

// Handle hidden users and buddies.
$bracketList = array();
if ($context['show_buddies'])
$bracketList[] = comma_format($context['num_buddies']) . ' ' . ($context['num_buddies'] == 1 ? $txt['buddy'] : $txt['buddies']);
if (!empty($context['num_spiders']))
$bracketList[] = comma_format($context['num_spiders']) . ' ' . ($context['num_spiders'] == 1 ? $txt['spider'] : $txt['spiders']);
if (!empty($context['num_users_hidden']))
$bracketList[] = comma_format($context['num_users_hidden']) . ' ' . $txt['hidden'];

if (!empty($bracketList))
echo ' (' . implode(', ', $bracketList) . ')';

echo $context['show_who'] ? '</a>' : '', '
</p>
<p class="inline smalltext">';

// Assuming there ARE users online... each user in users_online has an id, username, name, group, href, and link.
if (!empty($context['users_online']))
{
echo '
', sprintf($txt['users_active'], $modSettings['lastActive']), ':<br />', implode(', ', $context['list_users_online']);

// Showing membergroups?
if (!empty($settings['show_group_key']) && !empty($context['membergroups']))
echo '
<br />[' . implode(']&nbsp;&nbsp;[', $context['membergroups']) . ']';
}
echo '
[color=red]</div></div>';[/color]


the only thing is that it's missing an end div...if I add it the footer get's messed up and still the same issue with the tabs not showing up when switched....

[vicram10]

try with this

Code Select Expand


echo '
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">', $txt['recent_posts'], '</a></li>
<li><a href="#tab2">', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '</a></li>
<li><a href="#tab3">', $txt['forum_stats'], '</a></li>
<li><a href="#tab4">', $txt['online_users'], '</a></li>
</ul>
<div class="tab-content">';
// This is the "Recent Posts" bar.
if (!empty($settings['number_recent_posts']) && (!empty($context['latest_posts']) || !empty($context['latest_post'])))
{
echo '
<div id="tab1" class="tab active">
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<a href="', $scripturl, '?action=recent"><img class="icon" src="', $settings['images_url'], '/post/xx.gif" alt="', $txt['recent_posts'], '" /></a>
<a href="', $scripturl, '?action=recent">', $txt['recent_posts'], '</a>
</span>
</h4>
</div>
<div class="hslice" id="recent_posts_content">
<div class="entry-title" style="display: none;">', $context['forum_name_html_safe'], ' - ', $txt['recent_posts'], '</div>
<div class="entry-content" style="display: none;">
<a rel="feedurl" href="', $scripturl, '?action=.xml;type=webslice">', $txt['subscribe_webslice'], '</a>
</div>';

// Only show one post.
if ($settings['number_recent_posts'] == 1)
{
// latest_post has link, href, time, subject, short_subject (shortened with...), and topic. (its id.)
echo '
<strong><a href="', $scripturl, '?action=recent">', $txt['recent_posts'], '</a></strong>
<p id="infocenter_onepost" class="middletext">
', $txt['recent_view'], ' &quot;', $context['latest_post']['link'], '&quot; ', $txt['recent_updated'], ' (', $context['latest_post']['time'], ')<br />
</p>';
}
// Show lots of posts.
elseif (!empty($context['latest_posts']))
{
echo '
<dl id="ic_recentposts" class="middletext">';

/* Each post in latest_posts has:
board (with an id, name, and link.), topic (the topic's id.), poster (with id, name, and link.),
subject, short_subject (shortened with...), time, link, and href. */
foreach ($context['latest_posts'] as $post)
echo '
<dt><strong>', $post['link'], '</strong><br />in ', $post['board']['link'], '<dd>', $txt['by'], ' ', $post['poster']['link'], '<br />on ', $post['time'], '</dd></dt><br />';
echo '
</dl>';
}
echo '
</div>';
echo '
</div>';
}

// Show information about events, birthdays, and holidays on the calendar.
if ($context['show_calendar'])
{
echo '
<div id="tab2" class="tab">
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<a href="', $scripturl, '?action=calendar' . '"><img class="icon" src="', $settings['images_url'], '/icons/calendar.gif', '" alt="', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '" /></a>
<a href="', $scripturl, '?action=calendar' . '">', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '</a>
</span>
</h4>
</div>
<p class="smalltext">';

// Holidays like "Christmas", "Chanukah", and "We Love [Unknown] Day" :P.
if (!empty($context['calendar_holidays']))
echo '
<span class="holiday">', $txt['calendar_prompt'], ' ', implode(', ', $context['calendar_holidays']), '</span><br />';

// People's birthdays. Like mine. And yours, I guess. Kidding.
if (!empty($context['calendar_birthdays']))
{
echo '
<span class="birthday">', $context['calendar_only_today'] ? $txt['birthdays'] : $txt['birthdays_upcoming'], '</span> ';
/* Each member in calendar_birthdays has:
id, name (person), age (if they have one set?), is_last. (last in list?), and is_today (birthday is today?) */
foreach ($context['calendar_birthdays'] as $member)
echo '
<a href="', $scripturl, '?action=profile;u=', $member['id'], '">', $member['is_today'] ? '<strong>' : '', $member['name'], $member['is_today'] ? '</strong>' : '', isset($member['age']) ? ' (' . $member['age'] . ')' : '', '</a>', $member['is_last'] ? '<br />' : ', ';
}
// Events like community get-togethers.
if (!empty($context['calendar_events']))
{
echo '
<span class="event">', $context['calendar_only_today'] ? $txt['events'] : $txt['events_upcoming'], '</span> ';
/* Each event in calendar_events should have:
title, href, is_last, can_edit (are they allowed?), modify_href, and is_today. */
foreach ($context['calendar_events'] as $event)
echo '
', $event['can_edit'] ? '<a href="' . $event['modify_href'] . '" title="' . $txt['calendar_edit'] . '"><img src="' . $settings['images_url'] . '/icons/modify_small.gif" alt="*" /></a> ' : '', $event['href'] == '' ? '' : '<a href="' . $event['href'] . '">', $event['is_today'] ? '<strong>' . $event['title'] . '</strong>' : $event['title'], $event['href'] == '' ? '' : '</a>', $event['is_last'] ? '<br />' : ', ';
}
echo '
</p>';

echo '
</div>';
}

// Show statistical style information...
if ($settings['show_stats_index'])
{
echo '
<div id="tab3" class="tab">
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<a href="', $scripturl, '?action=stats"><img class="icon" src="', $settings['images_url'], '/icons/info.gif" alt="', $txt['forum_stats'], '" /></a>
<a href="' . $scripturl . '?action=stats">', $txt['forum_stats'], '</a>
</span>
</h4>
</div>
<p>
', $context['common_stats']['total_posts'], ' ', $txt['posts_made'], ' ', $txt['in'], ' ', $context['common_stats']['total_topics'], ' ', $txt['topics'], ' ', $txt['by'], ' ', $context['common_stats']['total_members'], ' ', $txt['members'], '.
<br />
', (!empty($context['latest_post']) ? $txt['latest_post'] . ': <strong>' . $context['latest_post']['link'] . '</strong><br />' : ''), '
<a href="', $scripturl, '?action=recent">', $txt['recent_view'], '</a>', $context['show_stats'] ? '<br />
<a href="' . $scripturl . '?action=stats">' . $txt['more_stats'] . '</a>' : '', '
</p>';
echo '
</div>';
}

// "Users online" - in order of activity.
echo '
<div id="tab4" class="tab">
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
', $context['show_who'] ? '<a href="' . $scripturl . '?action=who' . '">' : '', '<img class="icon" src="', $settings['images_url'], '/icons/online.gif', '" alt="', $txt['online_users'], '" />', $context['show_who'] ? '</a>' : '', '
<a href="' . $scripturl . '?action=who' . '">', $txt['online_users'], '</a>
</span>
</h4>
</div>
<p class="inline stats">
', $context['show_who'] ? '<a href="' . $scripturl . '?action=who">' : '', comma_format($context['num_guests']), ' ', $context['num_guests'] == 1 ? $txt['guest'] : $txt['guests'], ', ' . comma_format($context['num_users_online']), ' ', $context['num_users_online'] == 1 ? $txt['user'] : $txt['users'];

// Handle hidden users and buddies.
$bracketList = array();
if ($context['show_buddies'])
$bracketList[] = comma_format($context['num_buddies']) . ' ' . ($context['num_buddies'] == 1 ? $txt['buddy'] : $txt['buddies']);
if (!empty($context['num_spiders']))
$bracketList[] = comma_format($context['num_spiders']) . ' ' . ($context['num_spiders'] == 1 ? $txt['spider'] : $txt['spiders']);
if (!empty($context['num_users_hidden']))
$bracketList[] = comma_format($context['num_users_hidden']) . ' ' . $txt['hidden'];

if (!empty($bracketList))
echo ' (' . implode(', ', $bracketList) . ')';

echo $context['show_who'] ? '</a>' : '', '
</p>
<p class="inline smalltext">';

// Assuming there ARE users online... each user in users_online has an id, username, name, group, href, and link.
if (!empty($context['users_online']))
{
echo '
', sprintf($txt['users_active'], $modSettings['lastActive']), ':<br />', implode(', ', $context['list_users_online']);

// Showing membergroups?
if (!empty($settings['show_group_key']) && !empty($context['membergroups']))
echo '
<br />[' . implode(']&nbsp;&nbsp;[', $context['membergroups']) . ']';
}
echo '
</div></div>
</div>';


[shadav]

thank you....that works and the footer isn't messed up....

now to winmerge the two and figure out what's different.....

[edit] ok I see....moving the end divs outside of the }.... I swear I tried that at first and the tabs didn't work.....
thank you so much

[vicram10]

the final divs of each tab were outside the IF, and a final closing DIV was missing.

[shadav]

thank you for your help
I was able to do this on another site (using a different tab version, but same method)
http://forum.foamyfanatics.net/

had to use a different type because it was conflicting with the tabbed profiles I'd done....the two do not play well together apparently...
so well now I have two different versions 

the one posted here (though I need to rewrite the instructions)
http://adserver.business/test/smf/
and a slightly different one (that doesn't use javascript, purely css)
http://forum.foamyfanatics.net/

[vicram10]

the div ID, can be different for each "tab", you can't have 2 div the same id="tab1"