IPython/Jupyter notebook 3 - hide headers by default

Question

Before IPython notebook version 3.0 the notebook headers could be hidden by default by adding this to ".ipython\profile_default\static\custom\custom.js" (on Windows):

$([IPython.events]).on("app_initialized.NotebookApp", function () {
    $('div#header').hide();
    $('div#maintoolbar').hide();
});

or for Jupyter, "~/.jupyter/custom/custom.js", with IPython replaced by Jupyter.

also see this question

This does not seem to work anymore. It hides the headers, but it also leaves a big gap on the page's top and bottom. I am not familiar with javascript and css. Has anyone found a solution to this yet?

score 10 · Accepted Answer · answered Mar 11 '15 at 12:15

10

add this to custom.css in your profile (e.g. ~/.ipython/profile_default/static/custom/custom.css for me):

div#site{
    height: 100% !important;
}

to remove any nasty grey space at the bottom. Also, I add this to my custom.js (same folder) to toggle the header using ctrl-` :

$([IPython.events]).on('notebook_loaded.Notebook', function(){
    $('#header').hide();

    IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-`', function (event) {
        if (IPython.notebook.mode == 'command') {
            $('#header').toggle();
            return false;
        }
        return true;
    });
});

The downside is that you can accidentally scroll the header partially off the page, but that only happens if you scroll on it and it's not a big deal, especially if you want it hidden mostly anyway.

answered Mar 11 '15 at 12:15

John_C

788
5
17

That works perfectly, thank you! Just a note: This hides the header completely. The solution I used before left the row with the menu intact. So you really have to use the ctrl+` shortcut now. However, I even like it better that way. – Tobias Hotzenplotz Mar 11 '15 at 16:01
In addition to utilizing the full height, you can also [remove the gray space on the sides](http://stackoverflow.com/questions/21971449/how-do-i-increase-the-cell-width-of-the-ipython-notebook-in-my-browser), by adding `.container { width:100% !important; }` to `~/.ipython/profile_default/static/custom/custom.css`. – joelostblom Sep 21 '15 at 13:02
Another note, if you are using Jupyter notebook by chance, you'll need to `jupyter migrate` so that same js and css files work in jupyter - http://jupyter.readthedocs.org/en/latest/migrating.html – kampta Mar 28 '16 at 12:22
1

You might also need to restart the notebook server for the css changes to take effect. – Brian Burns Oct 26 '16 at 13:13
This should be an extension – bluss Jan 18 '17 at 12:07

score 5 · Answer 2 · answered Mar 16 '15 at 17:39

In ipython 3, #header refers to the complete assembly at the top of the page, not just the image banner as it did in ipython 2.

To permanently hide the toolbar and header while keeping the menu, I added

$([IPython.events]).on("app_initialized.NotebookApp", function () {
    $('div#header-container').hide();
    $('div#maintoolbar').hide();
});

to my ~/.ipython/profile_name/static/custom/custom.js

score 2 · Answer 3 · answered May 11 '15 at 06:38

Combining the answers by @John_C and @cknd and avoiding the `-key (which is a dead-key on my (Dutch) keyboard layout), I added this to my ~/.ipython/profile_name/static/custom/custom.js:

$([IPython.events]).on('notebook_loaded.Notebook', function(){
    $('#header').hide();
    IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-;', function (event) {
        if (IPython.notebook.mode == 'command') {
            $('#header').toggle();
            return false;
        }
        return true;
    });

    IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-.', function (event) {
        if (IPython.notebook.mode == 'command') {
            $('#header').show();
            $('#header-container').toggle();
            $('#maintoolbar').toggle();
            return false;
        }
        return true;
    });

});

bmidgley · Answer 4 · 2017-02-03T20:20:01.187

I needed to update this work for jupyter 4/5 using a small raspberry pi LCD.

As of jupyter 4.x, the script is now needed in ~/.jupyter/custom/custom.js

I used this function which doesn't just hide the tabs normally, but also moves the persistent bar into the scrollable region. Did I mention this is on a tiny LCD? We need every pixel!

define(['base/js/events'], function(events) {
  events.on('app_initialized.NotebookApp', function () {
    $('#header-container').toggle();
    $('.header-bar').toggle();
    $('div#maintoolbar').toggle();
    $('#site').prepend($("#header").detach());
    events.trigger('resize-header.Page');
  });
});

It was also necessary to eliminate the bottom border using ~/.jupyter/custom/custom.css

div#notebook{
  padding: 0;
}
div#site{
  height: 100% !important;
}

IPython/Jupyter notebook 3 - hide headers by default

4 Answers4

Linked