How to disable scaling in desktop view?

[Contentbee]

Hello world! 🙂

I would like my content to be scalable when viewed with a small laptop screen, tablet, or smartphone, but the size should be fixed if the screen size is 1280 pixels or larger. But when publishing there´s only two options - all and everytime scaling or always stay in fixed size.

I´ve checked the differences between an scalable and a non-scalable output, and the only difference I´v found was in the CPM.js:

project:{ ..... shc:false or true

I´ve found an old thread with a similar problem, but the solution does not work (Captivate 8 scalable content max height/width )

Does anyone of you know how to do this with Captivate 2017??

• HTML5
• standard project (non-responsive)
• no fluid boxes

[TLCMediaDesign]

I have something somewhere. I'll see if I can find it.

[Contentbee]

Oh, sounds great 🙂 Let´s hope it will get found 🙂

[TLCMediaDesign]

After you publish, you need to open in index.html or index_SCORM.html.

Find the code below:

cpXHRJSLoader.css('assets/css/CPLibraryAll.css',function() {

       lCSSLoaded = true;

Add this JavaScript:

          var w = cp.D.project.w;
          var mq = window.matchMedia( "screen and (min-width: " + w + "px)" );

          if ( mq.matches )
          {
        cp.D.project.shc = false;
          }
          else
          {
        cp.D.project.shc = true;
          }

          mq.addListener( function( changed )
          {
        if ( changed.matches )
        {
         cp.shouldScale = false;
        }
        else
        {
         cp.shouldScale = true;
        }
          });

The function should look like this:

cpXHRJSLoader.css('assets/css/CPLibraryAll.css',function() {
       lCSSLoaded = true;
       var w = cp.D.project.w;
          var mq = window.matchMedia( "screen and (min-width: " + w + "px)" );

          if ( mq.matches )
          {
        cp.D.project.shc = false;
          }
          else
          {
        cp.D.project.shc = true;
          }

          mq.addListener( function( changed )
          {
        if ( changed.matches )
        {
          cp.shouldScale = false;
        }
       else
       {
         cp.shouldScale = true;
       }
         });
       constructDIVs();
      });

[Contentbee]

Thanks - but sorry, it does not work. I´ve tried it with a non-scaling publish as well as with a scaling publish. Both times the content did either scale in every window size or did nothing at all.

I miss my fixed size of 1280 pixels in your script, may be that´s the fault??

Edit: worked with IE, but just once. When the browser window was resized, the content was fullscreen already. Did absolutely not work in Firefox and Chrome ...

[TLCMediaDesign · Accepted solution]

Sorry, I told you the wrong function, it should go here:

cpXHRJSLoader.js(lJSFiles,function()
      {
       var imagesJSONFiles = [ 'dr/imgmd.json' ];
       cpXHRJSLoader.loadImagesJSON(imagesJSONFiles,function(imageToJSONPathMap){
        cp.imageToJSONPathMap = imageToJSONPathMap;
        var imageJSONFiles = [ 'dr/img1.json' ];
        if(window.location.protocol.substr(0,4) == "file")
         cpXHRJSLoader.preloadURLs(imageJSONFiles, constructDIVs);
        lJSLoaded = true;
       
        var w = cp.D.project.w;
        var mq = window.matchMedia( "screen and (min-width: " + w + "px)" );

        if ( mq.matches )
        {
         cp.D.project.shc = false;
        }
        else
        {
         cp.D.project.shc = true;
        }

        mq.addListener( function( changed )
        {
         if ( changed.matches )
         {
          cp.shouldScale = false;
         }
        else
        {
         cp.shouldScale = true;
        }
          });
        if(window.location.protocol.substr(0,4) != "file" || !imageJSONFiles.length)
         constructDIVs();
       });
      });

It works in IE, Edge and Chrome. I don't have FIrefox.

[Contentbee]

Great, thanks! It´s working perfect in Chrome! And also working in IE and Firefox, even when it´s still working just once. When resizing the browser window, the page has to be reloaded, otherwise the content stays in it´s size (Firefox: the last dsiplayed size, IE: scaled to fullscreen), but as it´s not a webpage but an elearning content which will be distributed via LMS and maybe start with a fixed window size, it's OK 🙂

I even placed this code inside the HTML-Template and it´s working perfect, so no need to change the code after publishing 🙂

[TLCMediaDesign]

At work we only use IE and it works all the time when resizing the browser window. I'm sure that the script could be modified to work in the other browsers when resizing instead of just on the initial load.

[Lee Millard]

Question about the code above. This helped me out greatly, so thank you! One thing that I am noticing is if I scale my browser window down, then click the full-screen button on the browser window, the browser window expands, but the module container remains small (see screenshot). Do you have any suggestions to resolve this? If I click the full-screen button on the browser window, I'd love it if it stayed at the max size specified.