Jump to content

Archived

This topic is now archived and is closed to further replies.

spyke01

Help with IPB v2 style new messages box

Recommended Posts

hi guys, im building a forum, and when a new message arrives, i have it do a popup window letting the person know, as of sp2 though, popups are usually disabled.

IPB v2 corrects this by doing a div(?) that appears in the middle of the screen that can be moved around and such, it lets you read the new message, and other things,how can this be done, i believe it has to do with css, but i could be wrong and it be javascript.

If no one knows, i will pull their system apart and figure it out, that way i know what happens and then ill post it here.

But, if anyone knows how it is done, please post it here.

Share this post


Link to post
Share on other sites
It's DHTML. You'd create a js function that would be called when there's a new message, and this would position the "window" and make it visible. You'd need to use mouse capture to allow it to be moved. Also, you'd need a "close" button that would make it invisible again.

Without the mouse capture it's really simple, and basically revolves around myWindowElement.style.visibility = "visible"

Share this post


Link to post
Share on other sites
ok, figured it out, heres my html file:
[code]
<html>
    <head>
        <script language="javascript" src="dom-drag.js"></script>
        <link rel="stylesheet" type="text/css" href="http://forum.fasttracksites.com/stylesheets/FTSOrange/main.css" />
        <style type="text/css">
            #pmbox {        
                height:200px;
                width:400px;        
                }
        
        </style>
    </head>
    <body>
        <div id="pmbox" class="forumborder" style="position:absolute; text-align: left; z-index: 99; left: 376px; top: 151px;">
            <div style="float: right;"><a href="#" onclick='document.getElementById("pmbox").style.display="none"'>[X]</a></div>
            <div id="pmboxHandle" class="title2" title="Click and hold to drag this window" style="cursor: move;">New Private Message Has Arrived</div>
            <div id="pmcontent">
                lorem ipsum dolar. lorem ipsum dolar. lorem ipsum dolar. lorem ipsum dolar. lorem ipsum dolar. lorem ipsum dolar. lorem ipsum dolar. lorem ipsum dolar. lorem ipsum dolar. lorem ipsum dolar. lorem ipsum dolar. lorem ipsum dolar.
            </div>
        </div>
        
        <script language="javascript">
            var thepmboxHandle = document.getElementById("pmboxHandle");
            var thepmbox   = document.getElementById("pmbox");
            Drag.init(thepmboxHandle, thepmbox);
        </script>
    </body>
</html>
[/code]

and heres the dom-drag.js file:
[code]
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/

var Drag = {

    obj : null,

    init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    {
        o.onmousedown    = Drag.start;

        o.hmode            = bSwapHorzRef ? false : true;
        o.vmode            = bSwapVertRef ? false : true;

        o.root = oRoot && oRoot != null ? oRoot : o;

        if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
        if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
        if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
        if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

        o.minX    = typeof minX != 'undefined' ? minX : null;
        o.minY    = typeof minY != 'undefined' ? minY : null;
        o.maxX    = typeof maxX != 'undefined' ? maxX : null;
        o.maxY    = typeof maxY != 'undefined' ? maxY : null;

        o.xMapper = fXMapper ? fXMapper : null;
        o.yMapper = fYMapper ? fYMapper : null;

        o.root.onDragStart    = new Function();
        o.root.onDragEnd    = new Function();
        o.root.onDrag        = new Function();
    },

    start : function(e)
    {
        var o = Drag.obj = this;
        e = Drag.fixE(e);
        var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
        var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
        o.root.onDragStart(x, y);

        o.lastMouseX    = e.clientX;
        o.lastMouseY    = e.clientY;

        if (o.hmode) {
            if (o.minX != null)    o.minMouseX    = e.clientX - x + o.minX;
            if (o.maxX != null)    o.maxMouseX    = o.minMouseX + o.maxX - o.minX;
        } else {
            if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
            if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
        }

        if (o.vmode) {
            if (o.minY != null)    o.minMouseY    = e.clientY - y + o.minY;
            if (o.maxY != null)    o.maxMouseY    = o.minMouseY + o.maxY - o.minY;
        } else {
            if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
            if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
        }

        document.onmousemove    = Drag.drag;
        document.onmouseup        = Drag.end;

        return false;
    },

    drag : function(e)
    {
        e = Drag.fixE(e);
        var o = Drag.obj;

        var ey    = e.clientY;
        var ex    = e.clientX;
        var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
        var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
        var nx, ny;

        if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
        if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
        if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
        if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

        nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
        ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

        if (o.xMapper)        nx = o.xMapper(y)
        else if (o.yMapper)    ny = o.yMapper(x)

        Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
        Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
        Drag.obj.lastMouseX    = ex;
        Drag.obj.lastMouseY    = ey;

        Drag.obj.root.onDrag(nx, ny);
        return false;
    },

    end : function()
    {
        document.onmousemove = null;
        document.onmouseup   = null;
        Drag.obj.root.onDragEnd(    parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
                                    parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
        Drag.obj = null;
    },

    fixE : function(e)
    {
        if (typeof e == 'undefined') e = window.event;
        if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
        if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
        return e;
    }
};
[/code]

i can only hope that this will help other people too

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.