Example of a notebook with a javascript menu

Links: notebook, html, PDF, python, slides, GitHub

It is sometimes difficult to navigate through long notebooks. Regular ways to navigate in a HTML page are not available when the cursor is stuck in a cell. Here is a simple trick with two sections. Links remains at the same place anytime just by adding HTML in the notebook.

The code in the markdown cell looks like the following, it is a mix between HTML and markdown. The combination is not perfect but that works somehow. The outcome can be shown on the left.

<div style=”position:absolute; top:10px; right:5px; width:100px; height:90px; margin:10px;”>

[Section 1](#Section-1) – [Section 2](#Section-2) – [This is the end](#This-is-the-end.)

</div>

This trick does not work very well with IPython 3+. So I created a simple function which automaticallt adds a menu to all sections within the notebook.

from jyquickhelper import add_notebook_menu
add_notebook_menu(menu_id="main_menu")

Section 1

for i in range(0,30):
    # just making space
    print ("line",i)
line 0
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10
line 11
line 12
line 13
line 14
line 15
line 16
line 17
line 18
line 19
line 20
line 21
line 22
line 23
line 24
line 25
line 26
line 27
line 28
line 29

Section 2

for i in range(0,30):
    # making space again
    print("line2",i)
line2 0
line2 1
line2 2
line2 3
line2 4
line2 5
line2 6
line2 7
line2 8
line2 9
line2 10
line2 11
line2 12
line2 13
line2 14
line2 15
line2 16
line2 17
line2 18
line2 19
line2 20
line2 21
line2 22
line2 23
line2 24
line2 25
line2 26
line2 27
line2 28
line2 29

This is the end.

We end up by using some functionalities from pyquickhelper.

from jyquickhelper import set_notebook_name_theNotebook
set_notebook_name_theNotebook()
<IPython.core.display.Javascript object>
<IPython.core.display.Javascript object>
theNotebook
'exemple_of_fix_menu.ipynb'
from jyquickhelper import add_notebook_menu
add_notebook_menu()