Question

Inspired by an article which I read yesterday, I am striving to add a Konami code-induced Easter egg to my portfolio website. It started out as a bit of fun but, as can be the case when IE gets involved, a seemingly quite simple task has become something of a misery!

Using the excellent jqPuzzle plugin, the idea is that upon the user entering the code the page content fades out and is replaced by a previously invisible interactive slider puzzle. The plugin which I’m using applies itself to an image on the page via a class value. Here’s where it starts to get tricky: (presumably) because it takes a moment for the plugin to load, and because the plugin only loads when the image is visible, I’ve put together the following jQuery to hide the image at first, fade it in imperceptibly to give the plugin a chance to load, and then fade the image out again:

<div id="eegg">
    <img src="images/photo_name.jpg" />
</div>

...

<script type="text/javascript">
    $( init );
    function init() {
        $('#eegg img').addClass( 'jqPuzzle jqp-r3-c4-NC' ); //Puzzle settings
        $('#eegg').hide().fadeTo( 'slow', 0.000001 ).fadeOut( 'slow' );
        $('#eegg img').addClass( 'positioned' ); //Centres puzzle in browser
    }

Alas, whilst this little workaround serves its purpose very nicely in Firefox and Chrome, IE 7 and 8 ignore the instructions to fade and simply drops the image in at full opacity, before removing it a moment later. Infuriating!

Can anyone offer me any guidance as to how to coax IE into fading the puzzle?

Alternatively, is there a better way to force the slider JS to load ‘invisibly’?

Answer 1

All you need to is add this option to shuffle it immediately:

shuffle: true