Updated example notebooks

examples/Interactive Widgets/Variable Inspector.ipynb

@@ -61,9 +61,12 b''
     "        self.namespace = NamespaceMagics()\n",
     "        self.namespace.shell = ipython.kernel.shell\n",
     "        \n",
-    "        self._popout = widgets.Popup()\n",
-    "        self._popout.description = \"Variable Inspector\"\n",
-    "        self._popout.button_text = self._popout.description\n",
+    "        self._box = widgets.Box()\n",
+    "        self._box._dom_classes = ['inspector']\n",
+    "        self._box.background_color = '#fff'\n",
+    "        self._box.border_color = '#ccc'\n",
+    "        self._box.border_width = 1\n",
+    "        self._box.border_radius = 5\n",
     "\n",
     "        self._modal_body = widgets.VBox()\n",
     "        self._modal_body.overflow_y = 'scroll'\n",
@@ -71,7 +74,7 b''
     "        self._modal_body_label = widgets.HTML(value = 'Not hooked')\n",
     "        self._modal_body.children = [self._modal_body_label]\n",
     "\n",
-    "        self._popout.children = [\n",
+    "        self._box.children = [\n",
     "            self._modal_body, \n",
     "        ]\n",
     "        \n",
@@ -82,7 +85,7 b''
     "        \"\"\"Close and remove hooks.\"\"\"\n",
     "        if not self.closed:\n",
     "            self._ipython.events.unregister('post_run_cell', self._fill)\n",
-    "            self._popout.close()\n",
+    "            self._box.close()\n",
     "            self.closed = True\n",
     "            VariableInspectorWindow.instance = None\n",
     "\n",
@@ -96,7 +99,7 b''
     "    def _ipython_display_(self):\n",
     "        \"\"\"Called when display() or pyout is used to display the Variable \n",
     "        Inspector.\"\"\"\n",
-    "        self._popout._ipython_display_()\n"
+    "        self._box._ipython_display_()\n"
    ]
   },
   {
@@ -115,6 +118,34 b''
    "cell_type": "markdown",
    "metadata": {},
    "source": [
+    "Pop the inspector out of the widget area using Javascript.  To close the inspector, click the close button on the widget area that it was spawned from."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [],
+   "source": [
+    "%%javascript\n",
+    "$('div.inspector')\n",
+    "    .detach()\n",
+    "    .prependTo($('body'))\n",
+    "    .css({\n",
+    "        'z-index': 999, \n",
+    "        position: 'fixed',\n",
+    "        'box-shadow': '5px 5px 12px -3px black',\n",
+    "        opacity: 0.9\n",
+    "    })\n",
+    "    .draggable();"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
     "# Test"
    ]
   },
@@ -187,15 +218,21 b''
  ],
  "metadata": {
   "kernelspec": {
+   "display_name": "IPython (Python 2)",
+   "name": "python2"
+  },
+  "language_info": {
    "codemirror_mode": {
-    "name": "python",
+    "name": "ipython",
     "version": 2
    },
-   "display_name": "Python 2",
-   "language": "python",
-   "name": "python2"
-  },
-  "signature": "sha256:474731659fb14b86672d1dafb2b497fa280082ab40a8a82fe2cde1b6d9b88a6e"
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython2",
+   "version": "2.7.6"
+  }
  },
  "nbformat": 4,
  "nbformat_minor": 0

examples/Interactive Widgets/Widget Styling.ipynb

@@ -258,196 +258,6 b''
     }
    },
    "source": [
-    "### Popup"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "Unlike the other two special containers, the `Popup` is only **designed to display one set of widgets**.  The `Popup` can be used to **display widgets outside of the widget area**.  "
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": [
-    "counter = widgets.IntText(description='Counter:')\n",
-    "popup = widgets.Popup(children=[counter], description='Popup Demo', button_text='Popup Button')\n",
-    "display(popup)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": [
-    "counter.value += 1"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": [
-    "counter.value += 1"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "collapsed": false
-   },
-   "outputs": [],
-   "source": [
-    "popup.close()"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {
-    "slideshow": {
-     "slide_type": "slide"
-    }
-   },
-   "source": [
     "# Alignment"
    ]
   },
@@ -753,7 +563,7 b''
    ]
   ],
   "kernelspec": {
-   "display_name": "Python 2",
+   "display_name": "IPython (Python 2)",
    "name": "python2"
   },
   "language_info": {
@@ -766,9 +576,8 b''
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython2",
-   "version": "2.7.8"
-  },
-  "signature": "sha256:198630bf2c2eb00401b60a395ebc75049099864b62f0faaf416da02f9808c40b"
+   "version": "2.7.6"
+  }
  },
  "nbformat": 4,
  "nbformat_minor": 0