SL360: max-width, max-height

Hi there,

since the new version (January 22 2020) it is no longer possible to define the max-height and max-with of a published course (bevor you could alter the style for #preso in main.min.css, and everythings worked fine). Is there anyone out there, who knows about  a workaround?

 

I found a workaround: jquery.

put the jquery.js into the directory html5/lib/scripts/

insert a new html-page (index.html) in the base directory of the course. Alter the imsmanifest.xml: change

<resource identifier="__6J5hCikf93B_course_id_RES" type="webcontent" href="index_lms.html" adlcp:scormtype="sco">

to 

<resource identifier="__6J5hCikf93B_course_id_RES" type="webcontent" href="index.html" adlcp:scormtype="sco">

Add this to the Head of index.html:

<script type="text/javascript" src="html5/lib/scripts/jquery.js"></script>
<script type="text/javascript">
function sizeContent(){
var x = $(window).width();
if(x< 1185){
$('.myInner').css('width', $(window).width()+'px');
$('.myInner').css('height', $(window).height()+'px');}
else{
$('.myInner').css('width', 1185+'px');
$('.myInner').css('height', 874+'px');
var y = Math.trunc(((x - 1185)/2));
$('#inner').css('margin-left', y +'px');



}
}

</script>
<style type="text/css">

.myInner{
margin: 0 auto !important;
}


</style>

and the body:

<body style="overflow: hidden;">
<div id="inner">
<iframe src="index_lms.html" class="myInner" id='ght' frameborder="0"></iframe>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
sizeContent();
$(window).resize(sizeContent);
});
</script>
</body>

 

it works just fine!

 

 

Be the first to reply