fattyacids.html

<script type="text/javascript" src="jsmol/JSmol.min.js"></script>
<script type="text/javascript">
    var Info = {
        color: "#FFFFFF", // white background
        height: 400,
        width: "100%", // fill the JSMol box to its container's width
        coverImage: "images/white.png",
        deferApplet: true, // don't load until user clicks on JSMol box
        deferUncover: true, // don't uncover until script fully executed
        script: "script scripts/fattyacids1.txt",
        use: "HTML5",
        j2sPath: "jsmol/j2s",
        serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php",
        disableInitialConsole: true,
        debug: false,
    };

    // don't load any JSMol until the page itself has finished loading
    $(document).ready(function(){
        // prevent JSMol from taking entire page
        Jmol.setDocument(0);
        // create new JSMol instance with parameters defined in Info above
        Jmol.getApplet("myJmol1", Info);
        // reuse Info parameters for subsequent JSMol instances, changing
        // only the script path
        Info.script = "script scripts/fattyacids2.txt";
        Jmol.getApplet("myJmol2", Info);
        Info.script = "script scripts/fattyacids3.txt";
        Jmol.getApplet("myJmol3", Info);
        Info.script = "script scripts/fattyacids4.txt";
        Jmol.getApplet("myJmol4", Info);
        Info.script = "script scripts/fattyacids5.txt";
        Jmol.getApplet("myJmol5", Info);
        // put JSMol code into the correct containers (id=jsmolWindowN)
        $("#jsmolWindow1").html(Jmol.getAppletHtml(myJmol1));
        $("#jsmolWindow2").html(Jmol.getAppletHtml(myJmol2));
        $("#jsmolWindow3").html(Jmol.getAppletHtml(myJmol3));
        $("#jsmolWindow4").html(Jmol.getAppletHtml(myJmol4));
        $("#jsmolWindow5").html(Jmol.getAppletHtml(myJmol5));
        // give our JSMol containers breathing room above and below
        $("#myJmol1_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#myJmol2_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#myJmol3_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#myJmol4_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#myJmol5_appletinfotablediv").css({
            "margin-top": "10px",
            "margin-right": "auto",
            "margin-bottom": "10px",
            "margin-left": "auto"
        });
        $("#resetBtn1").click(reset1);
        $("#resetBtn2").click(reset2);
        $("#resetBtn3").click(reset3);
        $("#resetBtn4").click(reset4);
        $("#resetBtn5").click(reset5);
        $("#spinBox1").click(spin1);
        $("#spinBox2").click(spin2);
        $("#spinBox3").click(spin3);
        $("#spinBox4").click(spin4);
        $("#spinBox5").click(spin5);
    });

    function reset1(event){
        Jmol.script(myJmol1, "script scripts/fattyacids1.txt")
    };

    function reset2(event){
        Jmol.script(myJmol2, "script scripts/fattyacids2.txt")
    };

    function reset3(event){
        Jmol.script(myJmol3, "script scripts/fattyacids3.txt")
    };

    function reset4(event){
        Jmol.script(myJmol4, "script scripts/fattyacids4.txt")
    };

    function reset5(event){
        Jmol.script(myJmol5, "script scripts/fattyacids5.txt")
    };

    function spin1(event){
        if (event.target.checked){
            Jmol.script(myJmol1, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol1, "spin off")
        };
    };

    function spin2(event){
        if (event.target.checked){
            Jmol.script(myJmol2, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol2, "spin off")
        };
    };

    function spin3(event){
        if (event.target.checked){
            Jmol.script(myJmol3, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol3, "spin off")
        };
    };

    function spin4(event){
        if (event.target.checked){
            Jmol.script(myJmol4, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol4, "spin off")
        };
    };

    function spin5(event){
        if (event.target.checked){
            Jmol.script(myJmol5, "set spin x 10; set spin y 10; spin on")
        } else {
            Jmol.script(myJmol5, "spin off")
        };
    };

    // turn off the JSMol alert that binary file loading is limited
    Jmol._alertNoBinary = false;
</script>

<!-- Page Title: Fatty Acids -->
<h2>Introduction</h2>
<p>
    This script shows the effects of one or more cis double bonds on the
    structure of fatty acids. Note how multiple double bonds introduce kinks
    into the hydrocarbon chain, which will prevent close packing of
    phospholipids containing such fatty acids. (Based on structure files
    from Klotho)
</p>
<br>

<h2>Stearic Acid</h2>
<p>
    This is stearic acid, which contains no double bonds.
</p>
<!-- JSMol Window Container -->
<div id="jsmolWindow1"></div>
<!-- UI Control Box -->
<div style="text-align: center;">
    <!-- give the button a right margin for spacing -->
    <button type="button" id="resetBtn1" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox1"> Spin On/Off
</div>
<br>

<h2>Oleic Acid</h2>
<p>
    This is oleic acid, which contains one double bond.
</p>
<div id="jsmolWindow2"></div>
<div style="text-align: center; margin-top: 10px;">
    <button type="button" id="resetBtn2" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox2"> Spin On/Off
</div>
<br>

<h2>Linoleic Acid</h2>
<p>
    This is linoleic acid, which contains two double bonds.
</p>
<div id="jsmolWindow3"></div>
<div style="text-align: center; margin-top: 10px;">
    <button type="button" id="resetBtn3" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox3"> Spin On/Off
</div>
<br>

<h2>Linolenic Acid</h2>
<p>
    This is linolenic acid, which contains three double bonds.
</p>
<div id="jsmolWindow4"></div>
<div style="text-align: center; margin-top: 10px;">
    <button type="button" id="resetBtn4" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox4"> Spin On/Off
</div>
<br>

<h2>Arachidonic Acid</h2>
<p>
    This is arachidonic acid, which contains four double bonds.
</p>
<div id="jsmolWindow5"></div>
<div style="text-align: center; margin-top: 10px;">
    <button type="button" id="resetBtn5" style="margin-right: 10px;">Reset</button>
    <input type="checkbox" id="spinBox5"> Spin On/Off
</div>