Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I made these two files that cover all:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head runat="server"&gt; &lt;title&gt;Deep East Music&lt;/title&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; .buttons { float:left; width:60px; height:25px; margin:10px 0 0 5px; cursor:pointer; } .buttons[isselected = "true"] { background-color:#ff7373; } .buttons[isselected = "false"] { background-color:#cccccc; } &lt;/style&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $("#button1").click(function () { $(".buttons").attr("isselected", "false"); $(this).attr("isselected", "true"); $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"); }); $("#button2").click(function () { $(".buttons").attr("isselected", "false"); $(this).attr("isselected", "true"); $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430"); ////Use one of these if you need to reload the iframe //$('#myiframe').contentWindow.location.reload(true); //$("#myiframe").attr("src", $("#myiframe").attr("src")); }); $("#button3").click(function () { $(".buttons").attr("isselected", "false"); $(this).attr("isselected", "true"); $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336"); }); $("#button4").click(function () { $(".buttons").attr("isselected", "false"); $(this).attr("isselected", "true"); $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257"); }); }); function ClickedButton1 () { $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"); return false; }; function ClickedButton2 () { $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430"); return false; }; function ClickedButton3 () { $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336"); return false; }; function ClickedButton4 () { $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257"); return false; }; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;div id="button1" class="buttons" isselected="true"&gt;button1&lt;/div&gt; &lt;div id="button2" class="buttons" isselected="false"&gt;button2&lt;/div&gt; &lt;div id="button3" class="buttons" isselected="false"&gt;button3&lt;/div&gt; &lt;div id="button4" class="buttons" isselected="false"&gt;button4&lt;/div&gt; &lt;iframe id="mybuttonsiframe" width="100%" height="60" scrolling="no" frameborder="no" src="buttons.htm"&gt;&lt;/iframe&gt; &lt;iframe id="myiframe" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And buttons.htm looks like:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head runat="server"&gt; &lt;title&gt;Deep East Music&lt;/title&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; /* CSS Here */ .iframebuttons { float:left; width:100px; height:25px; margin:10px 0 0 5px; cursor:pointer; } .iframebuttons[isselected = "true"] { background-color:#ff7373; } .iframebuttons[isselected = "false"] { background-color:#cccccc; } &lt;/style&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $("#iframebutton1").click(function () { $(".iframebuttons").attr("isselected", "false"); $(this).attr("isselected", "true"); parent.ClickedButton1(); }); $("#iframebutton2").click(function () { $(".iframebuttons").attr("isselected", "false"); $(this).attr("isselected", "true"); parent.ClickedButton2(); }); $("#iframebutton3").click(function () { $(".iframebuttons").attr("isselected", "false"); $(this).attr("isselected", "true"); parent.ClickedButton3(); }); $("#iframebutton4").click(function () { $(".iframebuttons").attr("isselected", "false"); $(this).attr("isselected", "true"); parent.ClickedButton4(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;input type="button" id="iframebutton1" class="iframebuttons" isselected="true" value="iframebutton1" /&gt; &lt;input type="button" id="iframebutton2" class="iframebuttons" isselected="false" value="iframebutton2" /&gt; &lt;input type="button" id="iframebutton3" class="iframebuttons" isselected="false" value="iframebutton3" /&gt; &lt;input type="button" id="iframebutton4" class="iframebuttons" isselected="false" value="iframebutton4" /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload