Reputation: 187
Background: Trying to make a GIF Pause Button, cross-browser
Initial Implementation (works in Chrome/Safari): drawing gif to canvas and showing the canvas correctly 'pauses' the gif. but in FF and IE, it doesnt work (FF - it shows first frame only, IE - even with excanvas shows the gif still animated not the frame)
What does pause GIF in FF and IE? Pressing the ESC button with window selected pauses GIF images on the current displayed page in FF and IE
So what am I trying to do? So for FF and IE, I tried to implement something that triggers an ESC keypress...and I did...and it successfully triggers an ESC keypress...but it does not pause GIF.
all i am trying to do is simulate an escape keypress in Firefox and IE.
What I tried
// defined before the script that calls it
jQuery.fn.simulateKeyPress = function(keyCode) {
// Internally calls jQuery.event.trigger
// with arguments (Event, data, elem). That last arguments is very important!
jQuery(this).trigger({ type: 'keypress', which: keyCode, keyCode: keyCode });
};
// Simulate the key press, in something called onclick of a button element
$(document).simulateKeyPress(27);
dont advise me on this code above, because i copied the relevant snippets and im 10000000% sure it works, since i bound an alert to esc being pressed and it came up when clicking the button that triggered the simulateKeyPress()call. only posting it to show that i tried.
So basically, simulating ESC does not do what pressing ESC does in FF and IE, with respect to pausing GIFs - namely, pressing ESC pauses gifs in ff and ie, and triggering a keypress (tried keydown as well) event for 27 (which is ESC) does not do this. Why? any workaround at all???
Upvotes: 4
Views: 1342
Reputation: 1120
Convert the frames of the gif into sprite images and set them to the background images cycle through them by changing the div's background position with javascript. It would then be a simple matter to interrupt the interval timer on any event you choose.
Upvotes: 1