Website Template Mobile Detection

Flash Mobile Cellphone and iPad, iPod Detection


Starting in August 2010 Flash detection for cellphones, mobile devices, Apple iPhone, and tablets like iPad, will be added to image changers, image sliders and other Flash animations included in Allwebco templates. View Detection Details.

Mobi-Hybrid Mobile Web Templates


Files that include the 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:

imagechanger.js
homeflash.js - may be in the "text-slideshow" folder
homeflash-S.js
changer-XML.js - may be in the "flash" or "XML-Changer" folder
intro-XML.js
flash-pan.js - in the "flash-pan" folder
slider.js
AdShow.js - in the "AdShow" folder
header.js - see section below

javascripts.js - this is the source detection file

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

What is detected:
Some older templates may detect for specific browsers. The latest detection includes the "Adobe Flash detdection 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 is defined in each template .js file as 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 text or a graphic as the alternate content. Click view visual to view.

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 your HTML page to check as if this was a non-Flash 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.



Apple iPod tablet viewed with Flash detection




Flash detect kit download from Adobe:
Download the Adobe built Flash detection kit at: http://solutionpartners.adobe.com/products/flashplayer/download/detection_kit/. If incorporating this into a template .js file you will want to use the "Client-Side Detection".


Flash detect code example (add to .js file):
NOTE: The following is older code. Newer templates use the Adobe detect kit above. The following is an example of the code that may be included in your template. Note that the detection includes a separate section for Apple devices.

This is a code example 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 leave off the top and bottom script and 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 Website
Mobi Template Details
Mobi Mp3 Template Details
Mobi Website Templates


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







Mobile detection for iPad iPod and other devices.


Apple iPad


See Also...
Flash Detect
Editing .js files
Mobile Help
Mobi-Hybrid
Mobi-Hybrid Mp3



Flash Detection Web Templates
Drop menu templates with built in scripts.
AllwebcoDesign.com
Apple iPod
iPad HTML5 Web Templates
Web templates configured for iPad and iPhone, iPod.
AllwebcoDesign.com
Droid, Android, Blackberry and mobile detect scripts and applications.
iPad, iPod Detection Sites
Drop menus with nature earth themes.
AllwebcoDesign.com
Business Web Templates
Business Web Templates
Professional business website templates.
AllwebcoDesign.com
iPad detect scripts
Light Tablet Web Templates
Smartphone and tablet optimized websites.
AllwebcoDesign.com
iPad detect scripts
Mobile Web Templates
Mobile configured HTML5 templates.
AllwebcoDesign.com
iPad detect scripts
Creating Mobile Websites
How to setup a mobile optimized website.
AllwebcoDesign.com



Apple iPod Touch
iPod, iPad, iPod Touch mobile detection