diff --git a/.ipynb_checkpoints/band_structure_visualization-Copy1-checkpoint.ipynb b/.ipynb_checkpoints/band_structure_visualization-Copy1-checkpoint.ipynb
index ae802f47de3dca31c7508a4235089d6b4bb680f0..26e85a7844124f497c189e944383f990c5d55038 100644
--- a/.ipynb_checkpoints/band_structure_visualization-Copy1-checkpoint.ipynb
+++ b/.ipynb_checkpoints/band_structure_visualization-Copy1-checkpoint.ipynb
@@ -906,7 +906,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 131,
+   "execution_count": 16,
    "metadata": {
     "tags": [
      "process_band_dos_data"
@@ -1749,7 +1749,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 132,
+   "execution_count": 17,
    "metadata": {
     "scrolled": false,
     "tags": [
@@ -3331,7 +3331,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 173,
+   "execution_count": 24,
    "metadata": {
     "tags": [
      "plot_band"
@@ -3660,7 +3660,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 174,
+   "execution_count": 25,
    "metadata": {
     "tags": [
      "plot_dos"
@@ -3929,7 +3929,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 167,
+   "execution_count": 18,
    "metadata": {
     "tags": [
      "init_jquery"
@@ -3956,7 +3956,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 168,
+   "execution_count": 19,
    "metadata": {
     "tags": [
      "init_flot"
@@ -3983,7 +3983,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 169,
+   "execution_count": 20,
    "metadata": {
     "tags": [
      "init_flot_axislabels"
@@ -4010,7 +4010,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 170,
+   "execution_count": 21,
    "metadata": {
     "tags": [
      "init_flot_navigate"
@@ -4064,7 +4064,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 149,
+   "execution_count": 28,
    "metadata": {
     "tags": [
      "js_query_beforeafter"
@@ -4079,9 +4079,19 @@
        "},i);return this.each(function(){var i=e(this),a=i.find(\"img\"),n=a.data(\"aftersrc\"),s=i.width(),d=0;a.after('<div class=\"g-img-after\"><img style=\"width: '+s+'px;\" src=\"'+n+'\"></div>'),\n",
        "a.addClass(\"g-img-before\").width(s),i.append('<div class=\"g-img-divider\"><span>'+t.message+\"</span></div>\"),d=i.height(),t.split_horizontal||i.addClass(\"g-vertical\"),\n",
        "i.on(\"mouseenter touchstart\",function(e){var t=i.data(\"reset-timer\");t&&(window.clearTimeout(t),i.data(\"reset-timer\",!1))}).on(\"mousemove touchmove\",function(a){\n",
-       "var n=0,o=0,r=i.find(\".g-img-divider span\");if(t.drag_horizontal)n=a.pageX-i.offset().left,o=n/s*100;else{var f=i.offset().top-e(window).scrollTop();n=a.clientY/f,\n",
-       "o=(a.clientY-f)/d*100}if(t.touch&&\"undefined\"!=typeof a.originalEvent.touches){var g=a.originalEvent.touches[0];o=t.drag_horizontal?(g.pageX-i.offset().left)/s*100:(g.pageY-i.offset().top)/d*100;\n",
-       "}t.split_horizontal?(i.find(\".g-img-after\").css(\"left\",o+\"%\"),i.find(\".g-img-divider\").css(\"left\",o+\"%\")):(i.find(\".g-img-after\").css(\"top\",o+\"%\"),i.find(\".g-img-divider\").css(\"top\",o+\"%\")),\n",
+       "var n=0,o=0,r=i.find(\".g-img-divider span\");\n",
+       "    if(t.drag_horizontal)n=a.pageX-i.offset().left,o=n/s*100;\n",
+       "    else{\n",
+       "        var f=i.offset().top-e(window).scrollTop();\n",
+       "        n=a.clientY/f,\n",
+       "        o=(a.clientY-f)/d*100\n",
+       "    }\n",
+       "    if(t.touch&&\"undefined\"!=typeof a.originalEvent.touches)\n",
+       "    {\n",
+       "        var g=a.originalEvent.touches[0];\n",
+       "        o=t.drag_horizontal?(g.pageX-i.offset().left)/s*100:(g.pageY-i.offset().top)/d*100;\n",
+       "    }\n",
+       "    t.split_horizontal?(i.find(\".g-img-after\").css(\"left\",o+\"%\"),i.find(\".g-img-divider\").css(\"left\",o+\"%\")):(i.find(\".g-img-after\").css(\"top\",o+\"%\"),i.find(\".g-img-divider\").css(\"top\",o+\"%\")),\n",
        "t.hide_message&&r.is(\":visible\")&&r.fadeOut()}).on(\"mouseleave touchend touchcancel\",function(e){var a=i.data(\"reset-timer\"),n=i.find(\".g-img-divider span\");\n",
        "t.reset&&(a||(a=window.setTimeout(function(){t.split_horizontal?(i.find(\".g-img-after\").animate({left:\"50%\"},500),i.find(\".g-img-divider\").animate({left:\"50%\"\n",
        "},500,function(){n.fadeIn()})):(i.find(\".g-img-after\").animate({top:\"50%\"},500),i.find(\".g-img-divider\").animate({top:\"50%\"},500,function(){n.fadeIn()})),\n",
@@ -4102,9 +4112,19 @@
     "},i);return this.each(function(){var i=e(this),a=i.find(\"img\"),n=a.data(\"aftersrc\"),s=i.width(),d=0;a.after('<div class=\"g-img-after\"><img style=\"width: '+s+'px;\" src=\"'+n+'\"></div>'),\n",
     "a.addClass(\"g-img-before\").width(s),i.append('<div class=\"g-img-divider\"><span>'+t.message+\"</span></div>\"),d=i.height(),t.split_horizontal||i.addClass(\"g-vertical\"),\n",
     "i.on(\"mouseenter touchstart\",function(e){var t=i.data(\"reset-timer\");t&&(window.clearTimeout(t),i.data(\"reset-timer\",!1))}).on(\"mousemove touchmove\",function(a){\n",
-    "var n=0,o=0,r=i.find(\".g-img-divider span\");if(t.drag_horizontal)n=a.pageX-i.offset().left,o=n/s*100;else{var f=i.offset().top-e(window).scrollTop();n=a.clientY/f,\n",
-    "o=(a.clientY-f)/d*100}if(t.touch&&\"undefined\"!=typeof a.originalEvent.touches){var g=a.originalEvent.touches[0];o=t.drag_horizontal?(g.pageX-i.offset().left)/s*100:(g.pageY-i.offset().top)/d*100;\n",
-    "}t.split_horizontal?(i.find(\".g-img-after\").css(\"left\",o+\"%\"),i.find(\".g-img-divider\").css(\"left\",o+\"%\")):(i.find(\".g-img-after\").css(\"top\",o+\"%\"),i.find(\".g-img-divider\").css(\"top\",o+\"%\")),\n",
+    "var n=0,o=0,r=i.find(\".g-img-divider span\");\n",
+    "    if(t.drag_horizontal)n=a.pageX-i.offset().left,o=n/s*100;\n",
+    "    else{\n",
+    "        var f=i.offset().top-e(window).scrollTop();\n",
+    "        n=a.clientY/f,\n",
+    "        o=(a.clientY-f)/d*100\n",
+    "    }\n",
+    "    if(t.touch&&\"undefined\"!=typeof a.originalEvent.touches)\n",
+    "    {\n",
+    "        var g=a.originalEvent.touches[0];\n",
+    "        o=t.drag_horizontal?(g.pageX-i.offset().left)/s*100:(g.pageY-i.offset().top)/d*100;\n",
+    "    }\n",
+    "    t.split_horizontal?(i.find(\".g-img-after\").css(\"left\",o+\"%\"),i.find(\".g-img-divider\").css(\"left\",o+\"%\")):(i.find(\".g-img-after\").css(\"top\",o+\"%\"),i.find(\".g-img-divider\").css(\"top\",o+\"%\")),\n",
     "t.hide_message&&r.is(\":visible\")&&r.fadeOut()}).on(\"mouseleave touchend touchcancel\",function(e){var a=i.data(\"reset-timer\"),n=i.find(\".g-img-divider span\");\n",
     "t.reset&&(a||(a=window.setTimeout(function(){t.split_horizontal?(i.find(\".g-img-after\").animate({left:\"50%\"},500),i.find(\".g-img-divider\").animate({left:\"50%\"\n",
     "},500,function(){n.fadeIn()})):(i.find(\".g-img-after\").animate({top:\"50%\"},500),i.find(\".g-img-divider\").animate({top:\"50%\"},500,function(){n.fadeIn()})),\n",
@@ -4113,7 +4133,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 150,
+   "execution_count": 29,
    "metadata": {
     "tags": [
      "js_compare_slide"
@@ -4123,6 +4143,20 @@
     {
      "data": {
       "application/javascript": [
+       "\n",
+       "\n",
+       "    !function(e){e.fn.beforeafter=function(i){var t=e.extend({touch:!0,message:\"Slide\",hide_message:!0,reset:!0,reset_delay:3e3,drag_horizontal:!0,split_horizontal:!0\n",
+       "},i);return this.each(function(){var i=e(this),a=i.find(\"img\"),n=a.data(\"aftersrc\"),s=i.width(),d=0;a.after('<div class=\"g-img-after\"><img style=\"width: '+s+'px;\" src=\"'+n+'\"></div>'),\n",
+       "a.addClass(\"g-img-before\").width(s),i.append('<div class=\"g-img-divider\"><span>'+t.message+\"</span></div>\"),d=i.height(),t.split_horizontal||i.addClass(\"g-vertical\"),\n",
+       "i.on(\"mouseenter touchstart\",function(e){var t=i.data(\"reset-timer\");t&&(window.clearTimeout(t),i.data(\"reset-timer\",!1))}).on(\"mousemove touchmove\",function(a){\n",
+       "var n=0,o=0,r=i.find(\".g-img-divider span\");if(t.drag_horizontal)n=a.pageX-i.offset().left,o=n/s*100;else{var f=i.offset().top-e(window).scrollTop();n=a.clientY/f,\n",
+       "o=(a.clientY-f)/d*100}if(t.touch&&\"undefined\"!=typeof a.originalEvent.touches){var g=a.originalEvent.touches[0];o=t.drag_horizontal?(g.pageX-i.offset().left)/s*100:(g.pageY-i.offset().top)/d*100;\n",
+       "}t.split_horizontal?(i.find(\".g-img-after\").css(\"left\",o+\"%\"),i.find(\".g-img-divider\").css(\"left\",o+\"%\")):(i.find(\".g-img-after\").css(\"top\",o+\"%\"),i.find(\".g-img-divider\").css(\"top\",o+\"%\")),\n",
+       "t.hide_message&&r.is(\":visible\")&&r.fadeOut()}).on(\"mouseleave touchend touchcancel\",function(e){var a=i.data(\"reset-timer\"),n=i.find(\".g-img-divider span\");\n",
+       "t.reset&&(a||(a=window.setTimeout(function(){t.split_horizontal?(i.find(\".g-img-after\").animate({left:\"50%\"},500),i.find(\".g-img-divider\").animate({left:\"50%\"\n",
+       "},500,function(){n.fadeIn()})):(i.find(\".g-img-after\").animate({top:\"50%\"},500),i.find(\".g-img-divider\").animate({top:\"50%\"},500,function(){n.fadeIn()})),\n",
+       "i.data(\"reset-timer\",!1)},t.reset_delay),i.data(\"reset-timer\",a)))})}),this}}(jQuery);\n",
+       "\n",
        "var div_str = '';\n",
        "//div_str = '<style>  .g-before-after{position:relative;overflow:hidden}.g-before-after img{display:block}.g-before-after .g-img-before{float:left}.g-before-after .g-img-after,.g-before-after.g-vertical .g-img-after{position:absolute;top:0;right:0;left:50%;bottom:0;overflow:hidden}.g-before-after .g-img-after img{position:absolute;right:0;top:0}.g-before-after .g-img-divider{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:1px solid #fff;border-right:1px solid #fff}.g-before-after .g-img-divider>span{position:absolute;top:50%;display:block;background-color:#fff;padding:5px 10px;line-height:1;text-align:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.g-before-after.g-vertical .g-img-after{top:50%;left:0}.g-before-after.g-vertical .g-img-after img{position:absolute;right:auto;top:auto;left:0;bottom:0}.g-before-after.g-vertical .g-img-divider{position:absolute;left:0;top:50%;bottom:auto;right:0;height:0;width:100%;border-top:1px solid #fff;border-bottom:1px solid #fff;border-left:0 none;border-right:0 none}.g-before-after.g-vertical .g-img-divider>span{top:50%;left:50%} </style>'\n",
        "//div_str += '<script>$(\\'#div_compare_containerx\\').beforeafter();  </script>';\n",
@@ -4157,6 +4191,20 @@
    ],
    "source": [
     "%%javascript\n",
+    "\n",
+    "\n",
+    "    !function(e){e.fn.beforeafter=function(i){var t=e.extend({touch:!0,message:\"Slide\",hide_message:!0,reset:!0,reset_delay:3e3,drag_horizontal:!0,split_horizontal:!0\n",
+    "},i);return this.each(function(){var i=e(this),a=i.find(\"img\"),n=a.data(\"aftersrc\"),s=i.width(),d=0;a.after('<div class=\"g-img-after\"><img style=\"width: '+s+'px;\" src=\"'+n+'\"></div>'),\n",
+    "a.addClass(\"g-img-before\").width(s),i.append('<div class=\"g-img-divider\"><span>'+t.message+\"</span></div>\"),d=i.height(),t.split_horizontal||i.addClass(\"g-vertical\"),\n",
+    "i.on(\"mouseenter touchstart\",function(e){var t=i.data(\"reset-timer\");t&&(window.clearTimeout(t),i.data(\"reset-timer\",!1))}).on(\"mousemove touchmove\",function(a){\n",
+    "var n=0,o=0,r=i.find(\".g-img-divider span\");if(t.drag_horizontal)n=a.pageX-i.offset().left,o=n/s*100;else{var f=i.offset().top-e(window).scrollTop();n=a.clientY/f,\n",
+    "o=(a.clientY-f)/d*100}if(t.touch&&\"undefined\"!=typeof a.originalEvent.touches){var g=a.originalEvent.touches[0];o=t.drag_horizontal?(g.pageX-i.offset().left)/s*100:(g.pageY-i.offset().top)/d*100;\n",
+    "}t.split_horizontal?(i.find(\".g-img-after\").css(\"left\",o+\"%\"),i.find(\".g-img-divider\").css(\"left\",o+\"%\")):(i.find(\".g-img-after\").css(\"top\",o+\"%\"),i.find(\".g-img-divider\").css(\"top\",o+\"%\")),\n",
+    "t.hide_message&&r.is(\":visible\")&&r.fadeOut()}).on(\"mouseleave touchend touchcancel\",function(e){var a=i.data(\"reset-timer\"),n=i.find(\".g-img-divider span\");\n",
+    "t.reset&&(a||(a=window.setTimeout(function(){t.split_horizontal?(i.find(\".g-img-after\").animate({left:\"50%\"},500),i.find(\".g-img-divider\").animate({left:\"50%\"\n",
+    "},500,function(){n.fadeIn()})):(i.find(\".g-img-after\").animate({top:\"50%\"},500),i.find(\".g-img-divider\").animate({top:\"50%\"},500,function(){n.fadeIn()})),\n",
+    "i.data(\"reset-timer\",!1)},t.reset_delay),i.data(\"reset-timer\",a)))})}),this}}(jQuery);\n",
+    "\n",
     "var div_str = '';\n",
     "//div_str = '<style>  .g-before-after{position:relative;overflow:hidden}.g-before-after img{display:block}.g-before-after .g-img-before{float:left}.g-before-after .g-img-after,.g-before-after.g-vertical .g-img-after{position:absolute;top:0;right:0;left:50%;bottom:0;overflow:hidden}.g-before-after .g-img-after img{position:absolute;right:0;top:0}.g-before-after .g-img-divider{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:1px solid #fff;border-right:1px solid #fff}.g-before-after .g-img-divider>span{position:absolute;top:50%;display:block;background-color:#fff;padding:5px 10px;line-height:1;text-align:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.g-before-after.g-vertical .g-img-after{top:50%;left:0}.g-before-after.g-vertical .g-img-after img{position:absolute;right:auto;top:auto;left:0;bottom:0}.g-before-after.g-vertical .g-img-divider{position:absolute;left:0;top:50%;bottom:auto;right:0;height:0;width:100%;border-top:1px solid #fff;border-bottom:1px solid #fff;border-left:0 none;border-right:0 none}.g-before-after.g-vertical .g-img-divider>span{top:50%;left:50%} </style>'\n",
     "//div_str += '<script>$(\\'#div_compare_containerx\\').beforeafter();  </script>';\n",
@@ -4947,7 +4995,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.7"
+   "version": "3.7.3"
   },
   "toc": {
    "base_numbering": 1,
diff --git a/band_structure_visualization.ipynb b/band_structure_visualization.ipynb
index c78ff91f874a77ef49c5feed6f698083e86cfc78..ed030659ac79ccca86c83b2d5368ec3be6deeb33 100644
--- a/band_structure_visualization.ipynb
+++ b/band_structure_visualization.ipynb
@@ -829,7 +829,7 @@
     "            {\n",
     "                for(var system in result_json[i_key])\n",
     "                {\n",
-    "                    //Get the path to the data files (json): https://labdev-nomad.esc.rzg.mpg.de/fairdi/nomad/migration/api/archive/upload_id/calc_id \n",
+    "                    //Get the path to the data files (json): https://labdev-nomad.esc.rzg.mpg.de/fairdi/nomad/migration/api/archive/upload_id/calc_id \n",
     "                    path = \"https://labdev-nomad.esc.rzg.mpg.de/fairdi/nomad/migration/api/archive/\" + result_json[i_key][system][\"upload_id\"] + \"/\" + result_json[i_key][system][\"calc_id\"]\n",
     "                    paths.push(path);\n",
     "                    \n",
@@ -906,7 +906,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 131,
+   "execution_count": 1,
    "metadata": {
     "tags": [
      "process_band_dos_data"
@@ -1749,7 +1749,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 132,
+   "execution_count": 2,
    "metadata": {
     "scrolled": false,
     "tags": [
@@ -2107,12 +2107,24 @@
        "\n",
        "        var compare_list = [];\n",
        "        compare_list = make_compare_list();\n",
-       "                //[i_material_1, i_material_2] = make_compare_list();\n",
        "        i_material_1 = compare_list[0];\n",
        "        i_material_2 = compare_list[1];\n",
-       "        //document.getElementById(\"demo\").innerHTML = \"In add info compare:\" + i_material_1.toString() + i_material_2.toString();\n",
-       "        compare_figures(i_material_1, i_material_2);  \n",
+       "        if((i_material_1 == -1) || (i_material_2 == -1))\n",
+       "        {\n",
+       "            var str = '<b><font size = \"5pt\" color=\"#940000\">Error: Please select two materials before comparison.</font></b><br>';\n",
+       "            document.getElementById(\"div_compare_errormsg\").innerHTML = str;\n",
+       "            document.getElementById(\"div_compare_containerx1\").innerHTML = \"\";\n",
+       "            document.getElementById(\"div_compare_containerx2\").innerHTML = \"\";\n",
+       "            document.getElementById(\"div_compare_info1\").innerHTML = \"\";\n",
+       "            document.getElementById(\"div_compare_info2\").innerHTML = \"\";    \n",
+       "            str = \"\";\n",
+       "            return;\n",
+       "            \n",
+       "        }\n",
+       "        document.getElementById(\"div_compare_errormsg\").innerHTML = \"\";\n",
+       "        compare_figures(i_material_1, i_material_2); \n",
        "    }\n",
+       "\n",
        "    function make_compare_list()\n",
        "    {\n",
        "      //get the links to the images\n",
@@ -2134,8 +2146,8 @@
        "          //str += beakerx.image_band_links[i];\n",
        "        }\n",
        "      }\n",
-       "      var i_material_1 = 0;\n",
-       "      var i_material_2 = 0;\n",
+       "      var i_material_1 = -1;\n",
+       "      var i_material_2 = -1;\n",
        "      //document.getElementById(\"demo\").innerHTML = 'In making comare list';\n",
        "      image_band_links_selected = images_selected_links;\n",
        "      //document.getElementById(\"demo\").innerHTML = 'In making comare list: next';\n",
@@ -2168,11 +2180,20 @@
        "\n",
        "    function compare_figures(i_material_1, i_material_2)\n",
        "    {\n",
+       "        \n",
+       "        var promise = Promise.resolve();\n",
+       "        promise\n",
+       "            .then(Jupyter.notebook.execute_cells(window.findCellIndicesByTag('js_compare_slide')))\n",
+       "            .then(add_info_compare(i_material_1, i_material_2))\n",
+       "            .then(document.getElementById(\"div_compare_container\").scrollIntoView({ behavior: 'smooth' }))\n",
+       "            .then(document.getElementById(\"div_compare_container\").scrollTop += 50);\n",
+       "        /*\n",
        "        Jupyter.notebook.execute_cells(window.findCellIndicesByTag('js_query_beforeafter'));\n",
        "        Jupyter.notebook.execute_cells(window.findCellIndicesByTag('js_compare_slide'));\n",
        "        add_info_compare(i_material_1, i_material_2);\n",
        "        document.getElementById(\"div_compare_container\").scrollIntoView({ behavior: 'smooth' }); \n",
        "        document.getElementById(\"div_compare_container\").scrollTop += 50;\n",
+       "        */\n",
        "\n",
        "    }\n",
        "\n",
@@ -2216,19 +2237,17 @@
        "    function add_info_compare(i,j)\n",
        "    {\n",
        "\n",
-       "      div_info_id = \"div_compare_info\";\n",
+       "      \n",
        "      var str = '';\n",
        "\n",
        "      if_same_scale = check_compare_scale(i_material_1, i_material_2);\n",
        "      if(if_same_scale == -1)\n",
        "      {\n",
-       "        str = '<b><font size = \"15pt\" color=\"#940000\">Error: Different lower/upper limits.</font></b><br>';\n",
-       "        document.getElementById(\"div_compare_container\").innerHTML = str;\n",
-       "        document.getElementById(div_info_id).innerHTML = '';\n",
-       "        return;\n",
+       "        str = '<b><font size = \"5pt\" color=\"#940000\">Warning: Different lower/upper limits.</font></b><br>';\n",
+       "        document.getElementById(\"div_compare_errormsg\").innerHTML = str;\n",
        "      }\n",
-       "\n",
-       "      str += \"<br><b><font-size:15pt>Information of the first calculation (left):</font></b> <br>\";\n",
+       "    \n",
+       "      document.getElementById(\"div_compare_errormsg\").innerHTML = \"\";\n",
        "      str += \"<br> <b>Atom labels:</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[i][\"atom_labels\"];\n",
        "      //str += \"<br> <b>Space group:</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[i][\"space_group_symbol\"];\n",
        "      //str += \"<br> <b>Lattice constants (in Ang):</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[i][\"lattice_constant\"];\n",
@@ -2236,15 +2255,17 @@
        "      str += \"<br> <b>Basis set type:</b>&nbsp&nbsp&nbsp&nbsp\" + info_obj_all[i][\"program_basis_set_type\"];\n",
        "      str += \"<br> <b>Functional:</b>&nbsp&nbsp&nbsp&nbsp\" + info_obj_all[i][\"XC_functional_name\"];\n",
        "      str += \"<br> <b>Number of <i>k</i> points per inverse distance:</b>&nbsp&nbsp&nbsp&nbsp\" + band_obj_all[j][\"average_N_k_points_per_inverse_distance\"].toFixed(3);\n",
-       "      str += \"<br><br><br><b><font-size:15pt>Information of the second calculation (right):</font></b><br>\";\n",
-       "      str += \"<br> <b>Atom labels:</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"atom_labels\"];\n",
+       "      document.getElementById(\"div_compare_info1\").innerHTML = str;// + origData[\"atom_labels\"];\n",
+       "        \n",
+       "      str = \"<br> <b>Atom labels:</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"atom_labels\"];\n",
        "      //str += \"<br> <b>Space group:</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"space_group_symbol\"];\n",
        "      //str += \"<br> <b>Lattice constants (in Ang):</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"lattice_constant\"];\n",
        "      str += \"<br> <b>Program name:</b>&nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"program_name\"].toUpperCase();\n",
        "      str += \"<br> <b>Basis set type:</b>&nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"program_basis_set_type\"];  \n",
        "      str += \"<br> <b>Functional:</b>&nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"XC_functional_name\"];\n",
        "      str += \"<br> <b>Number of <i>k</i> points per inverse distance:</b>&nbsp&nbsp&nbsp&nbsp\" + band_obj_all[j][\"average_N_k_points_per_inverse_distance\"].toFixed(3);\n",
-       "      document.getElementById(div_info_id).innerHTML = str;// + origData[\"atom_labels\"];\n",
+       "     \n",
+       "      document.getElementById(\"div_compare_info2\").innerHTML = str;// + origData[\"atom_labels\"];\n",
        "    }\n",
        "\n",
        "\n",
@@ -2325,8 +2346,10 @@
        "\n",
        "      upperlim_id = \"upperlimit\" + i_material;\n",
        "      document.getElementById(upperlim_id).innerHTML =\"10.0\";\n",
+       "      upperlim = document.getElementById(upperlim_id).value = 10.0;\n",
        "      lowerlim_id = \"lowerlimit\" + i_material;\n",
        "      document.getElementById(lowerlim_id).innerHTML =\"-10.0\";\n",
+       "      upperlim = document.getElementById(lowerlim_id).value = -10.0;\n",
        "\n",
        "\n",
        "      //document.getElementById(\"demoa\").innerHTML =i_material;\n",
@@ -2349,8 +2372,10 @@
        "\n",
        "      upperlim_id = \"upperlimit\" + i_material;\n",
        "      document.getElementById(upperlim_id).innerHTML =\"100.0\";\n",
+       "      upperlim = document.getElementById(upperlim_id).value = 100.0;\n",
        "      lowerlim_id = \"lowerlimit\" + i_material;\n",
        "      document.getElementById(lowerlim_id).innerHTML =\"-100.0\";\n",
+       "      upperlim = document.getElementById(lowerlim_id).value = -100.0;\n",
        "\n",
        "      //document.getElementById(\"demoa\").innerHTML =i_material;\n",
        "      var checkbox_VBM_id = \"checkbox_VBM\" + i.toString();\n",
@@ -2506,7 +2531,7 @@
        "  <p style=\"color: #20335d;font-weight: 100; font-size: 18pt;\"> Select two materials in the checkbox on the right for comparison:</p>\n",
        "  <p style=\"color: #000;font-weight: 1000; font-size: 8pt;\"></p>\n",
        "  <button class = \"button\" onclick = \"clean_compare_list()\"> Clean selections </button> \n",
-       "  <button class = \"button\" onclick = \"compare();compare()\" title = \"Select 2 materials in the checkbox below and compare: please make sure that the upper/lower limits are the same (using Rescale/Autoscale buttons).\" > Compare</button>\n",
+       "  <button class = \"button\" onclick = \"compare()\" title = \"Select 2 materials in the checkbox below and compare: please make sure that the upper/lower limits are the same (using Rescale/Autoscale buttons).\" > Compare</button>\n",
        "</div>\n",
        "\n",
        "\n",
@@ -2524,9 +2549,26 @@
        "<div id = \"div_compare\" style = \"position: fixed; top: 20%; left: 10%; width: 1200px; height: 600px; z-index: 999999; border: 1px solid #555; background-color: #fff; display: none\" onclick = \"$(this).fadeOut(500)\"> \n",
        "  \n",
        "  <div style = \"float: right; width: 80px; height: 25px; margin-top: 10px; margin-right: 10px; z-index: 1000000; border: 1px solid #555; text-align: center; vertical-align: middle; background-color: #f9f9f9; font-size:12pt; font-color: #000; cursor:pointer;\" > CLOSE </div> <!--button to close the div-->\n",
-       "  <div id = \"div_compare_info\" style = \" width: 350px; height: 500px; float: right; margin-top: 50px; margin-right: 10px; z-index: 10000000;\"></div>\n",
-       "  <div id = \"div_compare_container\" style = \"margin-top: 50px; margin-left: 100px; width: 600px; height: 300px;\">\n",
-       "    <div class=\"g-before-after\" id = \"div_compare_containerx\"></div>\n",
+       "  <div id = \"div_compare_container\" style = \"margin-top: 50px; margin-left: 100px; width: 1200px; height: 600px;\">\n",
+       "  <div id = \"div_compare_errormsg\"></div>\n",
+       "  <table>\n",
+       "    <tr>\n",
+       "    <td>\n",
+       "      <div id = \"div_compare_containerx1\"></div>   \n",
+       "    </td>\n",
+       "    <td>\n",
+       "      <div id = \"div_compare_containerx2\"></div>   \n",
+       "    </td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "    <td>\n",
+       "      <div id = \"div_compare_info1\" style = \"z-index: 10000000;\"></div>\n",
+       "    </td>\n",
+       "    <td>\n",
+       "      <div id = \"div_compare_info2\" style = \"z-index: 10000000;\"></div>    \n",
+       "    </td>\n",
+       "    </tr>\n",
+       "  </table>\n",
        "  </div>\n",
        "</div>\n",
        "\n",
@@ -2896,12 +2938,24 @@
     "\n",
     "        var compare_list = [];\n",
     "        compare_list = make_compare_list();\n",
-    "                //[i_material_1, i_material_2] = make_compare_list();\n",
     "        i_material_1 = compare_list[0];\n",
     "        i_material_2 = compare_list[1];\n",
-    "        //document.getElementById(\"demo\").innerHTML = \"In add info compare:\" + i_material_1.toString() + i_material_2.toString();\n",
-    "        compare_figures(i_material_1, i_material_2);  \n",
+    "        if((i_material_1 == -1) || (i_material_2 == -1))\n",
+    "        {\n",
+    "            var str = '<b><font size = \"5pt\" color=\"#940000\">Error: Please select two materials before comparison.</font></b><br>';\n",
+    "            document.getElementById(\"div_compare_errormsg\").innerHTML = str;\n",
+    "            document.getElementById(\"div_compare_containerx1\").innerHTML = \"\";\n",
+    "            document.getElementById(\"div_compare_containerx2\").innerHTML = \"\";\n",
+    "            document.getElementById(\"div_compare_info1\").innerHTML = \"\";\n",
+    "            document.getElementById(\"div_compare_info2\").innerHTML = \"\";    \n",
+    "            str = \"\";\n",
+    "            return;\n",
+    "            \n",
+    "        }\n",
+    "        document.getElementById(\"div_compare_errormsg\").innerHTML = \"\";\n",
+    "        compare_figures(i_material_1, i_material_2); \n",
     "    }\n",
+    "\n",
     "    function make_compare_list()\n",
     "    {\n",
     "      //get the links to the images\n",
@@ -2923,8 +2977,8 @@
     "          //str += beakerx.image_band_links[i];\n",
     "        }\n",
     "      }\n",
-    "      var i_material_1 = 0;\n",
-    "      var i_material_2 = 0;\n",
+    "      var i_material_1 = -1;\n",
+    "      var i_material_2 = -1;\n",
     "      //document.getElementById(\"demo\").innerHTML = 'In making comare list';\n",
     "      image_band_links_selected = images_selected_links;\n",
     "      //document.getElementById(\"demo\").innerHTML = 'In making comare list: next';\n",
@@ -2957,11 +3011,20 @@
     "\n",
     "    function compare_figures(i_material_1, i_material_2)\n",
     "    {\n",
+    "        \n",
+    "        var promise = Promise.resolve();\n",
+    "        promise\n",
+    "            .then(Jupyter.notebook.execute_cells(window.findCellIndicesByTag('js_compare_slide')))\n",
+    "            .then(add_info_compare(i_material_1, i_material_2))\n",
+    "            .then(document.getElementById(\"div_compare_container\").scrollIntoView({ behavior: 'smooth' }))\n",
+    "            .then(document.getElementById(\"div_compare_container\").scrollTop += 50);\n",
+    "        /*\n",
     "        Jupyter.notebook.execute_cells(window.findCellIndicesByTag('js_query_beforeafter'));\n",
     "        Jupyter.notebook.execute_cells(window.findCellIndicesByTag('js_compare_slide'));\n",
     "        add_info_compare(i_material_1, i_material_2);\n",
     "        document.getElementById(\"div_compare_container\").scrollIntoView({ behavior: 'smooth' }); \n",
     "        document.getElementById(\"div_compare_container\").scrollTop += 50;\n",
+    "        */\n",
     "\n",
     "    }\n",
     "\n",
@@ -3005,19 +3068,17 @@
     "    function add_info_compare(i,j)\n",
     "    {\n",
     "\n",
-    "      div_info_id = \"div_compare_info\";\n",
+    "      \n",
     "      var str = '';\n",
     "\n",
     "      if_same_scale = check_compare_scale(i_material_1, i_material_2);\n",
     "      if(if_same_scale == -1)\n",
     "      {\n",
-    "        str = '<b><font size = \"15pt\" color=\"#940000\">Error: Different lower/upper limits.</font></b><br>';\n",
-    "        document.getElementById(\"div_compare_container\").innerHTML = str;\n",
-    "        document.getElementById(div_info_id).innerHTML = '';\n",
-    "        return;\n",
+    "        str = '<b><font size = \"5pt\" color=\"#940000\">Warning: Different lower/upper limits.</font></b><br>';\n",
+    "        document.getElementById(\"div_compare_errormsg\").innerHTML = str;\n",
     "      }\n",
-    "\n",
-    "      str += \"<br><b><font-size:15pt>Information of the first calculation (left):</font></b> <br>\";\n",
+    "    \n",
+    "      document.getElementById(\"div_compare_errormsg\").innerHTML = \"\";\n",
     "      str += \"<br> <b>Atom labels:</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[i][\"atom_labels\"];\n",
     "      //str += \"<br> <b>Space group:</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[i][\"space_group_symbol\"];\n",
     "      //str += \"<br> <b>Lattice constants (in Ang):</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[i][\"lattice_constant\"];\n",
@@ -3025,15 +3086,17 @@
     "      str += \"<br> <b>Basis set type:</b>&nbsp&nbsp&nbsp&nbsp\" + info_obj_all[i][\"program_basis_set_type\"];\n",
     "      str += \"<br> <b>Functional:</b>&nbsp&nbsp&nbsp&nbsp\" + info_obj_all[i][\"XC_functional_name\"];\n",
     "      str += \"<br> <b>Number of <i>k</i> points per inverse distance:</b>&nbsp&nbsp&nbsp&nbsp\" + band_obj_all[j][\"average_N_k_points_per_inverse_distance\"].toFixed(3);\n",
-    "      str += \"<br><br><br><b><font-size:15pt>Information of the second calculation (right):</font></b><br>\";\n",
-    "      str += \"<br> <b>Atom labels:</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"atom_labels\"];\n",
+    "      document.getElementById(\"div_compare_info1\").innerHTML = str;// + origData[\"atom_labels\"];\n",
+    "        \n",
+    "      str = \"<br> <b>Atom labels:</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"atom_labels\"];\n",
     "      //str += \"<br> <b>Space group:</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"space_group_symbol\"];\n",
     "      //str += \"<br> <b>Lattice constants (in Ang):</b> &nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"lattice_constant\"];\n",
     "      str += \"<br> <b>Program name:</b>&nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"program_name\"].toUpperCase();\n",
     "      str += \"<br> <b>Basis set type:</b>&nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"program_basis_set_type\"];  \n",
     "      str += \"<br> <b>Functional:</b>&nbsp&nbsp&nbsp&nbsp\" + info_obj_all[j][\"XC_functional_name\"];\n",
     "      str += \"<br> <b>Number of <i>k</i> points per inverse distance:</b>&nbsp&nbsp&nbsp&nbsp\" + band_obj_all[j][\"average_N_k_points_per_inverse_distance\"].toFixed(3);\n",
-    "      document.getElementById(div_info_id).innerHTML = str;// + origData[\"atom_labels\"];\n",
+    "     \n",
+    "      document.getElementById(\"div_compare_info2\").innerHTML = str;// + origData[\"atom_labels\"];\n",
     "    }\n",
     "\n",
     "\n",
@@ -3114,8 +3177,10 @@
     "\n",
     "      upperlim_id = \"upperlimit\" + i_material;\n",
     "      document.getElementById(upperlim_id).innerHTML =\"10.0\";\n",
+    "      upperlim = document.getElementById(upperlim_id).value = 10.0;\n",
     "      lowerlim_id = \"lowerlimit\" + i_material;\n",
     "      document.getElementById(lowerlim_id).innerHTML =\"-10.0\";\n",
+    "      upperlim = document.getElementById(lowerlim_id).value = -10.0;\n",
     "\n",
     "\n",
     "      //document.getElementById(\"demoa\").innerHTML =i_material;\n",
@@ -3138,8 +3203,10 @@
     "\n",
     "      upperlim_id = \"upperlimit\" + i_material;\n",
     "      document.getElementById(upperlim_id).innerHTML =\"100.0\";\n",
+    "      upperlim = document.getElementById(upperlim_id).value = 100.0;\n",
     "      lowerlim_id = \"lowerlimit\" + i_material;\n",
     "      document.getElementById(lowerlim_id).innerHTML =\"-100.0\";\n",
+    "      upperlim = document.getElementById(lowerlim_id).value = -100.0;\n",
     "\n",
     "      //document.getElementById(\"demoa\").innerHTML =i_material;\n",
     "      var checkbox_VBM_id = \"checkbox_VBM\" + i.toString();\n",
@@ -3295,7 +3362,7 @@
     "  <p style=\"color: #20335d;font-weight: 100; font-size: 18pt;\"> Select two materials in the checkbox on the right for comparison:</p>\n",
     "  <p style=\"color: #000;font-weight: 1000; font-size: 8pt;\"></p>\n",
     "  <button class = \"button\" onclick = \"clean_compare_list()\"> Clean selections </button> \n",
-    "  <button class = \"button\" onclick = \"compare();compare()\" title = \"Select 2 materials in the checkbox below and compare: please make sure that the upper/lower limits are the same (using Rescale/Autoscale buttons).\" > Compare</button>\n",
+    "  <button class = \"button\" onclick = \"compare()\" title = \"Select 2 materials in the checkbox below and compare: please make sure that the upper/lower limits are the same (using Rescale/Autoscale buttons).\" > Compare</button>\n",
     "</div>\n",
     "\n",
     "\n",
@@ -3313,9 +3380,26 @@
     "<div id = \"div_compare\" style = \"position: fixed; top: 20%; left: 10%; width: 1200px; height: 600px; z-index: 999999; border: 1px solid #555; background-color: #fff; display: none\" onclick = \"$(this).fadeOut(500)\"> \n",
     "  \n",
     "  <div style = \"float: right; width: 80px; height: 25px; margin-top: 10px; margin-right: 10px; z-index: 1000000; border: 1px solid #555; text-align: center; vertical-align: middle; background-color: #f9f9f9; font-size:12pt; font-color: #000; cursor:pointer;\" > CLOSE </div> <!--button to close the div-->\n",
-    "  <div id = \"div_compare_info\" style = \" width: 350px; height: 500px; float: right; margin-top: 50px; margin-right: 10px; z-index: 10000000;\"></div>\n",
-    "  <div id = \"div_compare_container\" style = \"margin-top: 50px; margin-left: 100px; width: 600px; height: 300px;\">\n",
-    "    <div class=\"g-before-after\" id = \"div_compare_containerx\"></div>\n",
+    "  <div id = \"div_compare_container\" style = \"margin-top: 50px; margin-left: 100px; width: 1200px; height: 600px;\">\n",
+    "  <div id = \"div_compare_errormsg\"></div>\n",
+    "  <table>\n",
+    "    <tr>\n",
+    "    <td>\n",
+    "      <div id = \"div_compare_containerx1\"></div>   \n",
+    "    </td>\n",
+    "    <td>\n",
+    "      <div id = \"div_compare_containerx2\"></div>   \n",
+    "    </td>\n",
+    "    </tr>\n",
+    "    <tr>\n",
+    "    <td>\n",
+    "      <div id = \"div_compare_info1\" style = \"z-index: 10000000;\"></div>\n",
+    "    </td>\n",
+    "    <td>\n",
+    "      <div id = \"div_compare_info2\" style = \"z-index: 10000000;\"></div>    \n",
+    "    </td>\n",
+    "    </tr>\n",
+    "  </table>\n",
     "  </div>\n",
     "</div>\n",
     "\n",
@@ -3331,7 +3415,14 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 173,
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 21,
    "metadata": {
     "tags": [
      "plot_band"
@@ -3660,7 +3751,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 174,
+   "execution_count": 22,
    "metadata": {
     "tags": [
      "plot_dos"
@@ -3929,7 +4020,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 167,
+   "execution_count": 3,
    "metadata": {
     "tags": [
      "init_jquery"
@@ -3956,7 +4047,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 168,
+   "execution_count": 4,
    "metadata": {
     "tags": [
      "init_flot"
@@ -3983,7 +4074,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 169,
+   "execution_count": 5,
    "metadata": {
     "tags": [
      "init_flot_axislabels"
@@ -4010,7 +4101,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 170,
+   "execution_count": 6,
    "metadata": {
     "tags": [
      "init_flot_navigate"
@@ -4064,7 +4155,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 149,
+   "execution_count": 603,
    "metadata": {
     "tags": [
      "js_query_beforeafter"
@@ -4113,7 +4204,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 150,
+   "execution_count": 23,
    "metadata": {
     "tags": [
      "js_compare_slide"
@@ -4124,27 +4215,22 @@
      "data": {
       "application/javascript": [
        "var div_str = '';\n",
-       "//div_str = '<style>  .g-before-after{position:relative;overflow:hidden}.g-before-after img{display:block}.g-before-after .g-img-before{float:left}.g-before-after .g-img-after,.g-before-after.g-vertical .g-img-after{position:absolute;top:0;right:0;left:50%;bottom:0;overflow:hidden}.g-before-after .g-img-after img{position:absolute;right:0;top:0}.g-before-after .g-img-divider{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:1px solid #fff;border-right:1px solid #fff}.g-before-after .g-img-divider>span{position:absolute;top:50%;display:block;background-color:#fff;padding:5px 10px;line-height:1;text-align:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.g-before-after.g-vertical .g-img-after{top:50%;left:0}.g-before-after.g-vertical .g-img-after img{position:absolute;right:auto;top:auto;left:0;bottom:0}.g-before-after.g-vertical .g-img-divider{position:absolute;left:0;top:50%;bottom:auto;right:0;height:0;width:100%;border-top:1px solid #fff;border-bottom:1px solid #fff;border-left:0 none;border-right:0 none}.g-before-after.g-vertical .g-img-divider>span{top:50%;left:50%} </style>'\n",
-       "//div_str += '<script>$(\\'#div_compare_containerx\\').beforeafter();  </script>';\n",
-       "//div_str +='<script type=\\\"text/javascript\\\" src=\\\"https://github.com/jquery/jquery/blob/master/src/jquery.js\\\"></script> '\n",
-       "//div_str += '<div class=\\\"g-before-after\\\" id=\\\"div_compare_containerx\\\">';\n",
        "div_str +='<img src = \\\"'\n",
        "\n",
        "var src1 = image_band_links_selected[0];\n",
        "var src2 = image_band_links_selected[1];\n",
-       "var tmp_src1 = src1;\n",
-       "var tmp_src2 = src2;\n",
-       "//src1 = \"https://images4.alphacoders.com/640/640956.jpg\";\n",
-       "//src2 = \"http://imgmr.com/wp-content/uploads/2016/06/SAO-anime.jpg\";\n",
+       "\n",
        "div_str +=src1;\n",
-       "div_str += '\\\" data-aftersrc=\\\"'\n",
+       "div_str += '\\\" height=\\\"600\\\" width=\\\"400\\\" >';\n",
+       "document.getElementById(\"div_compare_containerx1\").innerHTML = div_str;\n",
+       "div_str ='<img src= \\\"'\n",
        "div_str +=src2;\n",
        "//div_str += '\\\"></div>';\n",
-       "div_str += '\\\"/>';\n",
+       "div_str += '\\\" height=\\\"600\\\" width=\\\"400\\\">';\n",
        "//#div_compare_containerx\n",
-       "document.getElementById(\"div_compare_containerx\").innerHTML = div_str;\n",
-       "$('#div_compare_containerx').beforeafter({drag_horizontal: false, split_horizontal: false});\n",
-       "$('#div_compare_containerx').beforeafter({drag_horizontal: false, split_horizontal: false});\n",
+       "document.getElementById(\"div_compare_containerx2\").innerHTML = div_str;\n",
+       "//$('#div_compare_containerx').beforeafter({drag_horizontal: false, split_horizontal: false});\n",
+       "//$('#div_compare_containerx').beforeafter({drag_horizontal: false, split_horizontal: false});\n",
        "//beakerx.image_band_links[i]\n"
       ],
       "text/plain": [
@@ -4158,27 +4244,22 @@
    "source": [
     "%%javascript\n",
     "var div_str = '';\n",
-    "//div_str = '<style>  .g-before-after{position:relative;overflow:hidden}.g-before-after img{display:block}.g-before-after .g-img-before{float:left}.g-before-after .g-img-after,.g-before-after.g-vertical .g-img-after{position:absolute;top:0;right:0;left:50%;bottom:0;overflow:hidden}.g-before-after .g-img-after img{position:absolute;right:0;top:0}.g-before-after .g-img-divider{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:1px solid #fff;border-right:1px solid #fff}.g-before-after .g-img-divider>span{position:absolute;top:50%;display:block;background-color:#fff;padding:5px 10px;line-height:1;text-align:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.g-before-after.g-vertical .g-img-after{top:50%;left:0}.g-before-after.g-vertical .g-img-after img{position:absolute;right:auto;top:auto;left:0;bottom:0}.g-before-after.g-vertical .g-img-divider{position:absolute;left:0;top:50%;bottom:auto;right:0;height:0;width:100%;border-top:1px solid #fff;border-bottom:1px solid #fff;border-left:0 none;border-right:0 none}.g-before-after.g-vertical .g-img-divider>span{top:50%;left:50%} </style>'\n",
-    "//div_str += '<script>$(\\'#div_compare_containerx\\').beforeafter();  </script>';\n",
-    "//div_str +='<script type=\\\"text/javascript\\\" src=\\\"https://github.com/jquery/jquery/blob/master/src/jquery.js\\\"></script> '\n",
-    "//div_str += '<div class=\\\"g-before-after\\\" id=\\\"div_compare_containerx\\\">';\n",
     "div_str +='<img src = \\\"'\n",
     "\n",
     "var src1 = image_band_links_selected[0];\n",
     "var src2 = image_band_links_selected[1];\n",
-    "var tmp_src1 = src1;\n",
-    "var tmp_src2 = src2;\n",
-    "//src1 = \"https://images4.alphacoders.com/640/640956.jpg\";\n",
-    "//src2 = \"http://imgmr.com/wp-content/uploads/2016/06/SAO-anime.jpg\";\n",
+    "\n",
     "div_str +=src1;\n",
-    "div_str += '\\\" data-aftersrc=\\\"'\n",
+    "div_str += '\\\" height=\\\"600\\\" width=\\\"400\\\" >';\n",
+    "document.getElementById(\"div_compare_containerx1\").innerHTML = div_str;\n",
+    "div_str ='<img src= \\\"'\n",
     "div_str +=src2;\n",
     "//div_str += '\\\"></div>';\n",
-    "div_str += '\\\"/>';\n",
+    "div_str += '\\\" height=\\\"600\\\" width=\\\"400\\\">';\n",
     "//#div_compare_containerx\n",
-    "document.getElementById(\"div_compare_containerx\").innerHTML = div_str;\n",
-    "$('#div_compare_containerx').beforeafter({drag_horizontal: false, split_horizontal: false});\n",
-    "$('#div_compare_containerx').beforeafter({drag_horizontal: false, split_horizontal: false});\n",
+    "document.getElementById(\"div_compare_containerx2\").innerHTML = div_str;\n",
+    "//$('#div_compare_containerx').beforeafter({drag_horizontal: false, split_horizontal: false});\n",
+    "//$('#div_compare_containerx').beforeafter({drag_horizontal: false, split_horizontal: false});\n",
     "//beakerx.image_band_links[i]"
    ]
   },
@@ -4708,7 +4789,7 @@
     "        //alert(\"band_obj_all got!\")\n",
     "        var N_bands = Object.size(band_obj_all[i][\"band_y_axis\"]);\n",
     "        var N_k_coors = Object.size(band_obj_all[i][\"band_x_axis\"]);\n",
-    "        alert(band_obj_all[i][\"band_y_axis\"])\n",
+    "        //alert(band_obj_all[i][\"band_y_axis\"])\n",
     "        band_plotdata = [];\n",
     "\n",
     "        for(var i_band =0; i_band < N_bands; i_band++)\n",