I create a gallery for a month or so, the layout is simple, there is a thumbnail menu on the left and a gallery preview on the right. when you click on the sketch that loaded it, the mousdown event is fired, which destroys the thumbnail area and extends the gallery preview to full size (all using CSS3 transforms). so far, everything is working fine, except that I created an omouseover event, which activates the function when you hover over a thumbnail. the function redraws the contents of the preview gallery div ("pics") and creates three images, two are the previous image in the frame, the other is the next image in the frame (in the center). in innerHTML, it sets the CSS style to "left:" both 724px and -724px depending on whether it goes forward or backward. then when the function that generates all this html is finished, the function responsible for controlling the switch sets "style.left =" to "0px". it all works on safari and chrome. but for some reason firefox refuses to animate the transition! I investigated this glitch for several days and did not come up with anything, in another version I can transfer the fire to the wrong time. but all that happens in firefox is a transitional change from 724px to 0 px. here are my code snippets.
he switches the thumbnail and activates a function that translates images
document.getElementById(thumbid).onmouseover = function() { num = parseInt(this.name); this.src = image[1][num].src; this.style.cursor = "pointer"; switcher(num, null); }
this is a function that determines how to switch the image, it sets a timer (visible in the variable below) that accepts inputs without changing the image until the image completes the transition:
function switcher (num, direction) { if (direction == 'left') { num--; } else if (direction == 'right') { num++; } if (num < 0) { num = fullcount-1; } else if (num == fullcount) { num = 0; } if (intransit == false) { drawgallery(num); document.getElementById("photos").style.left = "0px"; intransit = true; transittimer = setTimeout("intransit = false; if (transitnumber != null) { switcher(transitnumber, null); transitnumber = null; }", 450); } else { transitnumber = num; } } var transittimer = null; var intransit = false; var transitnumber = null;
here the actual element that draws the gallery, the start variable becomes the left variable. then the afterdrawgallery function completes itself, the switch sets the div "left" to 0px, which in every browser, but firefox, translates the conversion:
function drawgallery(num) { start = 724; if (num > curpos) { } else { start = "-"+start; } table = "<div id=\"photos\" style=\"position:absolute; height:470px; top:0px; left:"+start+"px;\">"; //first square drawn at an X of 0 so that the image remains the same but the drawer can slide over. table += "<div id=\"i"+orderarr[2][curpos]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:-724px; width:724px; height:470px;\">"; if (curpos <= (totalloaded-1)) { table += "<img id=\"i"+curpos+"\" src=\"image.php?field=pics&id="+orderarr[2][curpos]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />"; } else { table += "<div id=\"iloader"+orderarr[2][curpos]+"\" class=\"loader\" style=\"top:205px;\" ></div>"; } table += "</div>"; table += "<div id=\"i"+orderarr[2][curpos]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:724px; width:724px; height:470px;\">"; if (curpos <= (totalloaded-1)) { table += "<img id=\"i"+curpos+"\" src=\"image.php?field=pics&id="+orderarr[2][curpos]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />"; } else { table += "<div id=\"iloader"+orderarr[2][curpos]+"\" class=\"loader\" style=\"top:205px;\" ></div>"; } table += "</div>"; ///////////////////////////// //second square drawn at an X of either negative or positive 724 so that the image remains the same but the drawer can slide over. table += "<div id=\"i"+orderarr[2][num]+"\" style=\"overflow:hidden; position:absolute; top:0px; left:0px; width:724px; height:470px;\">"; if (curpos <= (totalloaded-1)) { table += "<img id=\"i"+num+"\" src=\"image.php?field=pics&id="+orderarr[2][num]+"\" style=\"border:none; position:relative; top:0px; left:0px;\" />"; } else { table += "<div id=\"iloader"+orderarr[2][num]+"\" class=\"loader\" style=\"top:205px;\" ></div>"; } table += "</div>"; table += "</div>"; document.getElementById("pics").innerHTML = table; curpos = num; }