Miscellaneous Hacks - Floating notice box in forumhome.

This "Mod" will allow you to have a floating notice box in your Forumhome, however it can easily be adapted to show wherever you like!

The original javascript for the float and the box are from here http://www.jtricks.com/javascript/na.../floating.html all the information here does is help you understand where to put the code and how to use it etc

Go to AdminCp>Style Manager>YOUR STYLE>Header and underneath

PHP Code:

$ad_headerEnd 


add this (currently it is set to only show to unregistered users)

PHP Code:

<!-- float div -->
<if condition="THIS_SCRIPT == 'index' AND is_member_of($bbuserinfo,1)"><script type="text/javascript"><!--
/* Script by: www.jtricks.com
 * Version: 20071017
 * Latest version:
 * www.jtricks.com/javascript/navigation/floating.html
 */
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
    targetX: -290,
    targetY: 90,

    hasInner: typeof(window.innerWidth) == 'number',
    hasElement: typeof(document.documentElement) == 'object'
        && typeof(document.documentElement.clientWidth) == 'number',

    menu:
        document.getElementById
        ? document.getElementById(floatingMenuId)
        : document.all
          ? document.all[floatingMenuId]
          : document.layers[floatingMenuId]
};

floatingMenu.move = function ()
{
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}

floatingMenu.computeShifts = function ()
{
    var de = document.documentElement;

    floatingMenu.shiftX =  
        floatingMenu.hasInner  
        ? pageXOffset  
        : floatingMenu.hasElement  
          ? de.scrollLeft  
          : document.body.scrollLeft;  
    if (floatingMenu.targetX < 0)
    {
        floatingMenu.shiftX +=
            floatingMenu.hasElement
            ? de.clientWidth
            : document.body.clientWidth;
    }

    floatingMenu.shiftY = 
        floatingMenu.hasInner
        ? pageYOffset
        : floatingMenu.hasElement
          ? de.scrollTop
          : document.body.scrollTop;
    if (floatingMenu.targetY < 0)
    {
        if (floatingMenu.hasElement && floatingMenu.hasInner)
        {
            // Handle Opera 8 problems
            floatingMenu.shiftY +=
                de.clientHeight > window.innerHeight
                ? window.innerHeight
                : de.clientHeight
        }
        else
        {
            floatingMenu.shiftY +=
                floatingMenu.hasElement
                ? de.clientHeight
                : document.body.clientHeight;
        }
    }
}

floatingMenu.calculateCornerX = function()
{
    if (floatingMenu.targetX != 'center')
        return floatingMenu.shiftX + floatingMenu.targetX;

    var width = parseInt(floatingMenu.menu.offsetWidth);

    var cornerX =
        floatingMenu.hasElement
        ? (floatingMenu.hasInner
           ? pageXOffset
           : document.documentElement.scrollLeft) + 
          (document.documentElement.clientWidth - width)/2
        : document.body.scrollLeft + 
          (document.body.clientWidth - width)/2;
    return cornerX;
};

floatingMenu.calculateCornerY = function()
{
    if (floatingMenu.targetY != 'center')
        return floatingMenu.shiftY + floatingMenu.targetY;

    var height = parseInt(floatingMenu.menu.offsetHeight);

    // Handle Opera 8 problems
    var clientHeight = 
        floatingMenu.hasElement && floatingMenu.hasInner
        && document.documentElement.clientHeight 
            > window.innerHeight
        ? window.innerHeight
        : document.documentElement.clientHeight

    var cornerY =
        floatingMenu.hasElement
        ? (floatingMenu.hasInner  
           ? pageYOffset
           : document.documentElement.scrollTop) + 
          (clientHeight - height)/2
        : document.body.scrollTop + 
          (document.body.clientHeight - height)/2;
    return cornerY;
};

floatingMenu.doFloat = function()
{
    // Check if reference to menu was lost due
    // to ajax manipuations
    if (!floatingMenu.menu)
    {
        menu = document.getElementById
            ? document.getElementById(floatingMenuId)
            : document.all
              ? document.all[floatingMenuId]
              : document.layers[floatingMenuId];

        initSecondary();
    }

    var stepX, stepY;

    floatingMenu.computeShifts();

    var cornerX = floatingMenu.calculateCornerX();

    var stepX = (cornerX - floatingMenu.nextX) * .07;
    if (Math.abs(stepX) < .5)
    {
        stepX = cornerX - floatingMenu.nextX;
    }

    var cornerY = floatingMenu.calculateCornerY();

    var stepY = (cornerY - floatingMenu.nextY) * .07;
    if (Math.abs(stepY) < .5)
    {
        stepY = cornerY - floatingMenu.nextY;
    }

    if (Math.abs(stepX) > 0 ||
        Math.abs(stepY) > 0)
    {
        floatingMenu.nextX += stepX;
        floatingMenu.nextY += stepY;
        floatingMenu.move();
    }

    setTimeout('floatingMenu.doFloat()', 20);
};

// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
    if(typeof element[listener] != 'function' || 
       typeof element[listener + '_num'] == 'undefined')
    {
        element[listener + '_num'] = 0;
        if (typeof element[listener] == 'function')
        {
            element[listener + 0] = element[listener];
            element[listener + '_num']++;
        }
        element[listener] = function(e)
        {
            var r = true;
            e = (e) ? e : window.event;
            for(var i = element[listener + '_num'] -1; i >= 0; i--)
            {
                if(element[listener + i](e) == false)
                    r = false;
            }
            return r;
        }
    }

    //if handler is not already stored, assign it
    for(var i = 0; i < element[listener + '_num']; i++)
        if(element[listener + i] == handler)
            return;
    element[listener + element[listener + '_num']] = handler;
    element[listener + '_num']++;
};

floatingMenu.init = function()
{
    floatingMenu.initSecondary();
    floatingMenu.doFloat();
};

// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
    floatingMenu.computeShifts();
    floatingMenu.nextX = floatingMenu.calculateCornerX();
    floatingMenu.nextY = floatingMenu.calculateCornerY();
    floatingMenu.move();
}

if (document.layers)
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
    floatingMenu.init();
    floatingMenu.addEvent(window, 'onload',
        floatingMenu.initSecondary);
}

//--></script><script type="text/javascript"><!--
/* Script by: www.jtricks.com
 * Version: 20080801
 * Latest version:
 * www.jtricks.com/javascript/navigation/floating_close.html
 */
floatingMenu.hide = function()
{
    floatingMenu.menu.style.display='none';
    return false;
}

floatingMenu.show = function()
{
    floatingMenu.menu.style.display='block';
    return false;
}
//--></script>
</if>
<!-- float div end --> 


Now go to Headinclude and right at the very bottom add

PHP Code:

<if condition="THIS_SCRIPT == 'index' AND is_member_of($bbuserinfo,1)"><<div id="floatdiv" style="   
    position:absolute;   
    width:200px;height:50px;left:0px;top:0px;   
    padding:16px;background:#FFFFFF;   
    border:2px double #2266AA">   
This is a floating javascript menu.   
</div>  </if> 


the reason for capturing the SCRIPT and the USERGROUP in both places is to prevent a page script error (denoted by a little yellow triangle at the bottom left of your browser)

I used a little css to jazz mine up, again go to your style>Main CSS and in the additional CSS Definitions add this

PHP Code:

/* ***** Notice colours ***** */
.notice,{padding:.8em;margin-bottom:1.6em;border:2px solid #ddd;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.notice a {color:#514721; background:none; padding:0; margin:0; } 


now in your headinclude change this

PHP Code:

<div id="floatdiv" style="   
    position:absolute;   
    width:200px;height:50px;left:0px;top:0px;   
    padding:16px;background:#FFFFFF;   
    border:2px solid #2266AA"> 


for this

PHP Code:

<div id="floatdiv" style="position:absolute" class="notice"><img src="images/statusicon/announcement_new.gif" alt=""/> 


And thats it, you should now be able to see the floating box with your message when you aren't logged in at your forumhome.

I'm not a coder but will help as much as i can with problems on this!

AS THERE IS NO FILE TO DOWNLOAD IF YOU USE THIS PLEASE MARK AS INSTALLED

Support will be given to those that have marked this installed!

[Simon Lloyd]

Glad to be of service!

[titodj]

Originally Posted by Simon Lloyd

Exactly like that

<if condition="THIS_SCRIPT == 'index' AND is_member_of($bbuserinfo,1,4,7,8)">

Thank you !!:up:

[titodj]

If they "Hide it" do you have a way to control how often comes back? Does it show in every new page?

[Simon Lloyd]

AFAIK it will reappear with page refresh, i haven't used this in years , just give it a try in a different browser.

[titodj]

Thank you again, I have two questions.

I cant figure out how to place it in the center of the page.

And cant find how to place a "hide" button on it?

[Simon Lloyd]

I did this a few years ago, if i can find the code for adding a button to get rid of it...etc i'll post it here

[blackberry]

figured out.. worked like charm thanks