Hello Projet TV,
The problem is not related to our RadDock control, but it's expected behavior, when moving the dock (or any other element) under Firefox. The dock is moved in the DOM tree when dragged on the page. This (I guess) causes the DOM tree to be refreshed when using Firefox. Basically, if you have a <div> containing a video (youtube video for example), and start the video, then call
appendChild(<div>) (i.e. move the object in the DOM tree) to append the video to another element, the video will be restarted. Here is a test page demonstrating this:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
></
title
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function MoveDiv()
{
var video = $get("moveableVideo");
var divNewParent = $get("divNewParent");
divNewParent.appendChild(video);
}
</
script
>
</
telerik:RadCodeBlock
>
<
style
type
=
"text/css"
>
#divVideo
{
width: 700px;
height: 400px;
border: 2px solid Red;
padding: 2px;
float: left;
}
#divNewParent
{
width: 700px;
height: 400px;
border: 2px solid Green;
padding: 2px;
float: left;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
</
Scripts
>
</
asp:ScriptManager
>
<
telerik:RadDockLayout
ID
=
"RadDockLayout1"
runat
=
"server"
>
<
telerik:RadDockZone
ID
=
"RadDockZone1"
runat
=
"server"
MinHeight
=
"100px"
Width
=
"500px"
>
<
telerik:RadDock
ID
=
"RadDock1"
runat
=
"server"
Title
=
"RadDock-Title"
Width
=
"500px"
>
<
ContentTemplate
>
<
object
width
=
"480"
height
=
"385"
>
</
param
>
<
param
name
=
"allowFullScreen"
value
=
"true"
></
param
>
<
param
name
=
"allowscriptaccess"
value
=
"always"
></
param
>
allowscriptaccess
=
"always"
allowfullscreen
=
"true"
width
=
"480"
height
=
"385"
></
embed
></
object
>
</
ContentTemplate
>
</
telerik:RadDock
>
</
telerik:RadDockZone
>
</
telerik:RadDockLayout
>
<
div
style
=
"height: 20px; padding: 20px;"
>
<
input
type
=
"button"
value
=
"MoveDiv"
onclick
=
"MoveDiv(); return false;"
/>
</
div
>
<
div
id
=
"divVideo"
>
<
div
id
=
"moveableVideo"
>
<
object
width
=
"480"
height
=
"385"
>
</
param
>
<
param
name
=
"allowFullScreen"
value
=
"true"
></
param
>
<
param
name
=
"allowscriptaccess"
value
=
"always"
></
param
>
allowscriptaccess
=
"always"
allowfullscreen
=
"true"
width
=
"480"
height
=
"385"
></
embed
></
object
>
</
div
>
</
div
>
<
div
id
=
"divNewParent"
>
</
div
>
</
form
>
</
body
>
</
html
>
I searched the web for a way to work around this issue in Firefox, but couldn't find any solutions. What you could do at the moment is, disable the movement of the control for Firefox.
Best wishes,
Pero
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items.