Last active
February 17, 2022 03:03
-
-
Save abulka/3043e8a4d78d2e26f872542524a0aa3e to your computer and use it in GitHub Desktop.
Scroll To Bottom.ipynb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"cells": [ | |
{ | |
"cell_type": "code", | |
"execution_count": 1, | |
"metadata": { | |
"ExecuteTime": { | |
"end_time": "2018-01-16T12:48:52.565957Z", | |
"start_time": "2018-01-16T12:48:52.549939Z" | |
} | |
}, | |
"outputs": [], | |
"source": [ | |
"def scroll_bottom(widget_, setup=False):\n", | |
" \"\"\"\n", | |
" Scrolls widgets to their last line. Works with Textarea, Output and HTML widgets.\n", | |
" First call with parameter 'setup=True' to 'mark' the widget with a magic CSS class.\n", | |
" Then call whenever you like to scroll to the bottom.\n", | |
" Note: HTML widgets need to be wrapped in e.g. HBox([h], layout=Layout(flex='1', overflow_y='auto'))\n", | |
" \"\"\"\n", | |
" class_name = 'scroll_behaviour_' + widget_.model_id\n", | |
" if setup:\n", | |
" widget_.add_class(class_name)\n", | |
" else:\n", | |
" if isinstance(widget_, HBox):\n", | |
" selector = f\"$('div.{class_name} div.widget-html').parent()\"\n", | |
" elif isinstance(widget_, Textarea):\n", | |
" selector = f\"$('div.{class_name} > textarea')\"\n", | |
" elif isinstance(widget_, Output):\n", | |
" selector = f\"$('div.{class_name} div.output_subarea')\"\n", | |
" display(Javascript(f\"let t = {selector}; t.scrollTop(t[0].scrollHeight)\"))" | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": 2, | |
"metadata": { | |
"ExecuteTime": { | |
"end_time": "2018-01-16T12:48:53.358734Z", | |
"start_time": "2018-01-16T12:48:53.261072Z" | |
} | |
}, | |
"outputs": [ | |
{ | |
"data": { | |
"application/vnd.jupyter.widget-view+json": { | |
"model_id": "f32468b4cbe54a1283e82568251b2fe7", | |
"version_major": 2, | |
"version_minor": 0 | |
}, | |
"text/plain": [ | |
"Box(children=(Button(description='Click Me!', layout=Layout(flex='1', height='100%', width='auto'), style=Butt…" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_27dd32e0558d4778861be5f8aa9d0674 div.widget-html').parent(); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_9770d7058cab41fba3affdf827cb38c0 > textarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
}, | |
{ | |
"data": { | |
"application/javascript": [ | |
"let t = $('div.scroll_behaviour_2253b91dcf5f4d8f82af7eb4920ebb27 div.output_subarea'); t.scrollTop(t[0].scrollHeight)" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
} | |
], | |
"source": [ | |
"import ipywidgets as widgets\n", | |
"from ipywidgets import Button, Layout, HBox, VBox, Box, Output, Textarea\n", | |
"from IPython.display import display, Javascript, display_javascript, HTML\n", | |
"import random\n", | |
"\n", | |
"# Create the widgets\n", | |
"\n", | |
"outer = Layout(display='flex', height='100px', border='solid')\n", | |
"inner = Layout(flex='1', height='100%', width='auto')\n", | |
"\n", | |
"b = widgets.Button(description=\"Click Me!\", layout=inner)\n", | |
"\n", | |
"h = widgets.HTML(value=\"\", placeholder='', layout=inner)\n", | |
"boxh = HBox([h], layout=Layout(flex='1', overflow_y='auto'))\n", | |
"\n", | |
"t = widgets.Textarea(layout=inner)\n", | |
"\n", | |
"o = Output()\n", | |
"o.layout = inner\n", | |
"\n", | |
"# Initialise the ability to scroll those widgets to the bottom\n", | |
"\n", | |
"scroll_bottom(boxh, setup=True)\n", | |
"scroll_bottom(t, setup=True)\n", | |
"scroll_bottom(o, setup=True)\n", | |
"\n", | |
"# Normal functionality \n", | |
"\n", | |
"def on_button_clicked(b):\n", | |
" s = f'next random is {random.randint(1,55555)}'\n", | |
" h.value += s + ' <b>html is cool</b> ' \n", | |
" t.value += s + ' textarea is coolest' \n", | |
" with o:\n", | |
" print(s, 'output is coolest', end=' ') \n", | |
" scroll_bottom(boxh)\n", | |
" scroll_bottom(t)\n", | |
" scroll_bottom(o)\n", | |
"b.on_click(on_button_clicked)\n", | |
"\n", | |
"items = [b,boxh, t, o]\n", | |
"box = Box(children=items, layout=outer)\n", | |
"display(box)" | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": null, | |
"metadata": {}, | |
"outputs": [], | |
"source": [] | |
} | |
], | |
"metadata": { | |
"kernelspec": { | |
"display_name": "Python 3 (ipykernel)", | |
"language": "python", | |
"name": "python3" | |
}, | |
"language_info": { | |
"codemirror_mode": { | |
"name": "ipython", | |
"version": 3 | |
}, | |
"file_extension": ".py", | |
"mimetype": "text/x-python", | |
"name": "python", | |
"nbconvert_exporter": "python", | |
"pygments_lexer": "ipython3", | |
"version": "3.9.9" | |
} | |
}, | |
"nbformat": 4, | |
"nbformat_minor": 2 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Scrolling Textareas in a Python Jupyter Notebook - see https://abulka.github.io/projects/websites/
Works for me locally but not when I upload it to an online notebook - possibly jquery is not available (I think jupyter notebooks have
$
built in?). Or perhaps the format of the .html has changed since I developed this scrolling technique. As I say, it works OK locally in a newly built Python 3.9 environment, so it must still work right?