Skip to main content
C
Contentbee
Inspiring
July 10, 2018
Answered

How to disable scaling in desktop view?

  • July 10, 2018
  • 1 reply
  • 2508 views

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
    This topic has been closed for replies.
    Correct answer TLCMediaDesign

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


    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.

    1 reply

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    July 10, 2018

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

    C
    ContentbeeAuthor
    Inspiring
    July 11, 2018

    Oh, sounds great :-) Let´s hope it will get found :-)

    C
    ContentbeeAuthor
    Inspiring
    July 11, 2018

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


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

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