Return to Question

// ==UserScript==
// @name           Collapse Headers
// @namespace      stackoverflow
// @include        *stackoverflow.com*
// ==/UserScript==

(function ()
{
    GM_addStyle("#header { height: 0px; }");

    var cancelWaiting = false;
    jq_wait();


    function jq_wait()
    {
        if (typeof unsafeWindow.jQuery == 'undefined')
        {
            window.setTimeout(jq_wait, 100);
        } else
        {
            $ = unsafeWindow.jQuery;
            window.setTimeout(function () { cancelWaiting = true; }, 5000);
            $(document).ready(header_wait);
        }
    }

    function header_wait()
    {
        var topbar = $(".topbar");
        if (topbar.length == 0)
        {
            if (cancelWaiting) return;
            window.setTimeout(header_wait, 10);
        }
        else
        {
            var header = $("#header");
            header.css("overflow", "hidden");
            topbar.mouseenter(function ()
            {
                header.stop();
                header.animate({ height: "120px" }, 500);
            });
            topbar.mouseleave(function ()
            {
                header.stop();
                header.animate({ height: "0px" }, 500);
            });
        }
    }
})();

// ==UserScript==
// @name           Collapse Headers
// @namespace      stackoverflow
// @include        *stackoverflow.com*
// ==/UserScript==

(function ()
{
    GM_addStyle("#header { height: 0px; }");

    var cancelWaiting = false;
    jq_wait();


    function jq_wait()
    {
        if (typeof unsafeWindow.jQuery == 'undefined')
        {
            window.setTimeout(jq_wait, 100);
        } else
        {
            $ = unsafeWindow.jQuery;
            window.setTimeout(function () { cancelWaiting = true; }, 5000);
            $(document).ready(header_wait);
        }
    }

    function header_wait()
    {
        var topbar = $(".topbar");
        if (topbar.length == 0)
        {
            if (cancelWaiting) return;
            window.setTimeout(header_wait, 10);
        }
        else
        {
            var header = $("#header");
            var content = $("#content");
            header.css("overflow", "hidden");
            topbar.mouseenter(function ()
            {
                header.stop();
                header.animate({ height: "120px" }, 500);
            });
            content.mouseenter(function ()
            {
                header.stop();
                header.animate({ height: "0px" }, 500);
            });
        }
    }
})();

Only shows the logo and main menu on mouse-over on the top bar. (The initial collapse is instantaneous, whether it should be animated or not may be a matter of preference.)

Only shows the logo and main menu on mouse-over on the top bar.

Only shows the logo and main menu on mouse-over on the grey top bar. (The initial collapse is instantaneous, whether it should be animated or not may be a matter of preference.)

// ==UserScript==
// @name           Collapse Headers
// @namespace      stackoverflow
// @include        *stackoverflow.com*
// ==/UserScript==

(function ()
{
    var cancelWaiting = false;
    jq_wait();

    function jq_wait()
    {
        if (typeof unsafeWindow.jQuery == 'undefined')
        {
            window.setTimeout(jq_wait, 100);
        } else
        {
            $ = unsafeWindow.jQuery;
            window.setTimeout(function () { cancelWaiting = true; }, 5000);
            $(document).ready(header_wait);
        }
    }

    function header_wait()
    {
        var items = $("#header");
        if (items.length == 0)
        {
            if (cancelWaiting) return;
            window.setTimeout(header_wait, 10);
        }
        else
        {
            items.css("overflow", "hidden");
            items.mouseenter(function ()
            {
                items.stop();
                items.animate({ height: "120px" }, 500);
            });
            items.mouseleave(function ()
            {
                items.stop();
                items.animate({ height: "38px" }, 500);
            });
            items.css("height", "38px");
        }
    }
})();

• Changed expand/collapse logic to not allow endless queuing.

Issues:

• The overflow:hidden cuts off a part of the StackExchange™ MultiCollider SuperDropdown™, most visible when there are new messages in the inbox.

Only shows the logo and main menu on mouse-over on the top bar. (The initial collapse is instantaneous, whether it should be animated or not may be a matter of preference.)

// ==UserScript==
// @name           Collapse Headers
// @namespace      stackoverflow
// @include        *stackoverflow.com*
// ==/UserScript==

(function ()
{
    GM_addStyle("#header { height: 0px; }");

    var cancelWaiting = false;
    jq_wait(); 


    function jq_wait()
    {
        if (typeof unsafeWindow.jQuery == 'undefined')
        {
            window.setTimeout(jq_wait, 100);
        } else
        {
            $ = unsafeWindow.jQuery;
            window.setTimeout(function () { cancelWaiting = true; }, 5000);
            $(document).ready(header_wait);
        }
    }

    function header_wait()
    {
        var topbar = $(".topbar");
        if (topbar.length == 0)
        {
            if (cancelWaiting) return;
            window.setTimeout(header_wait, 10);
        }
        else
        {
            var header = $("#header");
            header.css("overflow", "hidden");
            topbar.mouseenter(function ()
            {
                header.stop();
                header.animate({ height: "120px" }, 500);
            });
            topbar.mouseleave(function ()
            {
                header.stop();
                header.animate({ height: "0px" }, 500);
            });
        }
    }
})();

• Changed expand/collapse logic to not allow endless queuing.
• 2013/12/05 - Updated script to work accordingly for the new top bar.