Monthly Archives: October 2011

It’s turning into a monster!

Posted on 22 October 2011 | Leave a comment

I may be getting over-enthusiastic about the JavaScript piece I published earlier, as it is now turning into something bigger and scarier than I envisaged before. The purpose of it remains educational, so I’ve started a small project (Java Server Faces; what else?) to put it through its pace, and here are a couple of screenshots showing the result.

The “Search for jobs” dialog is automatically registered for automatic positioning in the middle when it is shown for the first time, and events (onkeyup, dialog-specific events, etc.) are handled by the caller by a system of call-back.

I’m facing the dilemma of whether to block events on the page behind the dialog when it is shown.

image

Also notice the highlighting of the line where the mouse pointer is positioned.

image

Now, back to work.

→ Leave a comment

Posted in General

Potentially useful JavaScript for floating DIV dialogs

Posted on 19 October 2011 | Leave a comment

I am not completely new to JavaScript (previous bits here, here, and there), but this is the first time I’m having to deal with floating DIVs as dialogs. So, from my little bit of experimenting came the following. If you are after something lighter than jQuery UI, this may prove useful to you.

<html>
    <head>
        <script type="text/javascript">
        if (undefined === DialogJS) {
            var DialogJS = (function () {

                var dialogs = {};

                function showAsDialog(elementId, ownerElementId) {
                    var element = document.getElementById(elementId);
                    var ownerElement =
                        (null !== ownerElementId)
                            ? document.getElementById(ownerElementId)
                            : document.documentElement;
                    if ((null !== element) && (null !== ownerElement)) {
                        dialogs[elementId] = { element: element, ownerElement: ownerElement };
                        dialogs[elementId].element.style.display = "block";
                    }

                    centerDialogs();
                }

                function hide(elementId) {
                    if (undefined === dialogs[elementId]) {
                        return;
                    }
                    dialogs[elementId].element.style.display = "none";
                }

                function centerDialogs() {
                    for (var x in dialogs) {
                        centerDialog(dialogs[x]);
                    }
                }

                function centerDialog(dialog) {
                    if (null === dialog) {
                        return;
                    }

                    var parentWidth = dialog.ownerElement.clientWidth;
                    var parentLeft = dialog.ownerElement.offsetLeft;
                    if (parentWidth > document.documentElement.clientWidth) {
                        parentWidth = document.documentElement.clientWidth;
                        parentLeft = 0;
                    }

                    var parentHeight = dialog.ownerElement.clientHeight;
                    var parentTop = dialog.ownerElement.offsetTop;
                    if (parentHeight > document.documentElement.clientHeight) {
                        parentHeight = document.documentElement.clientHeight;
                        parentTop = 0;
                    }

                    var x = 0.5 * (parentWidth - dialog.element.clientWidth) + parentLeft;
                    var y = 0.5 * (parentHeight - dialog.element.clientHeight) + parentTop;

                    if (x < dialog.ownerElement.offsetLeft) {
                        x = dialog.ownerElement.offsetLeft;
                    }
                    if (y < dialog.ownerElement.offsetTop) {
                        y = dialog.ownerElement.offsetTop;
                    }

                    dialog.element.style.position = "absolute";
                    dialog.element.style.left = x + "px";
                    dialog.element.style.top = y + "px";
                }

                return {
                    showAsDialog: showAsDialog,
                    hide: hide,
                    centerDialogs: centerDialogs
                };
            })();
        }

        window.onresize = DialogJS.centerDialogs;
        </script>
    </head>
    <body>
        <input onclick="DialogJS.showAsDialog("dialog1", "page")" value="Show Dialog" type="button">
        <input onclick="DialogJS.hide("dialog1")" value="Hide Dialog" type="button">
        <div style="border-bottom: gray 1px solid; border-left: gray 1px solid; margin: auto; width: 600px; height: 700px; border-top: gray 1px solid; border-right: gray 1px solid" id="page">THIS IS THE CONTAINER <div style="border-bottom: black 1px solid; border-left: black 1px solid; background-color: antiquewhite; width: 100px; display: none; height: 100px; border-top: black 1px solid; border-right: black 1px solid" id="dialog1">THIS IS THE DIALOG </div> </div>
    </body>
</html>

→ Leave a comment

Posted in General