Instructions for the slider that uses WebFX code

  1. Get the javascript and CSS files, either from the downlodable zip here or from the original WebFX page, http://webfx.eae.net/dhtml/slider/slider.html
  2. Unzip to a folder of your choice. The example here will match this:
  3. Include this code in your webpage, inside the head section:
    <!--  Uses WebFX "Slider" from  http://webfx.eae.net/dhtml/slider/slider.html
    		Author: Erik Arvidsson
    		Licensed under the Apache Software License 2.0, http://webfx.eae.net/license/asl2
    		This component may be obtained, modified and distributed free of charge for personal 
    		as well as commercial use. Please see the license for the complete terms and exact wording.
       Integration with Jmol by Angel Herráez.
    -->
    <script type="text/javascript" src="slider/js/range.js"></script>
    <script type="text/javascript" src="slider/js/timer.js"></script>
    <script type="text/javascript" src="slider/js/slider.js"></script>
    <link type="text/css" rel="StyleSheet" href="slider/css/bluecurve/bluecurve.css" />
    <!-- end of Slider -->
    and also this:
    <script type="text/javascript">     
       var defaultSlab = 80;
       function toggleSlab() {
          var ctl = document.getElementById("slabToggle");
          if (ctl.checked) {
             Jmol.scriptWait(myJmol, "spin off; slab on; ");
             slabSlider.setValue(defaultSlab);
             applySlab(defaultSlab);
          } else {
            Jmol.scriptWait(myJmol, "slab off; ");
          }
       }
       function applySlab(x) {
         Jmol.script(myJmol, "slab " + x + ";");
       }
    </script>
    as well as the code needed to define Info and load JSmol.min.js
  4. If yor prefer, you can choose another CSS stylesheet instead of "bluecurve".
  5. Include this code in your webpage, inside the body section at the position where you want the slider:
    <div tabIndex="1" class="slider" id="slabSlider" style="width:200px;" >
    <input class="slider-input" id="slabSlider-input" name="slabSlider-input" />
    </div>
  6. Include this code in your webpage, inside the body section and after the position of the slider (may be at the end, right before the closing </body> tag):
    <script type="text/javascript">
    // WebFX "Slider"  code
    var slabSlider = new Slider(document.getElementById("slabSlider"), document.getElementById("slabSlider-input"), "horizontal")
    slabSlider.setMaximum(100)
    slabSlider.setMinimum(0)
    slabSlider.setUnitIncrement(2) // amount to increment the value when using the arrow keys
    slabSlider.setValue(defaultSlab)
    slabSlider.onchange = function ()
    { // onchange MUST BE all lowercase
    applySlab( document.getElementById("slabSlider-input").value )
    }
    window.onResize = function () { slabSlider.recalculate() }
    </script>
  7. That's it! Remember that to use slabbing in Jmol, you must first issue the command "slab on".
  8. You can see it all, integrated with Jmol, looking at the source code of the example pages.

 

[ Sliders index page ]