AngelHerraez: update to JSmol

2019-11-27T11:43:30Z

update to JSmol

AngelHerraez: moving long sections to subpages

2013-10-23T14:01:29Z

moving long sections to subpages

New page

== 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, © 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, © 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.

@@ Line 2: / Line 2: @@
 === 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.
+This has an amazing look-and-feel. Uses javascript 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].
@@ Line 10: / Line 10: @@
 # 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 type="text/javascript">
 /* Uses Walter Zorn's Drag'n'Drop & DHTML Library (GNU LGPL).
-    Integration with Jmol by Angel HerrÃ¡ez.
+    Integration with Jmol by Angel Herráez.
 */
-function slabSlider()
+function slabSlider() {
+ jmolScript( 'slab ' + eval(100-(20+dd.elements.thumb.x-dd.elements.thumb.defx)) )
-  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>
@@ Line 28: / Line 27: @@
 <body>
 <script type="text/javascript" src="wz_dragdrop.js"></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); '>
+ onClick='Jmol.script(myJmol, "spin off; slab on; slab 80;");
 <br>
 <img name="track" src="track.gif" width="104" height="29" alt="" title="" align="absmiddle">
@@ Line 40: / Line 37: @@
 <br>
 <input type="button" value="cancel slabbing"
-onClick='jmolScript("slab off;")'>
+ onClick='Jmol.script(myJmol, "slab off;")'>
 <script type="text/javascript">
-/*  Courtesy of Walter Zorn;
+/* 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
+   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)
@@ Line 56: / Line 53: @@
 </body>
 </pre>
-Important Notes:
+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.
+# You must adjust the path to <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.
+# 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, for some browsers. 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.
+This looks excellent too, and has some more versatility. Uses javascript, CSS 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.

Recycling Corner/Slider controls - Revision history

AngelHerraez: update to JSmol

AngelHerraez: moving long sections to subpages