TIP: How to resize the stack with the window

Bringing your stacks to the web

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

Post Reply
seaniepie
Posts: 141
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.

Post Reply

Return to “HTML5”