Open up your template`s index.php file in any text editor then make the following changes:
1. Right before tag add
Code: Select all
<!-- Floating Object container \-->
<script type="text/javascript">
var isDOM, floaterObj;
var isNS, pageHeight;
var paddingX, paddingY, scrollTop, currentY, targetY, A, B, C, D;
var slideTime;
/*
h - height in pixel of the floating object
x - padding in pixel from the left side of floating object to the left side of browser window
y - padding in pixel from the top side of floating object to the top side of browser window
z - slide time in milisecond
*/
function setUp(h, x, y, z) {
if (document.getElementById) {
isDOM = true;
floaterObj = document.getElementById("floater").style;
} else {
isDOM = false;
floaterObj = document.floater;
}
if (navigator.appName == 'Netscape') {
isNS = true;
} else {
isNS = false;
}
paddingX = x;
paddingY = y;
slideTime = z;
floaterObj.left = paddingX + (isDOM ? 'px' : '');
floaterObj.top = '-' + h + (isDOM ? 'px' : '');
window.onresize = refreshValues;
window.setInterval("placeFloater()", 10);
refreshValues();
}
function refreshValues() {
if (isNS) {
pageHeight = window.innerHeight - 20;
} else {
pageHeight = document.body.clientHeight;
}
placeFloater();
}
function placeFloater() {
if (isNS) {
scrollTop = window.pageYOffset;
} else {
scrollTop = document.body.scrollTop;
}
currentY = parseInt(floaterObj.top);
mainTrigger();
}
function mainTrigger() {
var newTargetY = scrollTop + paddingY;
if ( currentY != newTargetY ) {
if ( newTargetY != targetY ) {
targetY = newTargetY;
floatStart();
}
animator();
}
}
function floatStart() {
var now = new Date();
A = targetY - currentY;
B = Math.PI / ( 2 * slideTime );
C = now.getTime();
if (Math.abs(A) > pageHeight) {
D = A > 0 ? targetY - pageHeight : targetY + pageHeight;
A = A > 0 ? pageHeight : -pageHeight;
} else {
D = currentY;
}
}
function animator() {
var now = new Date();
var newY = A * Math.sin( B * ( now.getTime() - C ) ) + D;
newY = Math.round(newY);
if (( A > 0 && newY > currentY ) || ( A < 0 && newY < currentY )) {
floaterObj.top = newY + (isDOM ? 'px' : '');
}
}
</script>
<!-- Floating Object container /-->
Code: Select all
<body onload="setUp(60, 15, 15, 1500)">
- * First parameter is the height in pixel of the floating module
- * Second parameter is the padding in pixel from the left side of floating module to the left side of browser window
- * Third parameter is the padding in pixel from the top side of floating module to the top side of browser window
- * Fourth parameter is the slide time in milisecond for floating module to slide to the predefined position when page is scrolled
Code: Select all
<!-- Floating Object container \-->
<div id="floater" name="floater" style="position: absolute; z-index: 1000">
<!-- Banner Module code \-->
<?php if (mosCountModules('banner')) mosLoadModules('banner'); ?>
<!-- Banner Module code /-->
</div>
<!-- Floating Object container /-->
4. Save then upload the modified template`s index.php file to your server overwrite the original one. Now, login to your Joomla administration panel and configure a module to show at banner position then refresh the frontend to see the difference.
I have just tested this mod in FireFox and IE only. If any of you see that it does not work on your favorite browser, please feel free to post.
Any recommendation is appreciated.