0

I asked this question my question

An I managed to put a div tag with image inside. I switch the flash player with the div when I start dragging the extjs window. And it works well but still when I hover over the div tag the dragging stops because browser puts the focus on the div tag.

Is it possible to remove/stop the focus of the div tag while I drag the extjs window using some javascript/jquery function?

I tried even without image, just div tag with background color and still when mouse hovers over the div it still stops dragging the window.

here is a sample code

win = Ext.create('widget.window',
{
    title: "My Player",
    id: "my_player",
    width: 750,
    height: 290,
    x:startXPlayer,
    y:startYPlayer,
    ghost: false,
    modal: false,
    resizable: false,
    disableCaching : true,
    closeAction: 'destroy',
    items: [],
    html: '<iframe src="./index.php/myplayer?'+url+'&d='+new Date()+'" style="width: 735px; height: 280px; border: none;"></iframe>'
});

Ok here is simplified html which is embeded in the iframe

<html>
   <head>
        <title>my page</title>
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            swfobject.registerObject("myPlayer", "9.0.0", "expressInstall.swf");
        </script>
   </head>
   <body>
      <div id="window">
        <div id="static_image" class="image">
            <img src="test.jpg"/>
        </div>
        <div id="flash" class="flobject">   
            <object id="myPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="720" height="240">
                <param name="movie" value="test.swf" />
                <param name="wmode" value="transparent">

                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
                <!--<![endif]-->
                <div>
                    <h1>Alternative content</h1>
                    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                </div>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </div>
   </body>
</html>
Community
  • 1
  • 1
Vlad
  • 2,739
  • 7
  • 49
  • 100
  • Is your div absolute/relative positioned, and does it have a z-index? – chrisfrancis27 Aug 03 '12 at 10:18
  • The div is positioned fixed and have z-index. Also the div that contains the flash player has fixed postion. I change z-index with js. But cannot prevent focus of whichever div tag when I drag the window – Vlad Aug 03 '12 at 10:20

1 Answers1

1

I think the term focus is what's confusing you - a div tag shouldn't receive focus. It's more likely that the div you're dragging over has a higher z-index than the draggable element, thus triggering a mouseleave or mouseout event on the draggable element, which in turn stops the drag. If you could post a working fiddle it would be easier to see what's going on here.

Community
  • 1
  • 1
chrisfrancis27
  • 4,516
  • 1
  • 24
  • 32
  • ok. the extjs window component has a property html which is set to be an iframe with source of the web page that contain the image div and player div. – Vlad Aug 03 '12 at 10:38
  • So the element you are dragging is a div containing an iframe? – chrisfrancis27 Aug 03 '12 at 10:40
  • OK, but I'm still unclear what your actual markup is. You have a draggable div with an iframe in it, and another target div somewhere else in the parent (not iframe) page, and dragging the first div over the second one stops the drag event? Is that right? – chrisfrancis27 Aug 03 '12 at 10:52
  • no I am dragging the extjs window. I wanted to remove focus over the inner content when the window is dragged and restore it when I stop draging the window – Vlad Aug 03 '12 at 11:03