Jump to content


Photo

Help with IPB v2 style new messages box


  • Please log in to reply
2 replies to this topic

#1 spyke01

spyke01
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 16 March 2006 - 03:55 PM

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.

[a href="http://www.fasttracksites.com" target="_blank"]Cheap PHP Hosting[/a]

#2 Javizy

Javizy
  • Members
  • PipPipPip
  • Advanced Member
  • 44 posts

Posted 17 March 2006 - 04:07 AM

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"

#3 spyke01

spyke01
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 17 March 2006 - 11:49 PM

ok, figured it out, heres my html file:
<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>

and heres the dom-drag.js file:
/**************************************************
 * 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;
    }
};

i can only hope that this will help other people too

[a href="http://www.fasttracksites.com" target="_blank"]Cheap PHP Hosting[/a]




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users