IPython/Jupyter notebook 3 - hide headers by default - ipython

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?

Answer 1

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.

Answer 2

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

Answer 3

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;
});
});

Answer 4

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;
}