Floating notice box in forumhome.
Mod Version: 1.00, by Simon Lloyd
| vB Version: 3.8.x | Rating:  (2 votes - 5.00 average) |
Installs: 18 |
| Released: 23 Nov 2009 | Last Update: Never | Downloads: 0 |
 Not Supported
 Template Edits
Re-usable Code
Translations
|
||
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
add this (currently it is set to only show to unregistered users)
Now go to Headinclude and right at the very bottom add
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
now in your headinclude change this
for this
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!
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
PHP Code:
$ad_headerEnd
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 -->
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>
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; }
PHP Code:
<div id="floatdiv" style="
position:absolute;
width:200px;height:50px;left:0px;top:0px;
padding:16px;background:#FFFFFF;
border:2px solid #2266AA">
PHP Code:
<div id="floatdiv" style="position:absolute" class="notice"><img src="images/statusicon/announcement_new.gif" alt=""/>
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!
Download
No files for download.
Screenshots
