• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

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

1.6K

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

People's Champ , 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 =

...

Votes

Translate

Translate
People's Champ ,
Jul 10, 2018 Jul 10, 2018

Copy link to clipboard

Copied

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

Votes

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 🙂

Votes

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
People's Champ ,
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();
      });

Votes

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

Votes

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
People's Champ ,
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.

Votes

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 🙂

Votes

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
People's Champ ,
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.

Votes

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

LATEST

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.

Votes

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
Resources
Help resources