Tweaking upshrink

[roshaoar]

Hello,

Can anyone help me understand how upshrink and downshrink work, and how it understands which divs to hide or show (the arrow on the topright that hides or shows news and personal info).

I'd like to add something else to what it affects - the user menu - to be able to give mobile visitors a three line menu icon when it's shrinking. How does this piece of functionality work?

Thank you for your time,

-Johan

[Sir Osis of Liver]

Not sure what you're trying to do - replace the main menu with menu icon?  If you look in index.template.php there's this -

Code Select Expand



// Define the upper_section toggle in JavaScript.
echo '
<script type="text/javascript"><!-- // --><![CDATA[
var oMainHeaderToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: ', empty($options['collapse_header']) ? 'false' : 'true', ',
aSwappableContainers: [
\'upper_section\'
],
aSwapImages: [
{
sId: \'upshrink\',
srcExpanded: smf_images_url + \'/upshrink.png\',
altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
srcCollapsed: smf_images_url + \'/upshrink2.png\',
altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
}
],
oThemeOptions: {
bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
sOptionName: \'collapse_header\',
sSessionVar: ', JavaScriptEscape($context['session_var']), ',
sSessionId: ', JavaScriptEscape($context['session_id']), '
},
oCookieOptions: {
bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
sCookieName: \'upshrink\'
}
});
// ]]></script>';



It collapses the upper_section div -

Code Select Expand



// the upshrink image, right-floated
echo '
<img id="upshrink" src="', $settings['images_url'], '/upshrink.png" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />';
echo '
', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="floatright">' . $settings['site_slogan'] . '</div>', '
</div>
<div id="upper_section" class="middletext"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
<div class="user">';

// If the user is logged in, display stuff like their name, new messages, etc.



Doesn't affect main menu because it's below upper_section div.