Skip to content

Commit

Permalink
trying to load only the js file from live server
Browse files Browse the repository at this point in the history
  • Loading branch information
@grantelgin
grantelgin committed Nov 25, 2012
1 parent 0190484 commit a343574
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 11 deletions.
5 changes: 4 additions & 1 deletion p3/css/tuner.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
.string { width:30px; height:30px; border:1px solid #007cff; background-color: #06538b; color:white; font-family: sans-serif; font-weight:bold; font-size:20px; text-align: center; padding-top:10px; margin-top: 5px; margin-right:5px; float:left; cursor: pointer; }
.string { width:30px; height:30px; border:1px solid #007cff; background-color: #06538b; color:white; font-family: sans-serif; font-weight:bold; font-size:20px; text-align: center; padding-top:10px; margin-top: 5px; margin-right:5px; float:left; cursor: pointer; }

h1 { font-family: sans-serif; font-size: 24px; color:black; margin-bottom:0px; }
p { font-family: sans-serif; font-size: 18px; color:black;}
43 changes: 42 additions & 1 deletion p3/getInTune.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,48 @@


<body>
<div><a href='javascript:(function(){document.body.appendChild(document.createElement(&quot;script&quot;)).src=&quot;http://www.grantelgin.com/dwa/p3/getInTune.js&quot;;})();'>Get in tune!</a></div>
<h1>Get In Tune!</h1>
<p>guitar tuner</p>

<div id="DIV_tuner1" style="width:250px; height: 160px; background-color: #dbecff; padding: 10px;">
<div style="color: black; font-family: sans-serif; font-weight:bold; font-size:16px; float:left;">Get in tune!</div><div style="color: black; font-family: sans-serif; font-weight:bold; font-size:22px; float:right;" title="close"><a href="javascript:$('#DIV_tuner1').hide()">X</a></div><br><br>
<div style="color: black; font-family: sans-serif; font-weight:bold; font-size:16px; float:left;">Standard tuning</div><br>
<div id="E" class="string"><audio src="audio/E.mp3" id="Audio_E" loop="loop"></audio>E</div>
<div id="A" class="string"><audio src="audio/A.mp3" id="Audio_A" loop="loop"></audio>A</div>
<div id="D" class="string"><audio src="audio/D.mp3" id="Audio_D" loop="loop"></audio>D</div>
<div id="G" class="string"><audio src="audio/G.mp3" id="Audio_G" loop="loop"></audio>G</div>
<div id="B" class="string"><audio src="audio/B.mp3" id="Audio_B" loop="loop"></audio>B</div>
<div id="1" class="string"><audio src="audio/1stStringE.mp3" id="Audio_1" loop="loop"></audio>e</div>
<div style="clear:both;"></div>
<div style="color: black; font-family: sans-serif; font-size:15px; float:left; padding-top:20px;">Click a note above to hear the tone.<br>Click it again to stop.</div>

</div>
<script type='text/javascript'>
$(".string").click (function () {
thisString = $(this).attr("id");
thisAudio = 'Audio_' + thisString;
thisStringElem = document.getElementById(thisAudio);

if (isPlaying(thisStringElem)) {
document.getElementById(thisAudio).pause();
document.getElementById(thisAudio).currentTime = 0;
}
else {
document.getElementById(thisAudio).play();
}
});

function isPlaying(thisStringElem) {
return !thisStringElem.paused;
}

</script>


<div style="margin-top:30px;">
<h1>Bookmarklet coming soon!</h1>
<p>Drag this link to your bookmarks bar to load the tuner while viewing other web pages.</p>
<div><a href='javascript:(function(){document.body.appendChild(document.createElement(&quot;script&quot;)).src=&quot;http://grantelgin.com/dwa/p3/getInTune.js&quot;;})();'>Get in tune!</a></div>


</body>
Expand Down
20 changes: 17 additions & 3 deletions p3/getInTune.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,26 @@ if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
initGetInTune();
}

// Append div to body and load tuner.
// Append divs to body and load tuner.
function initGetInTune() {
var containerDiv = document.createElement('div');
$(containerDiv).load('http://www.grantelgin.com/dwa/p3/tune.html', function (){ console.log(containerDiv.innerHTML); });
document.body.appendChild(containerDiv);
var div1 = '<div id="DIV_tuner"style="width:250px;height:160px;background-color:#dbecff;padding:10px;position:fixed;top:10px;right:10px;">';
var div2 = '<div style="color:black;font-family:sans-serif;font-weight:bold;font-size:16px;float:left;">Get in tune!</div>';
var div3 = '<div style="color:black;font-family:sans-serif;font-weight:bold;font-size:22px;float:right;"><a href="javascript:$(\'#DIV_tuner\').hide()">X</a></div><br><br>';
var div4 = '<div style="color:black;font-family:sans-serif;font-weight:bold;font-size:16px;float:left;">Standard tuning</div><br>';
var div5E = '<div id="E" class="string" style="width:30px;height:30px;border:1px solid #007cff;background-color:#06538b;color:white;font-family:sans-serif;font-weight:bold;font-size:20px;text-align:center;padding-top:10px;margin-top:5px;margin-right:5px;float:left;cursor:pointer;"><audio src="http://grantelgin.com/dwa/p3/audio/E.mp3" id="Audio_E" loop="loop"></audio>E</div>';
var div5A = '<div id="A" class="string" style="width:30px;height:30px;border:1px solid #007cff;background-color:#06538b;color:white;font-family:sans-serif;font-weight:bold;font-size:20px;text-align:center;padding-top:10px;margin-top:5px;margin-right:5px;float:left;cursor:pointer;"><audio src="http://grantelgin.com/dwa/p3/audio/A.mp3" id="Audio_A" loop="loop"></audio>A</div>';
var div5D = '<div id="D" class="string" style="width:30px;height:30px;border:1px solid #007cff;background-color:#06538b;color:white;font-family:sans-serif;font-weight:bold;font-size:20px;text-align:center;padding-top:10px;margin-top:5px;margin-right:5px;float:left;cursor:pointer;"><audio src="http://grantelgin.com/dwa/p3/audio/D.mp3" id="Audio_D" loop="loop"></audio>D</div>';
var div5G = '<div id="G" class="string" style="width:30px;height:30px;border:1px solid #007cff;background-color:#06538b;color:white;font-family:sans-serif;font-weight:bold;font-size:20px;text-align:center;padding-top:10px;margin-top:5px;margin-right:5px;float:left;cursor:pointer;"><audio src="http://grantelgin.com/dwa/p3/audio/G.mp3" id="Audio_G" loop="loop"></audio>G</div>';
var div5B = '<div id="B" class="string" style="width:30px;height:30px;border:1px solid #007cff;background-color:#06538b;color:white;font-family:sans-serif;font-weight:bold;font-size:20px;text-align:center;padding-top:10px;margin-top:5px;margin-right:5px;float:left;cursor:pointer;"><audio src="http://grantelgin.com/dwa/p3/audio/B.mp3" id="Audio_B" loop="loop"></audio>B</div>';
var div51 = '<div id="1" class="string" style="width:30px;height:30px;border:1px solid #007cff;background-color:#06538b;color:white;font-family:sans-serif;font-weight:bold;font-size:20px;text-align:center;padding-top:10px;margin-top:5px;margin-right:5px;float:left;cursor:pointer;"><audio src="http://grantelgin.com/dwa/p3/audio/1stStringE.mp3" id="Audio_1" loop="loop"></audio>e</div>';
var div6 = '<div style="clear:both;"></div><div style="color:black;font-family:sans-serif;font-size:15px;float:left;padding-top:20px;">Click a note above to hear the tone.<br>Click it again to stop.</div>';
var div7 = '<script type="text/javascript">$(".string").click (function () {thisString = $(this).attr("id");thisAudio = \'Audio_\' + thisString;thisStringElem = document.getElementById(thisAudio);if(isPlaying(thisStringElem)){document.getElementById(thisAudio).pause();document.getElementById(thisAudio).currentTime = 0;}else {document.getElementById(thisAudio).play();}});function isPlaying(thisStringElem){return !thisStringElem.paused;}</script>';
var div8 = '</div>';

containerDiv.innerHTML = div1 + div2 + div3 + div4 + div5E + div5A + div5D + div5G + div5B + div51 + div6 + div7 + div8;
document.body.appendChild(containerDiv);

}

}());
Expand Down
13 changes: 7 additions & 6 deletions p3/tune.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
<div id="DIV_tuner" style="width:250px; height: 160px; background-color: #dbecff; padding: 10px; position:fixed; top:10px; right:10px;">
<div style="color: black; font-family: sans-serif; font-weight:bold; font-size:16px; float:left;">Get in tune!</div><div style="color: black; font-family: sans-serif; font-weight:bold; font-size:22px; float:right;"><a href="javascript:$('#DIV_tuner').hide()">X</a></div><br><br>
<div style="color: black; font-family: sans-serif; font-weight:bold; font-size:16px; float:left;">Standard tuning</div><br>
<div id="E" class="string"><audio src="audio/E.mp3" id="Audio_E" loop="loop"></audio>E</div>
<div id="A" class="string"><audio src="audio/A.mp3" id="Audio_A" loop="loop"></audio>A</div>
<div id="D" class="string"><audio src="audio/D.mp3" id="Audio_D" loop="loop"></audio>D</div>
<div id="G" class="string"><audio src="audio/G.mp3" id="Audio_G" loop="loop"></audio>G</div>
<div id="B" class="string"><audio src="audio/B.mp3" id="Audio_B" loop="loop"></audio>B</div>
<div id="1" class="string"><audio src="audio/1stStringE.mp3" id="Audio_1" loop="loop"></audio>e</div>
<div id="E" class="string" style="width:30px; height:30px; border:1px solid #007cff; background-color: #06538b; color:white; font-family: sans-serif; font-weight:bold; font-size:20px; text-align: center; padding-top:10px; margin-top: 5px; margin-right:5px; float:left; cursor: pointer;"><audio src="audio/E.mp3" id="Audio_E" loop="loop"></audio>E</div>
<div id="A" class="string" style="width:30px; height:30px; border:1px solid #007cff; background-color: #06538b; color:white; font-family: sans-serif; font-weight:bold; font-size:20px; text-align: center; padding-top:10px; margin-top: 5px; margin-right:5px; float:left; cursor: pointer;"><audio src="audio/A.mp3" id="Audio_A" loop="loop"></audio>A</div>
<div id="D" class="string" style="width:30px; height:30px; border:1px solid #007cff; background-color: #06538b; color:white; font-family: sans-serif; font-weight:bold; font-size:20px; text-align: center; padding-top:10px; margin-top: 5px; margin-right:5px; float:left; cursor: pointer;"><audio src="audio/D.mp3" id="Audio_D" loop="loop"></audio>D</div>
<div id="G" class="string" style="width:30px; height:30px; border:1px solid #007cff; background-color: #06538b; color:white; font-family: sans-serif; font-weight:bold; font-size:20px; text-align: center; padding-top:10px; margin-top: 5px; margin-right:5px; float:left; cursor: pointer;"><audio src="audio/G.mp3" id="Audio_G" loop="loop"></audio>G</div>
<div id="B" class="string" style="width:30px; height:30px; border:1px solid #007cff; background-color: #06538b; color:white; font-family: sans-serif; font-weight:bold; font-size:20px; text-align: center; padding-top:10px; margin-top: 5px; margin-right:5px; float:left; cursor: pointer;"><audio src="audio/B.mp3" id="Audio_B" loop="loop"></audio>B</div>
<div id="1" class="string" style="width:30px; height:30px; border:1px solid #007cff; background-color: #06538b; color:white; font-family: sans-serif; font-weight:bold; font-size:20px; text-align: center; padding-top:10px; margin-top: 5px; margin-right:5px; float:left; cursor: pointer;"><audio src="audio/1stStringE.mp3" id="Audio_1" loop="loop"></audio>e</div>
<div style="clear:both;"></div>
<div style="color: black; font-family: sans-serif; font-size:15px; float:left; padding-top:20px;">Click a note above to hear the tone.<br>Click it again to stop.</div>

<script type="text/javascript">

$(".string").click (function () {
thisString = $(this).attr("id");
thisAudio = 'Audio_' + thisString;
Expand Down

0 comments on commit a343574

Please sign in to comment.