Flash Detection in Allwebco Templates

Support for displaying alternate content in Flash animation

Files that may include detection code
Detection may, or may not, be included in the "header.js" for the Flash logo. Flash detection is included in the following files:

• header.js — see section below
• imagechanger.js
• homeflash-S.js
• slider.js
• homeflash.js — in the "text-slideshow" folder
• changer-XML.js — in the "flash" or "XML-Changer" folder
• intro-XML.js
• flash-pan.js — in the "flash-pan" folder
• AdShow.js — in the "AdShow" folder
• javascripts.js — detection source file

Checking if detection is included
Any template that includes Flash alternate content detection will have a note indicating this near the top of the template "help.html" in the "EDIT FLASH ANIMATION" or "EDIT LOGO" step.


What is detected
Some older templates may detect for specific browsers. The latest detection includes the "Adobe Flash detection kit 1.6". The main part of the script will be included either in your template "javascripts.js" or in a "FlashDetect.js" if your template has one. This script checks to see if a browser has Flash software installed. If it does not, it will show alternate content. The alternate content can be set in each .js file (listed above).


Detection in the header.js
The default alternate content in the "header.js" is the text "Welcome". You can edit this text, and test it, by editing the "header.js". There is also an option to display either a text or a graphic as the alternate content. Click visual below to view.



Note: The font style of the "text"option is defined in the CSS class "NoFlashTitle" in your ".css" file. You can change the color, style, or size of the text.


How to setup the static image for mobile devices
See the "INCLUDED DETECT" notes on your template "help.html". It will indicate what image is being displayed as the mobile static image. No other steps are required to setup for mobile devices.


Changing the mobile display image
You can optionally change the static .jpg image that will display on mobile devices like iPad and iPod by editing this in the template .js Javascript file (see .js file list above on this page). You can search in the template .js file for ".jpg" to locate the static display image.


Checking the mobile detection
Testing: All .js files that include detection also include a testing yes/no variable. Edit the "var showflash" to a "no" and open one of the HTML pages to check as if you were viewing the page in a non-Flash enabled browser. Edit the "var showflash" back to "yes" when you are done testing. See "visual" above.

Field Testing: Once your website is setup, the best way to check the image or alternate content that is displayed for mobile devices is using an Apple iPhone, iPod or iPad. Open your website using one of these mobile devices to view your website with Flash detection and the alternate non-Flash content.







Flash detect kit download from Adobe
Download the Adobe built Flash detection kit at the following link:

• Detecting Flash Player versions with SWFObject 2

Flash detect code example (add to .js file)
Note: The following is not official Adobe Flash detection code. It's a basic Javascript. Newer templates use the Adobe detect kit mentioned above. The following is an example of the code that may be included in your template. Note that the code below includes a separate section for Apple devices.

This is example code only and may not be the exact script included in your template model. It is a tested and working example and can be copied and added to a Javascript .js file.

Detects specifically for Apple devices and then the browser user agent. If adding into a .js file remove the top <script> open and bottom <script> close tags.

<script type="text/javascript">

var width = "850"
var height = "300"

if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1))
{
document.write('<img src="picts/noflash.jpg" width="'+width+'" height="'+height+'" border="0"><br>');
}
else {
if
((navigator.userAgent.indexOf('MSIE') != -1) ||
(navigator.userAgent.indexOf('Firefox') != -1) ||
(navigator.userAgent.indexOf('Chrome') != -1) ||
(navigator.userAgent.indexOf('Safari') != -1) ||
(navigator.userAgent.indexOf('Netscape') != -1) ||
(navigator.userAgent.indexOf('Opera') != -1))
{
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+width+'" height="'+height+'" id="flashfile">');
document.write('<param name="movie" value="flashfile.swf">');
document.write('<param name="wmode" value="transparent">');
document.write('<param name="quality" value="high">');
document.write('<param name="bgcolor" value="#FFFFFF">');
document.write('<embed src="flashfile.swf" quality="high" wmode="transparent" bgcolor="#FFFFFF" width="'+width+'" height="'+height+'" name="flashfile" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><br>');
}
else {
document.write('<img src="picts/noflash.jpg" width="'+width+'" height="'+height+'" border="0"><br>');
}
}

</script>




Related Topics:
How the Flash detection works
Editing Javascript .js files
Adding a mobile version website


iPad Tablet Website Templates:
iPad Business
Tablet & Pad Websites
Tablet, iPad Light Designs