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!

[Reycer]

nice idea. This sounds like a good idea for an ad banner. Any screenshots?

[Simon Lloyd]

Here you go, but you can see it in action at http://www.thecodecage.com/forumz
Attachment 106592

[Frank Sinatra]

thanks lets try it

[saadessa]

Nice Thank You

[Reycer]

Cool Thanks for this.

[yamahapaul]

Great work Simon I was going to suggest that you do this, believe it or not One question before I install it, which I think I know the answer to but I want to check first, does it take the colour from whatever your standard notice background is, ie default, or do you adjust it to your own preference?

[Simon Lloyd]

Originally Posted by yamahapaul

Great work Simon I was going to suggest that you do this, believe it or not One question before I install it, which I think I know the answer to but I want to check first, does it take the colour from whatever your standard notice background is, ie default, or do you adjust it to your own preference?

If you follow the instructions given and do the CSS part you can choose to have the floating box whatever colour you desire, you can match it to your background, notices.....etc its just a matter of changing the colour in the css.

[Simon Lloyd]

Originally Posted by Frank Sinatra

thanks lets try it

Originally Posted by saadessa

Nice Thank You

Originally Posted by mdelcour

Cool Thanks for this.

Glad it was of some use to you

If you haven't done so don't forget to click installed.

[Abhik]

Installed