Home/ Questions/Q 7013059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T22:20:13+00:00

Today i have done a work where i was supposed to show a flash

  • 0

Today i have done a work where i was supposed to show a flash player inside a dialog box. Which i was able to do it quite easily.But my flash player contains a text box which needs to be focused once the flash player is loaded inside the dialog box, but it is not getting focused by default. Can anybody help me to tackle this problem?

But if we click inside the flash player i was able to get the focus, but not by default.

I will show you what i have done up to now

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

</html>
    <head>
        <title></title>
        <meta name="google" value="notranslate">         
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen"> 
            html, body  { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center; 
                   background-color: #ffffff; }   
            object:focus { outline:none; }
            #flashContent { display:none; }
        </style>
        <script type="text/javascript" src="jquery-1.5.1.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.11.js"></script>
        <script type="text/javascript" src="swfobject.js"></script>
</head>
<body>

<a class= "subskillList">test</a>
<!--<div id="activityDialog" class="nodisplay">
    <div class="popup_content">
        <div class="popup-title-header">
            <div class="">
                <span id="dialogTitle" class=""></span><a href="javascript:void(0);" id="closePlayer" title="close" class="close-button">
                    <span class="close-icon">close</span></a></div>
        </div>-->
        <div id="flashContent"></div>
    <!--</div>
</div>-->
</body>
</html>
<script type="text/Javascript">
$(document).ready(function () {
    var languageCode;
    var contentUrl;
    var flashurl;
    $('.subskillList').live('click', function (event) {
        flashEmbed();
        Dialog($('#activityDialog'));
        return false;
    });

    function flashEmbed() {
        var swfVersionStr = "10.0.0";
        var xiSwfUrlStr = "testFocusProject.swf"
        var flashvars = {};
        var params = {};
        params.quality = "high";
        params.bgcolor = "#ffffff";
        params.allowscriptaccess = "always";
        params.allowfullscreen = "false";
        params.wmode = "opaque";
        var attributes = {};
        attributes.id = "flashApp";
        attributes.name = "testFocusProject";
        attributes.align = "middle";
        swfobject.embedSWF(
                "testFocusProject.swf", "flashContent",
                "840px", "500px",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
                $('#flashApp').tabIndex=0;
                $('#flashApp').focus();
    }

    function setFocusToFlash() {
    $('#flashApp').tabIndex=0;
    $('#flashApp').focus();
    }

    function Dialog(control) {
        $dialog = $(control).dialog({
            resizable: false,
            autoOpen: false,
            modal: true,
            draggable: true,
            open: function () {
                var overlaywidth = $('.ui-widget-overlay').width();
                $('.ui-dialog').width(840).height(540);
                var x = $(window).height() / 2 - $('.ui-dialog').height() / 2;
                var y = $(window).width() / 2 - $('.ui-dialog').width() / 2;
                $('.ui-dialog').css('left', y + 'px');
                $('.ui-dialog').css('top', x + $(window).scrollTop() + 'px');
                $('body').css("overflow", "hidden");
                $('.ui-widget-overlay').width(overlaywidth + 20);

                setTimeout(setFocusToFlash(), 2000);
            },
            close: function (ev, ui) {
                $('.ui-widget-overlay').stop().animate({ "opacity": "0" }, 1480);
                $('body').removeAttr('style');
            }
        }).dialog('open');
    }
});
</script>

The below code is used to get focus on the flash object

setTimeout(setFocusToFlash(), 2000);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First : swfobject.embedSWF(...) will need a few milliseconds to embed the swf in HTML. So you can’t immediately call $('#flashApp').tabIndex=0; or $('#flashApp').focus();

    Second : Are you sure $('#flashApp') is returning anything.

    Third : setTimeout(setFocusToFlash(), 2000); is wrong. It will invoke the function immediately. Correct is setTimeout(setFocusToFlash, 2000);

    See how to do it below by fixing these three.

    First declare the function like this. This is what works in firefox. 

    function setFocusToFlash() {
    document["flashApp"].tabIndex=0;
    document["flashApp"].focus();
}

    If its not working window["flashApp"].focus(); should work in other browsers.

    And make use of the ready callback in embedSWF as given below

     swfobject.embedSWF(
            "testFocusProject.swf", "flashContent",
            "840px", "500px",
            swfVersionStr, xiSwfUrlStr,
            flashvars, params, attributes, function(){
                setTimeout(setFocusToFlash, 500);
        });

    500ms was enough for me to get the focus. You can test and set the delay you want.

    • 0