Jump to content

Help with IPB v2 style new messages box

spyke01

By spyke01
in CSS Help

 Share

Recommended Posts

spyke01 Member

spyke01

Posted
Posted
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.
Link to comment
Share on other sites
Javizy Newbie

Javizy

Posted
Posted
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"
Link to comment
Share on other sites
spyke01 Member

spyke01

Posted
  • Author
Posted
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
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

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.