MyBB Community Forums

Full Version: Add custom "collapse" button to header
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello all!

I've made a custom header, with completely rewriting header template.
I want to add "collapse" icon and functionality to my header.
I've already tried few things, like adding misc.php as required_once to global.php,
but it changed nothing, {$expcolimage} still isn't working.
Please, show me right direction, or maybe there is some simple method to do this?
are you referring to the box appearing on all pages ?
is functionality working and icon not appearing correctly ?

code like below should work
<table class="tborder">
<tbody>
<tr>
<td class="thead">
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['customheader_e']}.png" id="customheader_img" class="expander" alt="[-]" title="[-]" /></div>
<strong><span class="smalltext">title</span></strong>
</td>
</tr>
</tbody>
<tbody style="{$collapsed['customheader_e']}" id="customheader_e">  
<tr>
<td class="trow1">code</td>
</tr>
</tbody>
</table>
Thanks! Yes, that's it! But is there any way to add it without using tables?
Because I wrote header using div's only, also I plan to remove all tables from my theme in future.

Also, your code is working OK, icon click hides content of "tbody" but only until page refresh, how I can save its state?
Maybe adding already existing id may help? For example, I've removed all usercp "collapse" headers, I'm using css drop-down
menus is usercp, so I may use one of its id's, to save header state via cookies. EDIT: No, adding usercp id's didn't help...
Header is always fully visible after page refresh.
such code should also work with div elements
<div class="tborder">
<div class="thead">
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['customheader_e']}.png" id="customheader_img" class="expander" alt="[-]" title="[-]" /></div>
<strong><span class="smalltext">title</span></strong>
</div>
</div>
<div style="{$collapsed['customheader_e']}" id="customheader_e">  
<div class="trow1">code</div>
</div>

reg. keeping the status
may be you can try using jquery to set cookies. I have not tried it.

see a different approach here => using jQuery cookies (esp. post #3)
note: jquery nocinflict code is not required in MyBB 1.8.x
Thanks! I'll try, but I don't like js and I always try to maximally minimize its usage,
I'm using php scripts when possible, It's much more rock solid. So I'm not js master at all,
but I'll try, if I'll found out how to save its state, I'll post the solution here. The solution
require removing all code you've posted, to prevent header collapse by core code.



HERE IT IS. It will change "collapse" image and image alt/title attributes according to
header content visibility and save header state to header_state cookie as true or false. Then,
on page reload, it will check this cookie and change header content visibility according to header_state cookie.
Сollapse img code id should be #header_collapse, its src should be src="{$theme['imgdir']}/collapse.png",
initial alt/title attributes should be "[-]" header content div id should be #header_content. Here is the code:
<script type="text/javascript">
jQuery(document).ready(function($) {
if (Cookies.get('header-state') === 'false') {
	$('#header_content').css('display', 'none');
	document.getElementById('header_collapse').src = 'https://your.site/images/collapse_collapsed.png';
	document.getElementById('header_collapse').title = '[+]';
	document.getElementById('header_collapse').alt = '[+]'; }
	$('#header_collapse').on('click', function() {
		$('#header_content').toggle('fast', function() {
			Cookies.set('header-state', $('#header_content').is(':visible'), { expires: 365, path:'/' });
		if ($('#header_content').is(':visible')) {
			document.getElementById('header_collapse').src = 'https://your.site/images/collapse.png';
			document.getElementById('header_collapse').title = '[-]';
			document.getElementById('header_collapse').alt = '[-]'; }
		else { document.getElementById('header_collapse').src = 'https://your.site/images/collapse_collapsed.png';
			document.getElementById('header_collapse').title = '[+]';
			document.getElementById('header_collapse').alt = '[+]'; }
		});
	});
});
</script>

Thank you for the tips, .m.!



Maybe I'll create such modification in future, to add custom "collapse" buttons, when I'll decide that this function is perfect.
But, on the other hand, this code is pretty easy to adopt to every theme, because you just need to set correct ids of collapse image and of header content div,
so if someone will need it, I think he'll find this topic easily.
One a little bit annoying thing, which happens on chrome and not on firefox, when using this js script,
is flickering of hidden content on page load-refresh. So I moved part of this js function into php script,
with setting corresponding variables in header, here is this code, I've saved it to my custom php scripts file -
/inc/custom_scripts.php, to make it work I've added require_once $working_dir.'/inc/custom_scripts.php';
after require_once $working_dir.'/inc/init.php'; at top of /global.php, here is code from custom_scripts.php:
<?php

// Set header attributes according to cookie
if ($mybb->cookies['header-state'] == 'false') {
	$collapseimage = '/images/collapse_collapsed.png';
	$collapseimagetitles = 'alt="[+]" title="[+]"';
	$headerdisplay = 'style="display: none;"';
} else {
	$collapseimage = '/images/collapse.png';
	$collapseimagetitles = 'alt="[-]" title="[-]"';
}

?>
So now my header code is looking like this:
<div class="myheader">
	<div class="thead">
		<div class="expcolimage">
			<img src="{$collapseimage}" id="header_collapse" class="expander" {$collapseimagetitles} />
		</div>
		<strong>
			TITLE
		</strong>
	</div>
<div id="header_content" {$headerdisplay}>
...

So now my js script looks like this, I've removed that part which checked cookie on page load and left only that part, which will run on collapse image click:
<script>
jQuery(document).ready(function($) {
	$('#header_collapse').on('click', function() {
		$('#header_content').toggle('fast', function() {
			Cookies.set('header-state', $(this).is(':visible'), { expires: 365, path:'/' });
		if ($(this).is(':visible')) {
			document.getElementById('header_collapse').src = 'https://your.site/images/collapse.png';
			document.getElementById('header_collapse').title = '[-]';
			document.getElementById('header_collapse').alt = '[-]'; }
		else { document.getElementById('header_collapse').src = 'https://your.site/images/collapse_collapsed.png';
			document.getElementById('header_collapse').title = '[+]';
			document.getElementById('header_collapse').alt = '[+]'; }
		});
	});
});
</script>
^ thanks for posting your fix. somehow could not devote time for checking the requirement.
[Image: DeuSyIk.png]

[Image: XsuAFmp.png]

Here is COMPLETE implementation of default collapse functionality,
with changings titles, "alt" values and with adding .thead_collapsed class to .thead div
(it's changing thead bottom border radius, when header_content is hidden).

Here is the code, which should be used as your header:
<div class="header">
	<div class="thead {$headertitleclass}" id="headertitle">
		<div class="expcolimage">
			<img aria-label="{$collapsearialabel}" src="{$collapseimage}" id="header_collapse" class="expander" alt="{$collapseimagetitle}" title="{$collapseimagetitle}" />
		</div>
		<strong>TITLE</strong>
	</div>
	<div id="header_content" {$headerdisplay}>
...
	</div>
</div>

Here is code from /inc/custom_scripts.php, to show or hide header according to cookie on page load, to make it work add
require_once $working_dir.'/inc/custom_scripts.php';
after
require_once $working_dir.'/inc/init.php';
at top of /global.php. Here is /inc/custom_scripts.php:
<?php

// Set header attributes according to cookie
if ($mybb->cookies['headerstate'] == 'hidden') {
	$collapseimage = '/images/collapse_collapsed.png';
	$collapseimagetitle = '[+]';
	$collapsearialabel = 'Show header';
	$headerdisplay = 'style="display: none;"';
	$headertitleclass = 'thead_collapsed';
} else {
	$collapseimage = '/images/collapse.png';
	$collapseimagetitle = '[-]';
	$collapsearialabel = 'Hide header';
}

?>

And here is javascript part, which sets cookie and changes header state in real time:
$('#header_collapse').on('click', function() {
	$('#header_body').fadeToggle('fast', function() {
	if ($(this).is(':visible')) {
		Cookies.set('headerstate', 'visible', { expires: 3650, path: '/', secure: true });
		document.getElementById('header_collapse').src = 'https://your.site/images/collapse.png';
		$('#headertitle').removeClass("thead_collapsed");
		document.getElementById('header_collapse').setAttribute('aria-label', 'Hide header');
		document.getElementById('header_collapse').title = '[-]';
		document.getElementById('header_collapse').alt = '[-]';
	} else {
		Cookies.set('headerstate', 'hidden', { expires: 3650, path: '/', secure: true });
		document.getElementById('header_collapse').src = 'https://your.site/images/collapse_collapsed.png';
		$('#headertitle').addClass("thead_collapsed");
		document.getElementById('header_collapse').setAttribute('aria-label', 'Show header');
		document.getElementById('header_collapse').title = '[+]';
		document.getElementById('header_collapse').alt = '[+]';
		}
	});
});
Save it as /jscripts/mycollapse.js and add
<script async src="{$mybb->asset_url}/jscripts/mycollapse.js"></script>
to your headerinclude template (or footer).