Preventing the reset of Silverlight/Flash objects in RadMultiPage for Firefox and Chrome

RELATED TO:

Article information

Article relates to

 RadTabStrip,

Created by

 Tsvetomir, Telerik

Last modified

 December 28, 2009    

Last modified by

 Peter, Telerik


HOW TO

Prevent the reset of Silverlight/Flash objects in RadMultiPage for Firefox and Chrome

DESCRIPTION

Firefox/Chrome will reset any Flash or Silverlight objects when they detects that the objects are no longer visible in the page. This detection is triggered when the containing element is made invisible by setting the CSS “display” property to ”none”.

Invisible PageViews are hidden by RadMultiPage using this property. As a result the embedded objects get reset to their original state.

The sample illustrates how this can be worked round using a few CSS styles. The embedded object is hidden using "visibility:hidden" which solves the problem.

SOLUTION

<%@ Page Language="C#" %>
  
<!DOCTYPE html>
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">     
        .rmpHiddenView
        {
            display: block !important;
            height: 0px;
            width: 0px;
            visibility: hidden;
        }
          
        .rmpHiddenView .flashContainer
        {
            height: 0px;
            width: 0px;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="0">
        <Tabs>
            <telerik:RadTab Text="Tab 1" />
            <telerik:RadTab Text="YouTube" />
            <telerik:RadTab Text="Tab 2" />
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="400">
        <telerik:RadPageView ID="Pageview1" runat="server">
            ... Content of the Pageview1 ...
        </telerik:RadPageView>
        <telerik:RadPageView ID="Pageview2" runat="server">
            <div class="flashContainer">
                <object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/1eCRTumDMS8&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/1eCRTumDMS8&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="Pageview3" runat="server">
            ... Content of the Pageview3 ...
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    </form>
</body>
</html>

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.