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]

Try adding it under

<div class="ad_global_header">
		{vb:raw ad_location.global_header1}
		{vb:raw ad_location.global_header2}
	</div>
	<hr />

and dont forget that any IF condition needs to be changed from <if.....></if> to <vb:if....></vb:if>

[bnimbhal]

Hi,

Thanks its working

1 more question :

How to implement it on thread and category page.

[Simon Lloyd]

Change all of these

<vb:if condition="THIS_SCRIPT == 'index'

to

<vb:if condition="in_array(THIS_SCRIPT, array('index', 'forumdisplay', 'showthread'))

obviosuly change the script names to suit what you are trying to do.

[bnimbhal]

Hi,

After changing the code Getting error:

Warning: Invalid argument supplied for foreach() in [path]/includes/functions.php on line 3965

vBulletin Message
The following error occurred when attempting to evaluate this template:
%1$s
This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.

[Simon Lloyd]

well it's just that, you've messed up the IF conditional, post it exactly as you've used it in both locations.

[bnimbhal]

I have changed :

<vb:if condition="THIS_SCRIPT == 'index' AND is_member_of($bbuserinfo,1)">

to

<vb:if condition="in_array(THIS_SCRIPT, array('index', 'forumdisplay', 'showthread') AND is_member_of($bbuserinfo,1)">

Please check

[Simon Lloyd]

You are missing a parenthesis, change

<vb:if condition="in_array(THIS_SCRIPT, array('index', 'forumdisplay', 'showthread') AND is_member_of($bbuserinfo,1)">

for

<vb:if condition="in_array(THIS_SCRIPT, array('index', 'forumdisplay', 'showthread')) AND is_member_of($bbuserinfo,1)">

[bnimbhal]

Great

Its working on all Thread and Category

but after scrolling down the page the Ad is not showing, go behind the page.

Please check


http://www.consumercourt.in/credit-card/

http://www.consumercourt.in/credit-c...dit-cards.html

[Simon Lloyd]

Add this to style=".... z-index: 100;

[bnimbhal]

Million thanks

I was looking for this for a long time