IPython / Jupyter notebook 3 - hide default headers

Question

Prior to IP laptop version 3.0 version 3.0, laptop headers can 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

It doesn't work anymore. It hides the headings, but also leaves a large space on the page above and below. I am not familiar with javascript and css. Has anyone found a solution for this?

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 unpleasant gray space below. In addition, I add this to my custom.js (same folder) to switch 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 disadvantage is that you can accidentally scroll the title partially on the page, but this only happens if you scroll it, and this is not very important, especially if you want it to be hidden mostly in any case.

Answer 2

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

To permanently hide the toolbar and title while retaining 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 of @John_C and @cknd and avoiding the -key key (which is a dead key in my (Dutch) keyboard layout), I added it 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 with a small raspberry pi LCD.

As in jupyter 4.x, a script is now required in ~/.jupyter/custom/custom.js

I used this function, which not only hides tabs in normal mode, but also moves the rack to the scrollable area. Did I mention this on a small 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 remove the lower border using ~/.jupyter/custom/custom.css

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