How to disable scaling in desktop view?

Participant ,
Jul 10, 2018 Jul 10, 2018

Copy link to clipboard

Copied

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

Views

479

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Jul 11, 2018 Jul 11, 2018
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 =...

Likes

translate

Translate

Translate
Adobe Community Professional ,
Jul 10, 2018 Jul 10, 2018

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 11, 2018 Jul 11, 2018

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 11, 2018 Jul 11, 2018

Copy link to clipboard

Copied

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();
      });

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 11, 2018 Jul 11, 2018

Copy link to clipboard

Copied

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 ...

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 11, 2018 Jul 11, 2018

Copy link to clipboard

Copied

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.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 12, 2018 Jul 12, 2018

Copy link to clipboard

Copied

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 🙂

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 12, 2018 Jul 12, 2018

Copy link to clipboard

Copied

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.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 19, 2021 Mar 19, 2021

Copy link to clipboard

Copied

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.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines