$ ionic start MyModelApp fullscreen where on header a click of a button results in fullscreen function?


#1

Hi Ionicers,

is it possible to add to the list of template
$ ionic start MyModelApp blank
$ ionic start MyModelApp complex-list
$ ionic start MyModelApp maps
$ ionic start MyModelApp salesforce
$ ionic start MyModelApp sidemenu
$ ionic start MyModelApp tabs

my request
$ ionic start MyModelApp fullscreen

the reason for this is i been finding and i don’t think anyone has actually done this where on a click of a button on the header there is a button where is allow that page to be viewed in full-screen.
i read about the load full screen and image in full screen but it is not exactly what i need.
chance of help?
thanks!

the effect is similar to what i have written in JavaScript as a function.
//https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
// does not work for iOS 
/*jslint browser:true */
function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

live display
http://iwant2study.org/ospsg/index.php/interactive-resources/physics/04-waves/04-light/116-thin-converging-diverging-lens-ray-diagram-lens-inquiry-learning

or the exact link
http://iwant2study.org/lookangejss/04waves_13light/ejss_model_ThinLenModel05/ThinLenModel05_Simulation.xhtml
click on the full screen button next to the reset button, available when view on Android devices only.


#2

Sure you can do

$ ionic start myApp http://github.com/<user-name>/<starter-repo>

The directory just needs to follow this structure


#3

dear mhartington,

i followed you instruction and key in this command line

$ ionic start myApp https://github.com/driftyco/ionic2-starter-sidemenu

the result is an apk that does not look fullscreen
http://iwant2study.org/lookangejss/02_newtonianmechanics_8oscillations/ejss_model_SHM21.apk

can i have more instruction on “The directory just needs to follow this structure”.
thanks!

like what do i do next to see a fullscreen app

  1. to edit this index.html found inside the www folder of the myApp or
  2. do i populate my own pages in the page1.html?

#4

Yes, this is the pre-made sidemenu template.

You would need to build your own starter template that is fullscreen.


#5

I am uncertain how I can do it with ionic.
Please help me with a working prototype that I can edit the codes from?

I will be most grateful for your help.
Thank you.