HTML5 Flash Fallback

JavaScript
1

Hi,

I am trying to implement a HTML5 flash fallback option with some javascript i am using but not having much success. I dont know javascript and have just pulled the code from somewhere so am lost at this point. Does anyone know how to implement this?

<div class="klas_movie">
      <div class="klas_1 klas_sprite">
        <div class="klas_2 klas_fs">
          <!-- Start of symbol: image_01 -->
          <img src="http://www.mysite.com/img/homepage_flash_v2_03.cs5_assets/FLM_Image_1.jpg" height="282px" width="950px" class="klas_3" alt="KLAS Header Image 1"></img>
          <!-- End of symbol: image_01 -->
        </div>
      </div>
      <div class="klas_1 klas_sprite">
        <div class="klas_4 klas_fs"></div>
        <div class="klas_5 klas_fs">
          <!-- Start of symbol: image_02 -->
          <img src="http://www.mysite.com/img/homepage_flash_v2_03.cs5_assets/FLM_Image_2.jpg" height="282px" width="950px" class="klas_3" alt="KLAS Header Image 2"></img>
          <!-- End of symbol: image_02 -->
        </div>
      </div>
      <div class="klas_1 klas_sprite">
        <div class="klas_6 klas_fs"></div>
        <div class="klas_5 klas_fs">
          <!-- Start of symbol: image_03 -->
          <img src="http://www.mysite.com/img/homepage_flash_v2_03.cs5_assets/FLM_Image_3.jpg" height="282px" width="950px" class="klas_3" alt="KLAS Header Image 3"></img>
          <!-- End of symbol: image_03 -->
        </div>
      </div>
      <div class="klas_1 klas_sprite">
        <div class="klas_7 klas_fs"></div>
        <div class="klas_5 klas_fs">
          <!-- Start of symbol: image_04 -->
          <img src="http://www.mysite.com/img/homepage_flash_v2_03.cs5_assets/FLM_Image_4.jpg" height="282px" width="950px" class="klas_3" alt="KLAS Header Image 4"></img>
          <!-- End of symbol: image_04 -->
        </div>
      </div>
      <div class="klas_1 klas_sprite">
        <div class="klas_8 klas_fs"></div>
        <div class="klas_9">
          <!-- Start of symbol: image_05 -->
          <img src="http://www.mysite.com/img/homepage_flash_v2_03.cs5_assets/FLM_Image_5.jpg" height="282px" width="950px" class="klas_3" alt="KLAS Header Image 5"></img>
          <!-- End of symbol: image_05 -->
        </div>
      </div>
    </div>
    </a>

function klas_calc_timeout(c) {
    var timeout = (new Date).getTime();
    while (c) {
        timeout += parseFloat(getComputedStyle(c)['-webkit-animation-duration']) * 1000;
        c.timeout = Math.round(timeout);
        c = c.nextElementSibling;
    }
}
var klas_hide_children = function(self) {
    var c = self.firstElementChild;
    while (c) {
        c.style.display = 'none';
        c = c.nextElementSibling;
    }
}
var klas_activate_sibling = function(evt, self) {
    if (evt.srcElement != self)
        return;
    if (self.style.display == 'none')
        return;
    if (!self.timeout)
        klas_calc_timeout(self);
	self.style.display = 'none';
    var sibling = self.nextElementSibling;
    if (!sibling)
        return;
    while ((sibling.timeout < evt.timeStamp)&&sibling.nextElementSibling)
        sibling = sibling.nextElementSibling;
//    $('.klas_fs', sibling).css('display', 'none');
//    var n = new Number((sibling.timeout - (new Date).getTime()) / 1000);
//    sibling.style.webkitAnimationDuration = n.toString() + 's';
    sibling.style.display = 'block';
};
var klas_activate_children = function(evt, self) {
    if (evt.srcElement != self)
        return;
    klas_hide_children(self);
    var c = self.firstElementChild;
	if(!c)
		return;
//    $('.klas_fs', c).css('display', 'none');
    klas_calc_timeout(c);
    c.style.display = 'block';
	c.style.webkitAnimationDelay = '';
}
var klas_loop_children = function(evt, self) {
    if (evt.srcElement != self)
        return;
    klas_activate_children(evt, self);
    var c = self.firstElementChild;
    if (!c)
        return;
    c.style.webkitAnimationDelay = '0s';
}
$(document).ready(function() {
    $('.klas_sprite').each(function()
		{ this.addEventListener('webkitAnimationIteration', function(evt) { klas_loop_children(evt, this); return false; }, false, false) });
    $('.klas_sprite, .klas_graphic').each(function()
		{ this.addEventListener('webkitAnimationStart', function(evt) { klas_activate_children(evt, this); return false; }, false, false) });
    $('.klas_fs').each(function()
		{ this.addEventListener('webkitAnimationEnd', function(evt) { klas_activate_sibling(evt, this); return false; }, false, false) });
});

Thanks

2

Not sure what for flash that’s even supposed to replace, but it looks like WAY too much code to do it in; particularly those endless pointless DIV in the markup… Is this just a simple image rotator?

… also, I don’t see anything in particular that makes that HTML 5… instead it looks like it’s a webkit ONLY animation, which is kind-of pointless.

Do you have an example of the flash you’re trying to replace? From the looks of this, does it even need to waste bandwidth on flash in the first place? If this is indeed just a simple image rotator, it’s not anything you couldn’t do in .js and have it work all the way back to IE 5.5.

3

You right about the overkill, i have now implemented a javascript image rollover which is working great. Thanks!