Skip to main content
C
CMJillJones
Participant
June 10, 2013
Question

Having trouble implementing Captivate simulation in an iFrame

  • June 10, 2013
  • 1 reply
  • 1006 views

Hi all, hoping you can give me some pointers.

I'm trying to implement Captivate scalable html5 simulations in a proprietary LMS that requires that I place it in an iFrame.  It works, but the scaling is not working properly.  Immediately upon loading, the Captivate content is too large for my frame, although it does resize (still too large) when I scale the page. 

Are there any known tweaks for this kind of issue?

Thanks in advance,

Jill

    This topic has been closed for replies.

    1 reply

    B
    BillyDRyan
    Participant
    July 3, 2013

    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)

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices