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

full screen for createjs file

Participant ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

Hi.

I am creating HTML5 apps for classroom digital boards.

I would like to make them full screen. At the moment, you can see white around the edges ie: they are not filling the whole window. If I make the background wider at design time, it still doesn't fill it.

I know there is probably a very simple answer but I can't find it.

Any help would be appreciated.

Views

391

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

Community Expert , Mar 22, 2021 Mar 22, 2021

full browser:  file>publish settings>enable make responsive - both>enable scale to fill and pick one of the options:

 

kglad_0-1616441035596.png

 

 

for fullscreen do the same plus add:

// put something on stage so "this" can respond to a click

this.addEventListener("click", f);


var element = document.getElementById("animation_container");

function f(){
element.requestFullscreen()
.then(function() {
// fs success
})
.catch(function(error) {
console.log(error.message);
});
}

 

Votes

Translate

Translate
Community Expert ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

you want fullscreen (requires user interaction) or full browser (fills the browser display window)?

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 ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

Both methods would be interesting to know about because we are going to have different scenarios. Teachers in a classroom would want to go full screen - kids at home would probably prefer to keep the browser visible - or maybe not. Until we test we don't know. 

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 ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

I've just come across a setting in publish settings - stretch to fit which remedies the white spaces. It was that easy so I feel a little dumb, anyway,

It would also be nice to know -  "fullscreen (requires user interaction)"

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
Community Expert ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

full browser:  file>publish settings>enable make responsive - both>enable scale to fill and pick one of the options:

 

kglad_0-1616441035596.png

 

 

for fullscreen do the same plus add:

// put something on stage so "this" can respond to a click

this.addEventListener("click", f);


var element = document.getElementById("animation_container");

function f(){
element.requestFullscreen()
.then(function() {
// fs success
})
.catch(function(error) {
console.log(error.message);
});
}

 

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 ,
Mar 23, 2021 Mar 23, 2021

Copy link to clipboard

Copied

Excellent - thanks - I just tried it and it works beautifully.

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
Community Expert ,
Mar 23, 2021 Mar 23, 2021

Copy link to clipboard

Copied

LATEST

you're welcome.

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