Joomla Templates Club 406,261 posts

[wlfmarcus Friend wlfmarcusJoin date: March 2009Posts: 58Downloads:0Uploads:6 Thanks: 5]

#140720

Hi,
i can i put two lateral banner?
i want to put banner on the right and on the left of the site and in centre of site, and it is beautifull if banner scroll whith the page but is is no necessary.

like this:

Thanks

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#303770

HI wlfmarcus,

I have example for banner on the right ,you can reference.

Open index.php, copy code to before </body>


<script type="text/javascript">

function f_clientWidth() {
return f_filterResults (
window.innerWidth ? window.innerWidth : 0,
document.documentElement ? document.documentElement.clientWidth : 0,
document.body ? document.body.clientWidth : 0
);
}
function f_clientHeight() {
return f_filterResults (
window.innerHeight ? window.innerHeight : 0,
document.documentElement ? document.documentElement.clientHeight : 0,
document.body ? document.body.clientHeight : 0
);
}
function f_scrollLeft() {
return f_filterResults (
window.pageXOffset ? window.pageXOffset : 0,
document.documentElement ? document.documentElement.scrollLeft : 0,
document.body ? document.body.scrollLeft : 0
);
}
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
</script>
<script type="text/javascript">
var positionFooter;
var positionRight = 0;
var widthAds = 110;
var heightAds = 200;
</script>

<div id="AdsRight">

<p>This is your banner</p>

</div>

<script type="text/javascript">
var div = document.getElementById('divPositionRightBannerFloat');
if(div!=null)
positionRight = div.offsetTop;

document.getElementById('AdsRight').style.display = "block";
var yy = 0;
var toptop=0;
var beforeTop = 0;

function ShowAds()
{
yy = f_clientWidth() - widthAds - 24;//padding left
toptop = (f_scrollTop() - beforeTop)/8;
beforeTop = toptop + beforeTop + 3;

if(beforeTop < 5)
document.getElementById('AdsRight').style.top = f_scrollTop() + 'px';
else
document.getElementById('AdsRight').style.top = beforeTop + 'px';

beforeTop = parseInt(document.getElementById('AdsRight').style.top.substring(0,document.getElementById('AdsRight').style.top.length - 2));

document.getElementById('AdsRight').style.left = yy + 'px';

document.getElementById('AdsRight').style.display = "block";

if(beforeTop < positionRight + heightAds)
document.getElementById('AdsRight').style.display = "none";

var divFooter = document.getElementById('divPositionFloatBannerFooter');
if(divFooter!=null)
positionFooter = divFooter.offsetTop;

if(beforeTop > positionFooter + heightAds)
document.getElementById('AdsRight').style.display = "none";

//document.getElementById('AdsRight').innerHTML =beforeTop+ 'dsd'+positionRight +'-----' + toptop + '-------' + f_scrollTop() + ' --- --';

if(f_clientWidth()<= 800)
document.getElementById('AdsRight').style.display = "none";

setTimeout('ShowAds()', 50);
}
ShowAds();

</script>


and copy style into template.css


#AdsRight{
left: 500px;
top: 100px;
z-index: 9999;
position: absolute;
width: 110px;
height: 200px;
display: block !important;
background: red;
}


Good luck

1 user says Thank You to Css Magician for this useful post

1. wlfmarcus

[wlfmarcus Friend wlfmarcusJoin date: March 2009Posts: 58Downloads:0Uploads:6 Thanks: 5]

#303813

Thank you!
How i can make banner also on the left?
And it is possible make that banner if cover site, is deleted? because on a small monitor is possible.

Thank

[Author]

Posts