Posted in programming by nicoB on May 27th, 2007

Inserting a swf that fits to the window size is quite easy.

But how to put a minimal size to that swf (stop shrinking and showing scrollbars) ?

I’ve created a little javascript that can be useful : demo is here

How to do it :

  1. remove margin:
    body {
            margin: 0px;
    }
  2. add this script in the javascript tag
    var iMinWidth = 640; //put here the minimal width
    var iMinHeight = 480; // put here the minimal height
    window.onresize = onResizeScreen;

    function onResizeScreen(){

        var iScreenWidth;
        var iScreenHeight;

        var oBody = document.body;
        oBody.scroll="no";

        if (window.innerWidth){
                iScreenWidth = window.innerWidth;
                iScreenHeight = window.innerHeight;
        }
        else if (document.all){
                iScreenWidth = document.body.clientWidth;
                iScreenHeight = document.body.clientHeight;
        }

        if (iScreenWidth<iMinWidth || iScreenHeight<iMinHeight){
                oBody.scroll="yes";
                var bScrollW = false;
                var bScrollH = false;

                var iW;
                if (iScreenWidth<iMinWidth){
                        iW = iMinWidth;
                       bScrollW = true;
                }
                else {
                        iW = iScreenWidth;
                }

                var iH;
                if (iScreenHeight<iMinHeight){
                        iH = iMinHeight;
                        bScrollH = true;
                }
                else {
                        iH = iScreenHeight;
                }

                if (navigator.appName == "Netscape" && navigator.userAgent.indexOf("Safari")==-1){
                        if (bScrollW && !bScrollH)
                                iH -= 16;
                        if (!bScrollW && bScrollH)
                                iW -= 16;
                }
                else if (navigator.appName == "Microsoft Internet Explorer"){
                        if (bScrollW)
                            oBody.style.overflowX = "scroll";
                        else
                            oBody.style.overflowX = "hidden";
                        if (bScrollH)
                            oBody.style.overflowY = "scroll";
                        else
                            oBody.style.overflowY = "hidden";

                }

                resize(iW, iH);
        }
        else {
                if (navigator.appName == "Microsoft Internet Explorer"){
                   oBody.style.overflowX = "hidden";
                   oBody.style.overflowY = "hidden";
                }
                oBody.scroll="no";
                resize("100%", "100%");
        }

    }

    function resize(iWidth, iHeight){
        var oDiv = document.getElementById("flashcontent");
        oDiv.style.width = iWidth;
        oDiv.style.height = iHeight;
    }

  3. force the code to apply on body loaded :
    <body onLoad="onResizeScreen()">
  4. insert your swf in the body with SWFObject from Deconcept
    <script type="text/javascript" src="swfobject.js"></script>
    <div id="flashcontent">download flash player</div>

    <script type="text/javascript">
             var so = new SWFObject("swfminimal.swf", "swfminimal", "100%", "100%", "8", "#FFFFFF";
             so.write("flashcontent";
    </script>

  5. That’s it

It works fine on ie6, ie7, firefox and safari.


This entry was posted on Sunday, May 27th, 2007 at 9:32 pm and is filed under programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

List of replies :
  1. monsieur.vd., says
    May 27th, 2007 at 9:36 pm

    woaw ! c’est chouette comme petit bout de code, je pense que ça me servira bientôt.
    Merci monsieur.B.

  2. matthieu, says
    May 27th, 2007 at 10:29 pm

    C’est propre et ca marche, merci nico !

  3. daweed, says
    September 3rd, 2007 at 4:34 pm

    nico, a la place d’un “scroll=no” qui ne marche que sous IE, ne vaut il pas mieux faire un

    html,body{
    overflow:hidden;
    }

    Et du coup, en js tu as juste a changé ton overflow, et tu evite comme ca d’avoir des conditionnelles en fonction du navigateur.

  4. nicoB, says
    September 22nd, 2007 at 7:23 pm

    Thank you David for your advice. But using just a CSS doesn’t work on all the browser (Safari in particular and Firefox in some cases).
    The only solution is tu put a javascript test to get the client browser and update the div properties.

  5. nicoB, says
    September 30th, 2007 at 11:54 am

    I found 2 other solutions that do exactly the same thing (in object oriented code) :
    - http://blog.pixelbreaker.com/flash/swfforcesize/
    - http://www.daweed.info/laboratoire/javascript/gerer-la-position-et-les-scrolls-dun-site-flash-au-sein-dune-page-html

Leave a Reply