hide information box

[The Wizard]

Hello:

I am using smf 2.0.8 and the bright forest theme.

I want to add the ability for any user to hide this box when they want. How would you make this happen?

index.template.php

Code Select Expand


if (!$user_info['is_guest'])
{
echo '
<div id="forumheader">
', !empty($context['user']['avatar']['image']) ? '<div id="myAvatar">' . $context['user']['avatar']['image'] . '</div>' : '';

echo '
', $txt['hello_member_ndt'], ' <strong>', $context['user']['name'], '</strong>';

// Only tell them about their messages if they can read their messages!
if ($context['allow_pm'])
echo ', ', $txt['msg_alert_you_have'], ' <a href="', $scripturl, '?action=pm">', $context['user']['messages'], ' ', $context['user']['messages'] != 1 ? $txt['msg_alert_messages'] : $txt['message_lowercase'], '</a>', $txt['newmessages4'], ' ', $context['user']['unread_messages'], ' ', $context['user']['unread_messages'] == 1 ? $txt['newmessages0'] : $txt['newmessages1'];

echo '.<br />';

// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<strong>', $txt['maintain_mode_on'], '</strong><br />';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '
', $context['unapproved_members'] == 1 ? $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="', $scripturl, '?action=admin;area=viewmembers;sa=browse;type=approve">', $context['unapproved_members'] == 1 ? $txt['approve_member'] : $context['unapproved_members'] . ' ' . $txt['approve_members'], '</a> ', $txt['approve_members_waiting'], '<br />';

echo '
<a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a><br />
<a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a><br />';

// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']))
{
echo '
', $txt['totalTimeLogged1'];

// If days is just zero, don't bother to show it.
if ($context['user']['total_time_logged_in']['days'] > 0)
echo $context['user']['total_time_logged_in']['days'] . $txt['totalTimeLogged2'];

// Same with hours - only show it if it's above zero.
if ($context['user']['total_time_logged_in']['hours'] > 0)
echo $context['user']['total_time_logged_in']['hours'] . $txt['totalTimeLogged3'];

// But, let's always show minutes - Time wasted here: 0 minutes ;).
echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
}

echo '
', $context['current_time'], '.
</div>';
}


Thanks

Wiz

[NanoSector]

You can easily do so with jQuery.
http://api.jquery.com/toggle/

[The Wizard]

one problem I don't know java...
need this in php unless I'm forced to use java...

[NanoSector]

Unless you want to go and refresh the page to collapse things, you're forced to use JavaScript.

[The Wizard]

Unless you want to go and refresh the page to collapse things

that's exactly what I want

[NanoSector]

I wouldn't recommend it. Not only is it not user friendly, it also requires the user to wait longer and you'll have to create theme setting variables for it. With Javascript, you can just collapse the element and store the state on the user's browser. Saves you disk space and is *much* faster for the user

If you insist, you'll have to modify both a source file and the template. Source for DB queries (storing and grabbing the theme variable, though I think grabbing is done automatically) and template for state and all that.

[The Wizard]

Ok then I'm stuck using java. So can you or anybody help me write this?

[NanoSector]

I'll write something basic up for you tomorrow. Remind me if I forget

[The Wizard]

Ok

[Hj Ahmad Rasyid Hj Ismail]

A simple mod can do that IMO. Just add the mod settings inside your user layout for it to be effective. I am not sure why do you need jquery for but it surely will be nicer. Wait for Yoshi to come out with his mod then.

[NanoSector]

This is a basic function I use in one of my mods (FXTracker):

Code Select Expand

function btToggle(header, content, hidden)
{
hidden = hidden || false;
if ($(content).length != 0)
{
$(header).addClass("clickable");
$(header + " > h3").append("<span>");
if (hidden)
{
$(content).hide();
$(header + " > h3 > span:last:last").addClass("toggle_down").addClass("floatright");
}
else
{
$(header + " > h3 > span:last:last").addClass("toggle_up").addClass("floatright");
}
$(header).click(function()
{
if ($(content).is(":visible"))
{
$(content).hide();
$(header + " > h3 > span:last").removeClass("toggle_up").addClass("toggle_down");
}
else
{
$(content).show();
$(header + " > h3 > span:last").removeClass("toggle_down").addClass("toggle_up");
}
});
}
}

Feel free to modify it and use it for your own needs, I prefer not to have this included in any other mod.

Right now it works by having a cat_bar which you can click on to expand the div below it (but can be any div).

[The Wizard]

Below is a simple hide/show script that does work. However I can't figure out to get -

Code Select Expand



<a href="javascript:ReverseDisplay('uniquename')">
Click to show/hide.
</a>


inside php. Can anyone tell me how to do this?

Thanks

Wiz

Code Select Expand


<?php


echo 'Hide Test Page<br><br>';

// collapse object
echo '
<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
';

echo '
<div id="uniquename">
<p>Batman was here!</p>
</div>';
?>

<a href="javascript:ReverseDisplay('uniquename')">
Click to show/hide.
</a>


[Hj Ahmad Rasyid Hj Ismail]

IMO the available javascript is already useful if you want your user to enable/disable that area in that page itself. You can always change the button image if you don't like the current one.

[The Wizard]

Hello:

I reversed engineered the theme code, and came up with this code below that works. I did some more tweaking on my version, but this should help somebody else get the idea of how to make this happen.

Wiz 

Code Select Expand


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

echo '
<div id="forumheader">
<h3>
<img id="upshrink_ic2" 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 id="HideShowArea"', empty($options['collapse_hide_show_area']) ? '' : ' style="display: none;"', '>';

// Content area for hide/show area.
echo 'Batman Test Area';


// Java Script to collapse hide/show area.
echo '
<script type="text/javascript"><!-- // --><![CDATA[
var oInfoCenterToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: ', empty($options['collapse_hide_show_area']) ? 'false' : 'true', ',
aSwappableContainers: [
\'HideShowArea\'
],
aSwapImages: [
{
sId: \'upshrink_ic2\',
srcExpanded: smf_images_url + \'/collapse.gif\',
altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
srcCollapsed: smf_images_url + \'/expand.gif\',
altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
}
],
oThemeOptions: {
bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
sOptionName: \'collapse_hide_show_area\',
sSessionVar: ', JavaScriptEscape($context['session_var']), ',
sSessionId: ', JavaScriptEscape($context['session_id']), '
},
oCookieOptions: {
bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
sCookieName: \'upshrinkIC\'
}
});
// ]]></script>';

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