Highlighted

How to disable scaling in desktop view?

Participant ,
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
Adobe Community Professional
Correct answer by TLCMediaDesign | Adobe Community Professional

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.

Views

315

Likes

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

How to disable scaling in desktop view?

Participant ,
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
Adobe Community Professional
Correct answer by TLCMediaDesign | Adobe Community Professional

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.

Views

316

Likes

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
Adobe Community Professional ,
Jul 10, 2018

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Participant ,
Jul 11, 2018

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Adobe Community Professional ,
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

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
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

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
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

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
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

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
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

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group