CodePug.com

Home | Games | Media | Programming | Raspberry Pi | Misc Content

JavaScript Slide Box

If you have ever wanted to have a handy JavaScript widget to display questions and have users slide a tab to see the answer, then you are in luck. This short script can be reused multiple times on a page and leverages the [[javascript-game-library Code Pug Javascript Game Library]]. All you have to do is include the game library JS, create a canvas with an id, and create a new SlideBox object in your script tags. Enjoy!

Example


Usage

</code>

Source for codePugSlideBox.js

    awt.init(canvasId, paint,false);

    awt.addMouseDownListener(function (x, y) {
        slideActive = -1;
        if (x > (doorLeft + borderWidth/2) && (x < doorLeft + borderWidth/2 + 40)) {
            if (y > 60 && y < 100) {
                slideActiveX = x - doorLeft;
            }
        }
    });

    awt.addMouseMoveListener(function (x, y) {
        if (slideActiveX > 0) {
            doorLeft = (x - slideActiveX < 0) ? 0 : x - slideActiveX;
        }
    });

    awt.addMouseUpListener(function (x, y) {
        slideActiveX = -1;
    });
    
    function paint(ctx, timeDiff){
        awt.drawRect(0, 0, ctxWidth, ctxHeight, borderColor, '#FFFFFF', borderWidth, 6);
        awt.drawLine(0, 35, ctxWidth, 35, borderColor, 1);
        awt.drawLine(0, 42, ctxWidth, 42, borderColor, 1);
        awt.drawString("Copyright (c) 2015 CodePug.com All Rights Reserved", 70, ctxHeight - 7, '#FFFFFF', 6, true);
        awt.drawString(title, 14, 18, borderColor, 10);
        awt.drawString(message, 14, 48, borderColor, 10, false, ctxWidth);
        drawDoor(doorLeft, ctxWidth, ctxHeight, borderColor, borderWidth);
    }

    function drawDoor(doorLeft, ctxWidth, ctxHeight, borderColor, borderWidth) {
        awt.drawRect(doorLeft, 35, ctxWidth - doorLeft, ctxHeight - 35, borderColor, '#EEEEEE', borderWidth, 6);
        awt.drawRect(doorLeft + 9, 60, 40, 40, '#CCCCCC', '#CCCCCC');
        for (var i = 0; i < 8; i++) {
            awt.drawLine(doorLeft + 15 + 4 * i, 65 + 2 * i, doorLeft + 15 + 4 * i, 95 - 2 * i, '#FFFFFF', 1);
            awt.drawLine(doorLeft + 15 + 4 * i - 2, 95 - 2 * i, doorLeft + 15 + 4 * i, 95 - 2 * i, '#FFFFFF', 1);
        }
        awt.drawRect(ctxWidth - borderWidth / 2 + 1, 60, borderWidth / 2, 40, borderColor, borderColor);
    }
} </script> </code>