Re: Having trouble implementing Captivate simulation in an iFrame

Not sure if you still need this, since it has been nearly a month.

But I just ran into this same issue.

Require using HTML5 with Captivate inside of an iFrame.

The "Scalable html" was ignoring the iframe's dimensions, and using the full window dimensions instead.

What I ended up doing is stop using the "scalable html" option when publishing from captivate. and then i used the following javascript inside the html that the iframe was placed:

    <script type="text/javascript">

        var iframeName = 'trainingVideo';

 

 

        this.FindZoomHeight = function () {

            var slideshow = $('#main_container', $('#' + iframeName).contents());

            var showHeight = $(slideshow).height();

            var frameHeight = $('#' + iframeName).height();

            if (frameHeight >= showHeight) { return 1; }

 

 

            return (frameHeight / showHeight);

        }

 

 

        this.FindZoomWidth = function () {

            var slideshow = $('#main_container', $('#' + iframeName).contents());

            var showWidth = $(slideshow).width();

            var frameWidth = $('#' + iframeName).width();

            if (frameWidth >= showWidth) { return 1; }

 

 

            return (frameWidth / showWidth);

        }

 

 

        this.SetZoomLevel = function () {

            var zh = FindZoomHeight();

            var zw = FindZoomWidth();

 

 

            var zoom = 1;

 

 

            if (zh < zw) {

                zoom = zh;

            } else {

                zoom = zw;

            }

            var container = $('#main_container', $('#' + iframeName).contents());

 

            $('body', $('#' + iframeName).contents()).css('-moz-transform-origin', '0 0 0').css('-o-transform-origin', '0 0 0').css('-moz-transform', 'scale(' + zoom + ')').css('-o-transform', 'scale(' + zoom + ')');

            $(container).css('zoom', zoom);

        }

 

 

        $(document).ready(function () {

            $(window).resize(function () {

                SetZoomLevel();

            });

        });

 

 

        $('#' + iframeName).load(function () {

            SetZoomLevel();

        });

    </script>

 

This uses the css zoom property. (uses transform scale in firefox/opera..but captivate doesn't support those browsers anyways)