TIP: How to resize the stack with the window

Bringing your stacks to the web

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller, robinmiller

Post Reply
seaniepie
Posts: 148
Joined: Wed Sep 07, 2011 10:56 am

TIP: How to resize the stack with the window

Post by seaniepie » Mon Jul 22, 2019 12:15 am

To get the standalone to match or follow the size of the browser window, add the following to the standalone HTML:

Code: Select all

<script type="text/javascript">
    function reportWindowSize() {
        var myStack = document.liveCode.findStackWithName('myStandalone');
        myStack.js2LC_resizeStack(window.innerWidth,window.innerHeight);
    }
    window.onresize = reportWindowSize;
</script>
This is sent whenever the window is resized or if the following call is sent from LC at any time:

Code: Select all

do "reportWindowSize" as JavaScript
This will call the function above and return back to your stack (here with the name 'myStandalone') the window width and height via the handler 'js2LC_resizeStack' (or whatever you want to call it).
Add this to your stack script to handle the returned parameters:

Code: Select all

on js2lc_resizeStack pWidth,pHeight
   set the width of me to pWidth - 100
   set the height of me to pHeight - 100
end js2lc_resizeStack
Here I am making my stack 100 pixels shorter than the window.

By the way, to make the stack appear centre of the frame I place this at the top of the <style> section of the HTML:

Code: Select all

body { font-family: arial; margin: 0; padding: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%)
}
It's not the only or best way to do this but it's simple and works.

CuriousOne
Posts: 14
Joined: Sun Dec 30, 2018 11:16 pm

Re: TIP: How to resize the stack with the window

Post by CuriousOne » Sun Oct 18, 2020 3:32 am

Hi SeaniePie,
This looks like a brilliant solution however I am not able to get it to work on my end.
Do you happen to have a stack and html file I could tinker around with to better understand how this works?
In my tests I am getting the following error in the chrome console when I try to resize using the snippets your provided above.

Code: Select all

Uncaught TypeError: myStack.jsLC_resizeStack is not a function
    at reportWindowSize (Test.html:18)
reportWindowSize @ Test.html:18
Thank you :D

MarBor
Posts: 12
Joined: Fri Sep 18, 2020 2:56 pm

Re: TIP: How to resize the stack with the window

Post by MarBor » Mon Oct 26, 2020 4:01 pm

Hi CuriousOne,

I struggled with the exact same issue when I tried to have my HTML5 app adjusted to the browser window.

For making the HTML5 app always fill the browser window proportionally I found that adding the following to the stack script helps:

Code: Select all

on openStack
   
   set the fullscreenmode of me to "letterbox"
   set the fullscreen of me to true
   
end openStack
This might be a bit annoying while working on the app in the LiveCode IDE and running the stack there, though ...
So make sure to disable the code snippet there or to set the fullscreen to false again at some point.

Hope this helps!

ClipArtGuy
Posts: 231
Joined: Wed Aug 19, 2015 4:29 pm

Re: TIP: How to resize the stack with the window

Post by ClipArtGuy » Mon Oct 26, 2020 9:47 pm

MarBor wrote:
Mon Oct 26, 2020 4:01 pm


This might be a bit annoying while working on the app in the LiveCode IDE and running the stack there, though ...
So make sure to disable the code snippet there or to set the fullscreen to false again at some point.
You could do something like this to alleviate some of the annoyance:

Code: Select all

on openStack
   if the environment is "development" then
   	set the fullscreen of me to false
   else
   	set the fullscreenmode of me to "letterbox"
   	set the fullscreen of me to true
   end if
end openStack

MarBor
Posts: 12
Joined: Fri Sep 18, 2020 2:56 pm

Re: TIP: How to resize the stack with the window

Post by MarBor » Tue Oct 27, 2020 10:02 am

ClipArtGuy wrote:
Mon Oct 26, 2020 9:47 pm
MarBor wrote:
Mon Oct 26, 2020 4:01 pm


This might be a bit annoying while working on the app in the LiveCode IDE and running the stack there, though ...
So make sure to disable the code snippet there or to set the fullscreen to false again at some point.
You could do something like this to alleviate some of the annoyance:

Code: Select all

on openStack
   if the environment is "development" then
   	set the fullscreen of me to false
   else
   	set the fullscreenmode of me to "letterbox"
   	set the fullscreen of me to true
   end if
end openStack
Yes, perfect! :)

Post Reply

Return to “HTML5”