09-center-aline.htm

<!DOCTYPE html>
<html>
    <head>
        
        <title>.center() and .aline() methods</title>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

        <!-- LIBRARY FILES -->
        <link rel="stylesheet" type="text/css" href="basic/basic.min.css">
        <script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>

        <script>
        
        let boxGray;
        let boxRed;
        let boxOrange;
        
        // First running function.
        window.onload = function() {
            
            // BOX: Gray box. Parameters: (left, top, width, height, props)
            boxGray = Box(0, 0, 120, 120, {
                color: "lightgray",
            });
            that.center();

            // BOX: Red box.
            boxRed = Box(0, 0, 120, 120, {
                color: "orangered",
            });
            that.aline(boxGray, "right", 4);

            // BOX: Orange box.
            boxOrange = Box(0, 0, 40, 40, {
                color: "orange",
                round: 40,
                border: 6,
                borderColor: "rgba(0, 0, 0, 0.2)",
            });
            that.aline(boxGray, "bottom", 20, "center");

            page.onResize(pageResized);
            
        };
        
        const pageResized = function() {

            // Recalculate the position of the boxes.
            boxGray.center();
            boxRed.aline(boxGray, "right", 4);
            boxOrange.aline(boxGray, "bottom", 20, "center");

            // NOTE: .center() and .aline() methods calculate only when called.

        };

        </script>

    </head>
    <body>
        
        <!-- HTML content -->
        
    </body>
</html>