View source for Recycling Corner/Slider controls

== Slider controls for Jmol ==

=== Version (A) ===
This has an amazing look-and-feel. Uses javascript, Jmol.js and Walter Zorn's Drag'n'Drop & DHTML Library, &copy; Walter Zorn under GNU LGPL.

See it [http://biomodel.uah.es/Jmol/sliders/wzorn/slab-slider.htm in action].

Steps to follow:

# Download Walter Zorn's library from http://www.walterzorn.com/dragdrop/dragdrop_e.htm (You need the <code>wz_dragdrop.js</code> file.)
# Get a copy of the image files, [[Image:Track.gif]]<code>track.gif</code> and [[Image:Sliderthumb.gif]]<code>sliderthumb.gif</code>. You could use your own, but size is important since the code is related to it.
# Include this code in your webpage:
<pre>
<head>
<script src="../../Jmol.js" type="text/javascript"></script>
<script type="text/javascript">
/* Uses Walter Zorn's Drag'n'Drop & DHTML Library (GNU LGPL). 
   Integration with Jmol by Angel HerrÃ¡ez.
*/
function slabSlider()
{
  jmolScript( 'slab ' + eval(100-(20+dd.elements.thumb.x-dd.elements.thumb.defx)) )
   document.getElementById("posi").innerHTML = 100-(20+dd.elements.thumb.x-dd.elements.thumb.defx)
}
</script>
</head>

<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<script type="text/javascript">
jmolInitialize("../../")
jmolApplet(300, "load lysozyme.pdb; spacefill;")
</script>
<input type="button"  value="prepare for slabbing"
onClick='jmolScript("spin off; slab on; slab 80;"); document.getElementById("posi").innerHTML="80"; dd.elements.thumb.moveTo(dd.elements.track.x+20, dd.elements.track.y); '>
<br>
<img name="track" src="track.gif" width="104" height="29" alt="" title="" align="absmiddle">
<img name="thumb" src="sliderthumb.gif" width="18" height="29" alt="" title="move me" align="absmiddle">
<span id="posi">80</span>%
<br>
<input type="button" value="cancel slabbing"
onClick='jmolScript("slab off;")'>

<script type="text/javascript">
/*  Courtesy of Walter Zorn; 
	Drag'nDrop & DHTML Library  (c)Walter Zorn under the LGPL (Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
*/
SET_DHTML("thumb"+MAXOFFLEFT+20+MAXOFFRIGHT+80+HORIZONTAL,"track"+NO_DRAG)
dd.elements.thumb.moveTo(dd.elements.track.x+20, dd.elements.track.y);
dd.elements.thumb.setZ(dd.elements.track.z+1);
dd.elements.track.addChild("thumb");
dd.elements.thumb.defx = dd.elements.track.x+20; 
dd.elements.thumb.setDragFunc(slabSlider);
//dd.elements.thumb.setDropFunc(slabSlider); //alternative, if it cannot cope with the other
</script>
</body>
</pre>
Important Notes:
# You must adjust the path to <code>Jmol.js</code>, <code>jmolInitialize()</code> and <code>wz_dragdrop.js</code> according to your set-up.
# The order of the code element in the above example is crucial. In particular, wz_dragdrop.js must be included in the body, not in the head. If in the head, the slider works in Firefox and Safari, but '''not in Internet Explorer'''. Also, the block starting with SET_DHTML(...) must follow the block that displays the slider itself on the page.

=== Version (B) ===
This looks excellent too, and has some more versatility. Uses javascript, CSS, Jmol.js and WebFX Slider, &copy; Erik Arvidsson under Apache Software License.

See instructions and several examples [http://biomodel.uah.es/Jmol/sliders/ here], applied to slabbing, bond thickness, translucency, ribbon width and thickness.