SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Banana Man's Avatar
    Join Date
    Dec 2005
    Posts
    391
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    HTML5 Flash Fallback

    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?

    Code HTML4Strict:
    <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>

    Code JavaScript:
    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. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict Banana Man's Avatar
    Join Date
    Dec 2005
    Posts
    391
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You right about the overkill, i have now implemented a javascript image rollover which is working great. Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •