Page 1 of 1
TIP: How to resize the stack with the window
Posted: Mon Jul 22, 2019 12:15 am
by seaniepie
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.
Re: TIP: How to resize the stack with the window
Posted: Sun Oct 18, 2020 3:32 am
by CuriousOne
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
Re: TIP: How to resize the stack with the window
Posted: Mon Oct 26, 2020 4:01 pm
by MarBor
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!
Re: TIP: How to resize the stack with the window
Posted: Mon Oct 26, 2020 9:47 pm
by ClipArtGuy
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
Re: TIP: How to resize the stack with the window
Posted: Tue Oct 27, 2020 10:02 am
by MarBor
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!
Re: TIP: How to resize the stack with the window
Posted: Tue May 18, 2021 1:29 pm
by libuda
Hi everybody,
is there a solution for this problem?
I get the same error in my project. I think it´s a problem with the name in the javascript-function:
document. liveCode. findStackWithName('whatnamehere');
Which name gos in there. The name of the stack, the name of the standalone?
Hope for a solution!
