I am writing an ebook for the apple ibooks app. I am making it an interactive ebook through the use of javascript. I have the javascript working in a browser. And to some degree it works in the apple ibooks app. When I use the onclick event, the function is executed both in the browser and in ibooks. However, in ibooks, it also initiates a page turn event. The onclick event is not seen unless one goes back to the previous page. My javascript is as follows.
//<![CDATA[
function changekey(direction){
//all 12 major keys
var keyArray = ["C","Db","D","Eb","E","F","Gb","G","Ab","A","Bb","B"];
//12 notes of each major key including non major scale notes
var keyNotes = {C:"C,C#/Db,D,D#/Eb,E,F,F#/Gb,G,G#/Ab,A,A#/Bb,B,C",
Db:"Db,D,Eb,E,F,Gb,G,Ab,A,Bb,B,C,Db",
D:"D,D#/Db,E,F,F#,G,G#/Ab,A,A#/Bb,B,C,C#,D",
Eb:"Eb,F,F#/Gb,G,Ab,A,Bb,B,C,C#/Db,E,Eb",
E:"E,F,F#,G,G#,A,A#/Bb,B,C,C#,D,D#,E",
F:"F,F#/Gb,G,G#/Ab,A,Bb,B,C,C#/Db,D,D#/Eb,E,F",
Gb:"Gb,G,Ab,A,Bb,Cb,C,Db,D,Eb,E,F,Gb",
G:"G,G#/Ab,A,A#/Bb,B,C,C#/Db,D,D#/Eb,E,F,F#,G",
Ab:"Ab,A,Bb,B,C,Db,D,Eb,E,F,F#/Gb,G,Ab",
A:"A,A#/Bb,B,C,C#,D,D#/Eb,E,F,F#,G,G#,A",
Bb:"Bb,B,C,C#/Db,D,Eb,E,F,F#/Gb,G,G#/Ab,A,Bb",
B:"B,C,C#,D,D#,E,F,F#,G,G#,A,A#,B"
};
var currentKey = document.getElementById("MajorScale").innerHTML;
var newNotes = [];
var newKey;
var firstChar;
var secondChar = [];
var secondCharText = [];
if(direction == "down"){
if(keyArray.indexOf(currentKey)==0){
document.getElementById("MajorScale").innerHTML=keyArray[keyArray.length-1];
newKey=keyArray[keyArray.length-1];
} else{
document.getElementById("MajorScale").innerHTML=keyArray[keyArray.indexOf(currentKey)-1];
newKey=keyArray[keyArray.indexOf(currentKey)-1];
}
} else if( direction == "up") {
if(keyArray.indexOf(currentKey)==keyArray.length-1){
document.getElementById("MajorScale").innerHTML=keyArray[0];
newKey = keyArray[0];
} else {
document.getElementById("MajorScale").innerHTML=keyArray[keyArray.indexOf(currentKey)+1];
newKey = keyArray[keyArray.indexOf(currentKey)+1];
}
}
newNotes = (keyNotes[newKey]).split(",");
for (var nn=0;nn < newNotes.length;nn++){
while (document.getElementById("Note"+(nn+1)).firstChild) {
document.getElementById("Note"+(nn+1)).removeChild(document.getElementById("Note"+(nn+1)).firstChild);
}
firstChar = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
firstChar.setAttributeNS(null,"font-family","Utsaah");
firstChar.setAttributeNS(null,"font-size",25);
var firstCharText = document.createTextNode(newNotes[nn][0]);
firstChar.appendChild(firstCharText);
document.getElementById("Note"+(nn+1)).appendChild(firstChar);
for(i=1;i<newNotes[nn].length;i++){
secondChar[i] = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
if(i==1||i==4){
secondChar[i].setAttributeNS(null,"font-family","OpusText");
} else {
secondChar[i].setAttributeNS(null,"font-family","Utsaah");
}
secondChar[i].setAttributeNS(null,"font-size",25);
secondCharText[i] = document.createTextNode(newNotes[nn][i]);
secondChar[i].appendChild(secondCharText[i]);
document.getElementById("Note"+(nn+1)).appendChild(secondChar[i]);
}
}
}
//]]>
It modifies the following svg files.
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="660px"
height="105px" viewBox="0 0 660 105" enable-background="new 0 0 660 105" xml:space="preserve">
<g id="Layer_1">
<g id="TwelveTones">
<text id="Note1" style="text-anchor: middle" x="030" y="50"><tspan font-family="'Utsaah'" font-size="25">G</tspan></text>
<text id="Note2" style="text-anchor: middle" x="080" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">G</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/A</tspan><tspan x="39.835" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note3" style="text-anchor: middle" x="130" y="50"><tspan font-family="'Utsaah'" font-size="25">A</tspan></text>
<text id="Note4" style="text-anchor: middle" x="180" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">A</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/B</tspan><tspan x="37.845" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note5" style="text-anchor: middle" x="230" y="50"><tspan font-family="'Utsaah'" font-size="25">B</tspan></text>
<text id="Note6" style="text-anchor: middle" x="280" y="50"><tspan font-family="'Utsaah'" font-size="25">C</tspan></text>
<text id="Note7" style="text-anchor: middle" x="330" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">C</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/D</tspan><tspan x="39.822" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note8" style="text-anchor: middle" x="380" y="50"><tspan font-family="'Utsaah'" font-size="25">D</tspan></text>
<text id="Note9" style="text-anchor: middle" x="430" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">D</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/E</tspan><tspan x="38.833" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note10" style="text-anchor: middle" x="480" y="50"><tspan font-family="'Utsaah'" font-size="25">E</tspan></text>
<text id="Note11" style="text-anchor: middle" x="530" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">F</tspan></text>
<text id="Note12" style="text-anchor: middle" x="580" y="50"><tspan font-family="'Utsaah'" font-size="25">F</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan></text>
<text id="Note13" style="text-anchor: middle" x="630" y="50"><tspan font-family="'Utsaah'" font-size="25">G</tspan></text>
</g>
<g id="Aarows">
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M233.75,35.844
c11.329-23.826,31.709-24.192,40.741-3.947"/>
<g>
<path fill="#AA1800" d="M274.244,31.39c0.835-1.893,3.28-3.589,5.131-4.368c-1.787,2.844-3.036,6.124-3.125,9.541
c-2.317-2.484-5.541-3.906-8.74-4.94C269.576,31.006,272.198,30.553,274.244,31.39z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M583.75,35.844
c11.329-23.826,31.709-24.192,40.741-3.947"/>
<g>
<path fill="#AA1800" d="M624.244,31.39c0.835-1.893,3.28-3.589,5.131-4.368c-1.787,2.844-3.036,6.124-3.125,9.541
c-2.317-2.484-5.541-3.906-8.74-4.94C619.576,31.006,622.198,30.553,624.244,31.39z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M37.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M118.521,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C119.992,61.808,118.55,59.571,118.521,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M137.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M218.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C219.992,61.808,218.55,59.571,218.522,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M287.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M368.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C369.992,61.808,368.55,59.571,368.522,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M387.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M468.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C469.992,61.808,468.55,59.571,468.522,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M487.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M568.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C569.992,61.808,568.55,59.571,568.522,57.361z"/>
</g>
</g>
</g>
</g>
</g>
<g id="Steps">
<text transform="matrix(1 0 0 1 71.5527 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 171.5529 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 598.5363 90.5519)" font-family="'Utsaah'" font-size="25">H</text>
<text transform="matrix(1 0 0 1 248.5363 90.5519)" font-family="'Utsaah'" font-size="25">H</text>
<text transform="matrix(1 0 0 1 321.5525 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 421.5523 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 521.5523 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
</g>
</svg></p><p>
<svg onclick='changekey("down");' version="1.1" id="downkey" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30" height="30" viewBox="0 0 20.641 22.713" enable-background="new 0 0 20.641 22.713" xml:space="preserve">
<polygon fill="#44612B" points="18.27,1.532 1,11.505 18.27,21.478" />
</svg> <span id="MajorScale" display="inline-block" width="150">G</span> Major Scale
<svg version="1.1" onclick='changekey("up");' id="upkey" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30" height="30" viewBox="0 0 20.641 22.713" enable-background="new 0 0 20.641 22.713" xml:space="preserve">
<polygon fill="#324DCE" points="1.913,21.478 19.183,11.505 1.913,1.532" />
</svg></p>
</div>
I have tried changing the onclick='changekey("down");' to an ontouchstart and ontouchend event, but those were not recognized within the ibooks app.
The working browser code can be seen here http://jsfiddle.net/slayerofgiants/9772W/1/ And a sample ebook for ibooks can be seen here. The interactive portion is on page 3 and it changes the pages to page 4 or page 2 depending upon which button is tapped. https://www.dropbox.com/s/4x1uex3cbw56c7k/Example.epub
I'm trying to find what is triggering the page turn event and how to disable it for that function.
Thanks, --christopher
The problem is that your onclick event is also getting passed up to the iBooks application, so it triggers both your code, as well as the default code that handles onclick. If you add return false; to the end of your Javascript function, it should fix it.
This thread explains it a bit more.