Detect flash support on client browser to avoid the blank box on flash header websites.

Nowadays it is a common practice for web designers to have fancy flash headers and the rest plain text websites. In this way the visitor views a good looking site while the search engines are happy with the source of text.

But what if your visitor does not have flash support. The browser gives a thin bar at the top and in place of the fancy header, a blank box appears. I mean you can understand were I am going with this. Like no flash………. fancy looks ugly and the user might just closeeeeeee the window.

If you agree with me then lets move on….

To solve this issue I did the following:

• Step 1: Use a JavaScript function to detect if flash is installed on the visitor’s browser
• Step 2: If yes than normally play the flash header
• Step 3: else show an image maybe a screenshot of the flash header

Copy the code below on a new file and save it “flash_detect.js”

/** * Copyright (c) 2007, Carl S. Yestrau * All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * * Neither the name of Feature Blend nor the * names of its contributors may be used to endorse or promote products * derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY Carl S. Yestrau ”AS IS” AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE * DISCLAIMED. IN NO EVENT SHALL Carl S. Yestrau BE LIABLE FOR ANY * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * */ function FlashDetectBase(options){ var self = this; var _release = “1.0″; var options = options || {}; self.installed = false; self.major = -1; self.minor = -1; self.revision = -1; self.revisionStr = “”; self.activeXVersion = “”; var activeXDetectRules = options.activeXDetectRules || [ { "name":"ShockwaveFlash.ShockwaveFlash.7", "version":function(obj){return getActiveXVersion(obj);} }, { "name":"ShockwaveFlash.ShockwaveFlash.6", "version":function(obj){ // var version = "6,-1,-1,-1"; var version = "6,0,21"; try{ obj.AllowScriptAccess = "always"; version = getActiveXVersion(obj); }catch(err){} return version; } }, { "name":"ShockwaveFlash.ShockwaveFlash", "version":function(obj){return getActiveXVersion(obj);} } ]; var getActiveXVersion = function(activeXObj){ var version = -1; try{ version = activeXObj.GetVariable(”$version”); }catch(err){} return version; } var getActiveXObject = function(name){ var obj = -1; try{ obj = new ActiveXObject(name); }catch(err){} return obj; } var parseActiveXVersion = function(str){ var versionArray = str.split(”,”); return { “major”:parseInt(versionArray[0].split(” “)[1]), “minor”:parseInt(versionArray[1]), “revision”:parseInt(versionArray[2]), “revisionStr”:versionArray[2] }; } var parseRevisionStrToInt = function(str){ return parseInt(str.replace(/[a-zA-Z]/g,”")) || self.revision; } self.majorAtLeast = function(version){ return self.major >= version; } self.DetectBase = function(){ if(navigator.plugins && navigator.plugins.length>0){ var type = ‘application/x-shockwave-flash’; var mimeTypes = navigator.mimeTypes; if(mimeTypes && mimeTypes[type] && mimeTypes[type].enabledPlugin && mimeTypes[type].enabledPlugin.description){ var desc = mimeTypes[type].enabledPlugin.description; var descParts = desc.split(’ ‘); var majorMinor = descParts[2].split(’.'); self.major = parseInt(majorMinor[0]); self.minor = parseInt(majorMinor[1]); self.revisionStr = descParts[3]; self.revision = parseRevisionStrToInt(self.revisionStr); self.installed = true; } }else if(navigator.appVersion.indexOf(”Mac”)==-1 && window.execScript){ var version = -1; for(var i=0; i<activeXDetectRules.length && version==-1; i++){ var obj = getActiveXObject(activeXDetectRules[i].name); if(typeof obj == “object”){ self.installed = true; version = activeXDetectRules[i].version(obj); if(version!=-1){ var versionObj = parseActiveXVersion(version); self.major = versionObj.major; self.minor = versionObj.minor; self.revision = versionObj.revision; self.revisionStr = versionObj.revisionStr; self.activeXVersion = version; } } } } }(); } var FlashDetect = new FlashDetectBase();

Insert the code below in the <body> tag

<div align=”center”><script language=”JavaScript” src=”flash_detect.js” type=”text/javascript”></script> <script type=”text/javascript”> if(!FlashDetect.installed){ document.write( “<a href=\”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash\” target=_blank>\n”); document.write( “<font>Click Here and Install Adobe Flash Player to View Our Site Completely!</font></a>\n”); document.write(”<img src=header.jpg>”); }else{ document.write( “<object classid=\”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\”\n” ); document.write( ” codebase=\”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0\”\n” ); document.write( ” id=\”Movie1\” width=\”760\” height=\”120\”>\n” ); document.write( ” <param name=\”movie\” value=\”header.swf\”>\n” ); document.write( ” <param name=\”menu\” value=\”false\”>\n” ); document.write( ” <param name=\”quality\” value=\”best\”>\n” ); document.write( ” <param name=\”wmode\” value=\”transparent\”>\n” ); document.write( ” <param name=\”bgcolor\” value=\”#CCCCCC\”>\n” ); document.write( ” <Ibed name=\”Movie1\” src=\”header.swf\”\n” ); document.write( ” menu=\”false\” quality=\”best\” wmode=\”transparent\” bgcolor=\”#CCCCCC\” swLiveConnect=\”true\”\n” ); document.write( ” width=\”760\” height=\”120\”\n” ); document.write( ” type=\”application/x-shockwave-flash\”\n” ); document.write( ” pluginspage=\”http://www.macromedia.com/go/getflashplayer\”></Ibed>\n” ); document.write( “</object>\n” ); } </script> </div>

Place the flash header and image in the same folder.

Flash header=header.swf
Image=header.jpg

Done there…………… believe me this is good advice use it!