So I have made some flash cards and they work great in all browsers except I am having trouble getting them to work in IE9. I am trying to use ms-transform and I am not sure how much support there is for it in IE9. I think I have the code set up right but I am not 100% sure I have never used msTransform before. I am using an xml file thats loading the images on one side and then the card is suppose to flip the the backside with a text answer. The problem is in IE9 when I try to flip the card for the answer nothing happens.
Here is a live link to check it out: http://cite.nwmissouri.edu/projects/flashcards/FlashCards1234/flashcards.html
Here is my Javascript file:
var y;
var y2;
var ny=0;
var ny2=180;
var rotYINT;
var rotYINTback;
var random=false;
var ansFirst=false;
var numbersCalled=new Array();
numbersCalled[0]=0;
var origCardNum=0;
var cardNum=0;
var maxCardNum;
var lastNum;
// next three functions flip the cards in Google Chrome, Safari, and Firefox. August 2012
function rotateYDIV(card, backOfCard)
{
y=document.getElementById(card);
y2=document.getElementById(backOfCard)
clearInterval(rotYINT);
rotYINT=setInterval("startYRotate()",10);
clearInterval(rotYINTback);
rotYINTback=setInterval("startYRotateBack()",10);
}
function startYRotate()
{
ny=ny+1
y.style.transform="rotateY(" + ny + "deg)"
y.style.msTransform="rotateY(" + ny + "deg)"
y.style.webkitTransform="rotateY(" + ny + "deg)"
y.style.OTransform="rotateY(" + ny + "deg)"
y.style.MozTransform="rotateY(" + ny + "deg)"
if (ny==180 || ny>=360)
{
clearInterval(rotYINT)
if (ny>=360)
{
ny=0
}
}
}
function startYRotateBack()
{
ny2=ny2+1
y2.style.transform="rotateY(" + ny2 + "deg)"
y2.style.msTransform="rotateY(" + ny2 + "deg)"
y2.style.webkitTransform="rotateY(" + ny2 + "deg)"
y2.style.OTransform="rotateY(" + ny2 + "deg)"
y2.style.MozTransform="rotateY(" + ny2 + "deg)"
if (ny2==360 || ny2>=540)
{
clearInterval(rotYINTback)
if (ny2>=540)
{
ny2=180
}
}
}
//nextCard and prevCard select the next question to be displayed from the xml sheet
//and display it on the card.
function nextCard()
{
if(random==false)
{
if(cardNum < maxCardNum)
{
cardNum+=1;
}
else
{
cardNum=origCardNum;
}
}
else
{
cardNum=randomize();
}
if(ansFirst)
{
aFirstCardFlip();
}
else
{
cardFlip();
}
questionSwap();
}
function prevCard()
{
if(random==false)
{
if(cardNum > origCardNum)
{
cardNum-=1;
}
else
{
cardNum=maxCardNum;
}
}
else
{
cardNum=randomize();
}
if(ansFirst)
{
aFirstCardFlip();
}
else
{
cardFlip();
}
questionSwap();
}
//cardFlip flips the cards back to the front of the card so that the next question
//will not start on the answer
function cardFlip()
{
ny=0;
ny2=180;
document.getElementById("card1").style.transform="rotateY(" + ny + "deg)"
document.getElementById("card1").style.msTransform="rotateY(" + ny + "deg)"
document.getElementById("card1").style.webkitTransform="rotateY(" + ny + "deg)"
document.getElementById("card1").style.OTransform="rotateY(" + ny + "deg)"
document.getElementById("card1").style.MozTransform="rotateY(" + ny + "deg)"
document.getElementById("backOfcard1").style.transform="rotateY(" + ny2 + "deg)"
document.getElementById("backOfcard1").style.msTransform="rotateY(" + ny2 + "deg)"
document.getElementById("backOfcard1").style.webkitTransform="rotateY(" + ny2 + "deg)"
document.getElementById("backOfcard1").style.OTransform="rotateY(" + ny2 + "deg)"
document.getElementById("backOfcard1").style.MozTransform="rotateY(" + ny2 + "deg)"
}
function aFirstCardFlip()
{
ny=180;
ny2=360;
document.getElementById("card1").style.transform="rotateY(" + ny + "deg)"
document.getElementById("card1").style.msTransform="rotateY(" + ny + "deg)"
document.getElementById("card1").style.webkitTransform="rotateY(" + ny + "deg)"
document.getElementById("card1").style.OTransform="rotateY(" + ny + "deg)"
document.getElementById("card1").style.MozTransform="rotateY(" + ny + "deg)"
document.getElementById("backOfcard1").style.transform="rotateY(" + ny2 + "deg)"
document.getElementById("backOfcard1").style.msTransform="rotateY(" + ny2 + "deg)"
document.getElementById("backOfcard1").style.webkitTransform="rotateY(" + ny2 + "deg)"
document.getElementById("backOfcard1").style.OTransform="rotateY(" + ny2 + "deg)"
document.getElementById("backOfcard1").style.MozTransform="rotateY(" + ny2 + "deg)"
}
function getText(element) {
if (typeof element.textContent !== 'undefined') {
return element.textContent;
}
else if (typeof element.innerText !== 'undefined') {
return element.innerText;
}
else if (typeof element.text !== 'undefined') {
return element.text;
}
}
//questionSwap reads the xml document and swaps the questions
function questionSwap()
{
document.getElementById("question").innerHTML=xmlDoc.getElementsByTagName('qText')[cardNum].childNodes[0].nodeValue;
document.getElementById("answer").innerHTML=xmlDoc.getElementsByTagName('aText')[cardNum].childNodes[0].nodeValue;
if(xmlDoc.getElementsByTagName('imageSrc')[cardNum].childNodes[0].nodeValue != "none")
{
document.getElementById("img").src=xmlDoc.getElementsByTagName('imageSrc')[cardNum].childNodes[0].nodeValue;
document.getElementById("img").width=xmlDoc.getElementsByTagName('imageWidth')[cardNum].childNodes[0].nodeValue;
document.getElementById("img").height=xmlDoc.getElementsByTagName('imageHeight')[cardNum].childNodes[0].nodeValue;
document.getElementById("img").alt=xmlDoc.getElementsByTagName('imageAlt')[cardNum].childNodes[0].nodeValue;
document.getElementById("img").style.display="block";
}
else if (xmlDoc.getElementsByTagName('imageSrc')[cardNum].childNodes[0].nodeValue == "none")
{
document.getElementById("img").style.display="none";
}
if(xmlDoc.getElementsByTagName('audioMp3')[cardNum].childNodes[0].nodeValue != "none")
{
var mp3=xmlDoc.getElementsByTagName('audioMp3')[cardNum].childNodes[0].nodeValue;
var ogg=xmlDoc.getElementsByTagName('audioOgg')[cardNum].childNodes[0].nodeValue;
var audioContents='<audio id="audio" controls="controls">';
audioContents+='<source src="'+mp3+'" type="audio/mp3"/>';
audioContents+='<source src="'+ogg+'" type="audio/ogg"/>';
audioContents+='This browser may not support the audio tag.</audio>';
document.getElementById("audioContainer").innerHTML=audioContents;
}
else if (xmlDoc.getElementsByTagName('audioMp3')[cardNum].childNodes[0].nodeValue == "none")
{
document.getElementById("audioContainer").innerHTML="";
}
}
//randomize gives the user a random non-repeating card until all cards have been viewed
function randomize()
{
if(numbersCalled.length==maxCardNum+1)
{
numbersCalled=new Array();
numbersCalled[0]=lastNum;
}
var num = Math.floor((Math.random()*(maxCardNum+1)));
for(var i=0; i<numbersCalled.length;i++)
{
if(num==numbersCalled[i])
{
num = Math.floor((Math.random()*(maxCardNum+1)));
i=-1;
}
}
lastNum=num
numbersCalled[numbersCalled.length]=num;
return num;
}
function clickRandom()
{
if(random)
{
random=false;
document.cards.random.value="Randomize";
}
else
{
random=true;
document.cards.random.value="Sequential";
}
}
function clickAFirst()
{
if(ansFirst)
{
ansFirst=false;
cardFlip();
document.cards.Afirst.value="Answer First";
}
else
{
ansFirst=true;
aFirstCardFlip();
document.cards.Afirst.value="Question First";
}
}
//==============================================================
function get_firstChild(n)
{
y=n.firstChild;
while (y.nodeType!=1)
{
y=y.nextSibling;
}
return y;
}
And here is what my css file looks like:
@charset "utf-8";
/* CSS Document */
body {
background:#d7d7da;
}
.page {
position:relative;
margin:auto;
width:480px;
}
.randomize {
position:absolute;
top:605px;
left:90px;
}
.Afirst
{
position:absolute;
top:605px;
right:90px;
}
.card {
position:absolute;
top:0px;
left:80px;
width:320px;
max-width:320px;
height:600px;
max-height:600px;
border:1px solid black;
border-radius:10px;
background:white;
display:table;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
z-index:1;
}
.cardContent {
display:table-cell;
vertical-align:middle;
padding:5px;
max-width:502px;
max-height:310px;
}
.cardText {
font-size:22px;
}
.clickForAnswer {
position: absolute;
bottom:5px;
right:5px;
}
.backOfcard {
position:absolute;
top:0px;
left:80px;
width:320px;
max-width:320px;
height:600px;
max-height:600px;
border:1px solid black;
border-radius:10px;
background:white;
display:table;
transform:rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
z-index:0;
}
.backOfcardContent {
display:table-cell;
vertical-align:middle;
padding:5px;
text-align:center;
max-width:502px;
max-height:310px;
}
.answer {
font-size:26px;
}
#audio {
max-width:310px;
}
.next {
position:absolute;
top:231px;
right:0px;
margin-left:30px;
float: right;
}
.previous {
position:absolute;
top:231px;
left:0px;
margin-right:30px;
float:left;
}
#img {
display:block;
max-width:310px;
max-height:590px;
margin-left:auto;
margin-right:auto;
}
