Floating notice box in forumhome.

[Simon Lloyd]

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/navigation/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$ad_headerEndadd this (currently it is set to only show to unregistered users)<!-- 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<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
/* ***** 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<div id="floatdiv" style="
position:absolute;
width:200px;height:50px;left:0px;top:0px;
padding:16px;background:#FFFFFF;
border:2px solid #2266AA">for this<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
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 :D 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]

Great work Simon I was going to suggest that you do this, believe it or not :D 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]

thanks lets try it

Nice Thank You

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 :)

[LeatherNeck]

Just what I needed, thanks :) ****INSTALLED****

[ricardoNJ]

Hi. How can I add a link?

[Simon Lloyd]

Add a link to what? if you mean a html link the like this: <a href="http://www.mysite.com">My Site</a> so it would look like this:<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">
<a href="http://www.mysite.com">My Site</a>
</div> </if>

[wangyu1314]

nice market

[matrex722]

nice work
thanks

[Nocturnal222]

can 4.2 vb versions use this?

[Simon Lloyd]

Yep should be no issue using this :)

[titodj]

How do I add multiple user groups?

($bbuserinfo,1,4,7,8) etc?

[Simon Lloyd]

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

[bnimbhal]

Hi,

I am using vb 4.2 version, can you please update for vb 4.2, and if the procedure is same then plz plz plz explain :

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

As I am not able to find the code in header template $ad_headerEnd

And where is underneath template.

Waiting for your reply

Million Thanks in Advance.

[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-card/7785-sbi-credit-cards.html

[Simon Lloyd]

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

[bnimbhal]

Million thanks

I was looking for this for a long time :)

[Simon Lloyd]

Glad to be of service!

[titodj]

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