jQuery

jQuery Cycle for the best customizable slideshows.

Wed May 04 2011

I've been having to build a lot of various slideshows for my job recently and instead of using the Drupal Carousel or Slideshow modules with my View, I just display the view as an unordered list and then create my own slideshow with jQuery Cycle.

Force Browser to Reload .swf's with jQuery

Mon Sep 28 2009

Recently, I ran into an issue with one of the flash apps I built. Since, I'm making changes almostdaily, there is always a new version of the swf, and right now there are users actively using this app and they weren't receiving the newest version unless their cache was cleared. The only option is to force the browser to reload the new .swf and so I searched on Google and this seemed to be those most frequent answer, but certainly not the best.

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

And yes it does work great but only if the user doesn't already have the .swf in their cache and it doesn't always work with Internet Explorer.

A co-worker suggested I try to make a javascript snippet that would append x number of random digits after a "?" to the default.swf file in order to trick the browser into thinking it was a new version of the file.

I decided to use the tools available with the jQuery API along with a simple "for" loop that will append a random 24 digit number to the end of the embed's src like this default.swf?8936273541227119153514771. This was relatively simple to set up. I simply use the .attr("src") function from the jQuery API to pull the source from the element of the #css_id being called. Then a for loop generates 24 random digits and creates a string of them and concanets them to the src of the element using the .attr("src", string) function again, but this time there is a 2nd parameter, and it is a string that will replace the current src of that element.

Here is the Javascript:

  1.  <script type="text/javascript">
  2. $(document).ready(function(){
  3.  var temp = $("#css_id").attr('src');
  4.  var rando='';
  5.  for(i=0; i<=24;i++){
  6.   rando = rando +((Math.floor(Math.random()*10))+1);
  7.  }
  8.  $("#css_id").attr('src', temp + '?' + rando);
  9. });
  10. </script>

The #css_id is the id for the embed tag in which you are loading the swf file.

<embed id="css_id" src="sites/default/files/default.swf"></embed>

That should about cover it! Please note though that this is more of a "hack" then an elegant solution. Each time your user visits your site, they will be downloading a new .swf file even if there is no update. If your site has a lot of loyal traffic and users come to your site several times a week or day, they will be downloading a new .swf each time and that can begin to fil up their temporary internet files pretty quickly. This is a good solution is you are updating the .swf frequently and it is of relatively small size.

Now if you add the meta tag I showed above to your &lt;head&gt;, this should keep the browser from storing each .swf in the cache and thus should resolve this issue of storing too many different .swf's for the same file.

If you know of a better way to do this, I would like to hear it! :D

Syndicate content