More in this section

Forums / Developing with Sitefinity / Handling flash for Safari in your web page

Handling flash for Safari in your web page

1 posts, 0 answered
  1. William
    William avatar
    2 posts
    05 Aug 2010
    26 Jan 2011
    Link to this post
    We are using Sitefinity 3.7 on our company site and it is working great.  The marketing team works on their pages and technical support works on theirs.  I very rarely need to do any content management for our site. 
    My company decided to add a flash object to the main page.  The problem is that our iPad and iPhone customers are seeing a blank space where the flash is suppose to be.  This is because Safari does not allow the flash to display.  After searching the web I found a solution.  You see Sitefinity uses RadControls and they in turn use a Telerik static client library which have properties that are perfect for a solution.  Here is a link on Telerik’s site where they talk about the static client library.
    Here is what I did:
    In my template page I added a reference to the library in my ScriptManager tag.

    <asp:ScriptManager runat="server" ID="ScriptManager1">
       <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

    Next in the main page Generic Content control, using HTML edit mode, I surrounded the flash and an image with div tags.  The tags are right together.

    <div id="divFlash">flash goes here</div>
    <div id="divNoFlash">image goes here</div>

    I then added the following code to the bottom of my html (in the generic content window).

    <script type="text/javascript">
        document.getElementById("divNoFlash").style.visibility = "hidden";
        document.getElementById("divNoFlash").style.display = "none";
       //test for iPad and iPhone
        if($telerik.isSafari || $telerik.isMobileSafari)
             document.getElementById("divFlash").style.visibility = "hidden";
             document.getElementById("divFlash").style.display = "none";
             document.getElementById("divNoFlash").style.visibility = "visible";
             document.getElementById("divNoFlash").style.display = "block";

    Now when a iPad or iPhone customer comes to the site they see an image and when the rest of the world comes they see flash. 

    There were some functions included in the library that set visibility on or off but I could not get them to work, so I just used javascript scripting.  If someone does figure out how to use it let me know.
1 posts, 0 answered