Rotating footer sticky banners [Archive]

Letzride

05-05-2020, 08:18 PM

Hey all,

I am super new to VB5 coming from VBcloud.

I would like to recognize my site sponsors by inserting a sticky bottom footer / ad modules where I can rotate through their sponsorship banners every 6-7 seconds. I require that each banner ad be able to still link to their site.

Is this possible? I don't have computer coding skills and very basic knowledge of html.

Thanks to anyone in advance who can point me in the right direction

Letzride

05-07-2020, 04:03 PM

Or if anyone can let me know how to make a sticky ad I could start with that and start trying to work through making this work?

shka

05-07-2020, 06:14 PM

Just a few thoughts about it. There are three points: integration in site/page, make it sticky on footer, fill it with content.

Following is only a prototype with limitations! Web search for "sticky footer (css)" shows dozens of possible solutions (flex, grid, js..) but you have no control over full site/ basic knowledge so I advice you this simple solution.

Sitebuilder (also new features in 5.6.2) limits positioning to content area. But best way for adding a sticky footer is inject your code below all other (also below copyright...)
So go to AdminCP

a. Create new template
Styles/StyleManager/Select Style/Choose Action/Add New Template
Title : stickyfooter
Template : test (for the moment)
Save

b. Add template hook
Products&Hooks/ Manage template hooks/Add new hook

Product : choose vbulletin
Hook is Active : mark yes
Hook Location : choose footer_before_body_end
Title : stickyfooter
Execution Order : 10
Template Name : stickyfooter (same writing as title in a.)
Save

c. Reload any forum page. At the end / last line should be "test". If not there is something wrong, ask in forum.

d. If ok edit the template from a.
Styles/Search in templates/Search for Text "stickyfooter"/Find
Choose the template from style (DblClick or edit)
Replace "test" with
<style>
#spacerforstickyfooter {
height:50px;
background-color:red;
width:100%;
margin-top:20px;
}
#stickycontainer {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
text-align: center;
}
#stickyfooter{
height: 50px;
background-color: green;
width: 50%;
margin: auto;
}
</style>

<div id="spacerforstickyfooter"> spacer with same height like sticky footer </div>

<div id="stickycontainer">
<div id="stickyfooter">
sticky footer content
</div>
</div>
Save

e. Reload a forum page. There should be a green centered footer. Purpose of the red spacer is only that also the copyright scrolls to over the footer.
After that you can delete the background-color-definitions and adjust height/width. (height of spacer-div and container-div should be equal)

f. Replace "sticky footer content" with your content. I don't know if content is some "static pictures" or js-code given by your sponsor or so.

Letzride

05-07-2020, 07:54 PM

This is fantastic - thank you.

Couple issues with it - I have left it up as it is for testing - this is how it looks on my site: www.camarov6.com

- I would like to use this only for mobile devices - how can I modify this to apply only to those?
- I would like to just above it say "FORUM SPONSORS"
- how do I get static ads to rotate within and still link to the sponsors site?
- how can I get rid of that red bit at the very bottom

I really love this - thank you for helping me

--------------- Added 1588888528 at 1588888528 ---------------

I would also like to get rid of the green bar and make it transparent or possibly white.

shka

05-08-2020, 05:52 AM

quote from here
"This is fantastic"

quote from your forum
"so I apologize if it looks a little ugly for a short while"

Ok, I understand. Hmm.. :rolleyes::D

Colors
You can delete lines with background-color or change to transparent or comment it out (last my advice, cause you can enable it or toggle with transparent in future tests)

<style>
#spacerforstickyfooter {
..
// comment out a line with double slash
// background-color:red;
background-color:transparent;
..
}
..
#stickyfooter{
height: 50px;
// comment out a line with double slash
// background-color:green;
background-color:transparent;
width: 50%;
margin: auto;
}
</style>

Mobile and "FORUM SPONSORS"
Remember - it is unusual to detect mobile. Usually you detect a device with a screen with more than or lower than xxx pixels screen width. (small desktop display is in this case the same as a big tablet/ phone display)

Change the code to

<style>
#stickyfootersponsors, #spacerforstickyfooter, #stickycontainer, #stickyfooter {
display: none; // footer not shown by default, only with screen width below
}

@media only screen and (max-width:900px){
#stickyfootersponsors {
width:100%;
margin-top:20px;
text-align: center;
}
#spacerforstickyfooter {
height:50px;
//background-color:red;
background-color:transparent;
width:100%;
margin-top:20px;
}
#stickycontainer {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
text-align: center;
}
#stickyfooter{
height: 50px;
//background-color: green;
background-color: transparent;
width: 50%;
margin: auto;
}
}
</style>

<div id="stickyfootersponsors ">FORUM SPONSORS</div>

<div id="spacerforstickyfooter"> spacer with same height like sticky footer </div>

<div id="stickycontainer">
<div id="stickyfooter">
sticky footer content
</div>
</div>

Adjust the 900 to your preferred value, usual vB-breakpoints are 900, 768, 480, 420, 320. But you can use also every other value.

Content later.

PS: I personally don't like cross postings. :cool:

PPS: In your forum the "I agree" button on private policy message box has same font and background color. Not good for reading. :)

delicjous

05-08-2020, 09:51 AM

The following should work, but you have to hook your new template to footer_before_body_ends!
this hook is needed to have jQuery ready loaded.

You could change the rotationTime from 3000 = 3 seconds to whatever you want.
The # needs to changed!

-href = url to the sponsor
-img src = url to your image(s)

<style>
#delirotatebottombanner {
width: 100%;
min-width: 320px;
max-width: 100%;
}
.delirbb-bannerlist_wrapper {
text-align: center;
position: fixed;
display: block;
bottom: 1px;
left: 0;
right: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
z-index: 99;
}
#delirotatebottombanner ul{
text-align: center;
}
#delirotatebottombanner ul li{
margin-bottom: 10px;
}
@media only screen and (min-width:480px) {
#delirotatebottombanner {
display:none;
}
}
</style>

<div id="delirotatebottombanner">
<div class="delirbb-bannerlist_wrapper">
<ul class="delirbb-bannerlist">

<li><a href="#"><img src="#" /></a></li>


<li class="h-hide"><a href="#"><img src="#" /></a></li>

<li class="h-hide"><a href="#"><img src="#" /></a></li>

</ul>
</div>
<div>

<script>
(function($){
/* you could change the rotation-time here*/
var rotateTime = 3000;

/*Do not change anything below this*/
var drbbintv;
delirotatebottombanner(rotateTime);
function delirotatebottombanner(rotateTime){
var counter = 0,
$delirbb_listItems = $('.delirbb-bannerlist li');
drbbintv = setInterval(function() {
var $delirbb_listItems = $('.delirbb-bannerlist li'),
$delirbb_current = $('.delirbb-bannerlist li:visible'),
$delirbb_next = $delirbb_current.next(),
$delirbb_last = $('.delirbb-bannerlist li').last();
$delirbb_current.slideUp();
$delirbb_next.slideDown();
$delirbb_current.insertAfter( $delirbb_last );
}, rotateTime);
}
$('#delirotatebottombanner').on('mouseenter mouseleave', function( e ){
var mEnt = e.type=='mouseenter';
if(mEnt){
clearInterval(drbbintv);
}else{
delirotatebottombanner(rotateTime);
}
});
})(jQuery);
</script>

Letzride

05-08-2020, 02:56 PM

quote from here
"This is fantastic"

quote from your forum
"so I apologize if it looks a little ugly for a short while"

Ok, I understand. Hmm.. :rolleyes::D

Colors
You can delete lines with background-color or change to transparent or comment it out (last my advice, cause you can enable it or toggle with transparent in future tests)

<style>
#spacerforstickyfooter {
..
// comment out a line with double slash
// background-color:red;
background-color:transparent;
..
}
..
#stickyfooter{
height: 50px;
// comment out a line with double slash
// background-color:green;
background-color:transparent;
width: 50%;
margin: auto;
}
</style>

Mobile and "FORUM SPONSORS"
Remember - it is unusual to detect mobile. Usually you detect a device with a screen with more than or lower than xxx pixels screen width. (small desktop display is in this case the same as a big tablet/ phone display)

Change the code to

Adjust the 900 to your preferred value, usual vB-breakpoints are 900, 768, 480, 420, 320. But you can use also every other value.

Content later.

PS: I personally don't like cross postings. :cool:

PPS: In your forum the "I agree" button on private policy message box has same font and background color. Not good for reading. :)

Sorry didn't mean to cause trouble by cross posting. Just thought it might help get an answer as it is common with the car forums. I could see why maybe it could be more confusing when dealing with coding though.

The change wasn't "ugly" I just meant as I play with it things could go all whacky and maybe break things. It just took 2 weeks to install VB5 between install issues that Vbulletin had and issues with my host. So if I don't let everyone know what's happening I'll start getting emails lol.

Ok, I think I screwed up the coding. I combined your coding and the delicjous and now it doesn't work. This is what I have:

Did I make a small error or did I totally screw it all up? I kinda understand what is happening with the width / margin type commands. The scripts are way in over my head.

As for the consent button, thanks for letting me know. I saw that when there was bugs with the install and thought it was part of that. That will be my next investigation to try and figure out. I am sure it must be a setting somewhere in the style manager...

<style>
#stickyfootersponsors, #spacerforstickyfooter, #stickycontainer, #stickyfooter {
display: none; // footer not shown by default, only with screen width below
}

@media only screen and (max-width:480px){
#stickyfootersponsors {
width:100%;
margin-top:20px;
text-align: center;
}
#spacerforstickyfooter {
height:50px;
//background-color:red;
background-color:transparent;
width:100%;
margin-top:20px;
}
#stickycontainer {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
text-align: center;
}
#stickyfooter{
height: 50px;
//background-color: green;
background-color: transparent;
width: 100%;
margin: auto;
}
}
</style>

<div id="stickyfootersponsors ">FORUM SPONSORS</div>

<div id="spacerforstickyfooter"> spacer with same height like sticky footer </div>

<div id="stickycontainer">
<div id="stickyfooter">

<style>
#delirotatebottombanner {
width: 100%;
min-width: 320px;
max-width: 100%;
}
.delirbb-bannerlist_wrapper {
text-align: center;
position: fixed;
display: block;
bottom: 1px;
left: 0;
right: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
z-index: 99;
}
#delirotatebottombanner ul{
text-align: center;
}
#delirotatebottombanner ul li{
margin-bottom: 10px;
}
@media only screen and (min-width:480px) {
#delirotatebottombanner {
display:none;
}
}
</style>
<div id="delirotatebottombanner">
<div class="delirbb-bannerlist_wrapper">
<ul class="delirbb-bannerlist">

<li><a href="#"><img src="#" /></a></li>


<li class="h-hide"><a href="https://www.turtlewax.com"><img src="/images/sponsorship/Turtle Wax Sponsorship 2019.png" /></a></a></li>
<li class="h-hide"><a href="https://www.amsoil.com/offers/index.aspx/?zo=1907169"><img src="images/sponsorship/Amsoil Sponsorship.jpg" /></a></a></a></li>
<li class="h-hide"><a href="http://www.rockauto.com/?a=camarov6"><img src="/images/sponsorship/RockAuto 285x50.png" /></a></a></a></a></li>

<li class="h-hide"><a href="#"><img src="#" /></a></li>

</ul>
</div>
<div>

<script>
(function($){
/* you could change the rotation-time here*/
var rotateTime = 5000;

/*Do not change anything below this*/
var drbbintv;
delirotatebottombanner(rotateTime);
function delirotatebottombanner(rotateTime){
var counter = 0,
$delirbb_listItems = $('.delirbb-bannerlist li');
drbbintv = setInterval(function() {
var $delirbb_listItems = $('.delirbb-bannerlist li'),
$delirbb_current = $('.delirbb-bannerlist li:visible'),
$delirbb_next = $delirbb_current.next(),
$delirbb_last = $('.delirbb-bannerlist li').last();
$delirbb_current.slideUp();
$delirbb_next.slideDown();
$delirbb_current.insertAfter( $delirbb_last );
}, rotateTime);
}
$('#delirotatebottombanner').on('mouseenter mouseleave', function( e ){
var mEnt = e.type=='mouseenter';
if(mEnt){
clearInterval(drbbintv);
}else{
delirotatebottombanner(rotateTime);
}
});
})(jQuery);
</script>
</div>
</div>

--------------- Added 1588959595 at 1588959595 ---------------

Ok, I made some changes and I have it rotating. Couple of little quirks

- "FORUM SPONSORS" is stuck at the very bottom of the page vs on top of the rotating banners
- Is there anyway to randomly rotate the banners? (if not I am totally cool with them just rotating as is)

This is the code I am now working with:

<style>
#stickyfootersponsors, #spacerforstickyfooter, #stickycontainer, #stickyfooter {
display: none; // footer not shown by default, only with screen width below
}

@media only screen and (max-width:480px){
#stickyfootersponsors {
width:100%;
margin-top:20px;
text-align: center;
}
#spacerforstickyfooter {
height:50px;
//background-color:red;
background-color:transparent;
width:100%;
margin-top:20px;
}
#stickycontainer {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
text-align: center;
}
#stickyfooter{
height: 50px;
//background-color: green;
background-color: transparent;
width: 100%;
margin: auto;
}
}
</style>

<div id="stickyfootersponsors ">FORUM SPONSORS</div>

<div id="spacerforstickyfooter"> spacer with same height like sticky footer </div>

<div id="stickycontainer">
<div id="stickyfooter">
</div>
</div>

<style>
#delirotatebottombanner {
width: 100%;
min-width: 320px;
max-width: 100%;
}
.delirbb-bannerlist_wrapper {
text-align: center;
position: fixed;
display: block;
bottom: 1px;
left: 0;
right: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
z-index: 99;
}
#delirotatebottombanner ul{
text-align: center;
}
#delirotatebottombanner ul li{
margin-bottom: 10px;
}
@media only screen and (min-width:480px) {
#delirotatebottombanner {
display:none;
}
}
</style>
<div id="delirotatebottombanner">
<div class="delirbb-bannerlist_wrapper">
<ul class="delirbb-bannerlist">

<li><a href="https://www.turtlewax.com"><img src="/images/sponsorship/Turtle Wax Sponsorship 2019.png" /></a></a></li>


<li class="h-hide"><a href="https://www.amsoil.com/offers/index.aspx/?zo=1907169"><img src="images/sponsorship/Amsoil Sponsorship.jpg" /></a></a></a></li>
<li class="h-hide"><a href="http://www.rockauto.com/?a=camarov6"><img src="/images/sponsorship/RockAuto 285x50.png" /></a></a></a></a></li>

</ul>
</div>
<div>

<script>
(function($){
/* you could change the rotation-time here*/
var rotateTime = 5000;

/*Do not change anything below this*/
var drbbintv;
delirotatebottombanner(rotateTime);
function delirotatebottombanner(rotateTime){
var counter = 0,
$delirbb_listItems = $('.delirbb-bannerlist li');
drbbintv = setInterval(function() {
var $delirbb_listItems = $('.delirbb-bannerlist li'),
$delirbb_current = $('.delirbb-bannerlist li:visible'),
$delirbb_next = $delirbb_current.next(),
$delirbb_last = $('.delirbb-bannerlist li').last();
$delirbb_current.slideUp();
$delirbb_next.slideDown();
$delirbb_current.insertAfter( $delirbb_last );
}, rotateTime);
}
$('#delirotatebottombanner').on('mouseenter mouseleave', function( e ){
var mEnt = e.type=='mouseenter';
if(mEnt){
clearInterval(drbbintv);
}else{
delirotatebottombanner(rotateTime);
}
});
})(jQuery);
</script>

delicjous

05-08-2020, 03:49 PM

First you should not use blanks in imagefiles!
Second you should not combine the code.

If you want to have an extendend version I could make you an offer for a complete addon.

Letzride

05-08-2020, 03:58 PM

First you should not use blanks in imagefiles!
Second you should not combine the code.

If you want to have an extendend version I could make you an offer for a complete addon.

I think I took the blanks out with the last one I posted?

I also thought this was an extension to the code that shka made to now make the ads rotate?

shka

05-08-2020, 05:57 PM

I also thought this was an extension to the code that shka made to now make the ads rotate?

Alternatively, you can take it. Then remove my code from the template. And for "FORUM SPONSORS" edit delicjous code

<ul class="delirbb-bannerlist">
<div>FORUM SPONSORS</div>

Letzride

05-08-2020, 07:02 PM

Alternatively, you can take it. Then remove my code from the template. And for "FORUM SPONSORS" edit delicjous code

<ul class="delirbb-bannerlist">
<div>FORUM SPONSORS</div>


This is amazing! If I want to move "FORUM SPONSORS" to the left and bold it where would I put:
text-align: left;
font-weight: bold;