The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

"Randomize your forum banner" not displaying banner in correct position

4 posters

Go down

In progress "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 20th 2018, 6:35 am

https://help.forumotion.com/t138806-randomize-your-forum-banner

I am using the above tutorial on ModernBB. The theme I am using is http://demo.nicetheme.com/forum?theme_id=213853

Using the tutorial makes my banners go to the right of the page, all messed up.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by tikky February 20th 2018, 9:02 am

Hey,
Change your code to
Code:
var banner = new Array();
 
banner[0]='http://i38.servimg.com/u/f38/18/21/60/73/b010.png';
banner[1]='https://i62.servimg.com/u/f62/19/61/71/04/banner16.jpg';
banner[2]='http://i38.servimg.com/u/f38/18/21/60/73/b110.png';
banner[3]='http://i38.servimg.com/u/f38/18/21/60/73/b210.png';
banner[4]='https://i62.servimg.com/u/f62/19/61/71/04/banner18.jpg';
banner[5]='http://i38.servimg.com/u/f38/18/21/60/73/b310.png';
 
document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)]; setInterval("document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

Thanks,
"Randomize your forum banner" not displaying banner in correct position  1f425
tikky
tikky
Forumember

Posts : 856
Reputation : 155
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 20th 2018, 9:23 am

pedxz wrote:Hey,
Change your code to
Code:
var banner = new Array();
 
banner[0]='http://i38.servimg.com/u/f38/18/21/60/73/b010.png';
banner[1]='https://i62.servimg.com/u/f62/19/61/71/04/banner16.jpg';
banner[2]='http://i38.servimg.com/u/f38/18/21/60/73/b110.png';
banner[3]='http://i38.servimg.com/u/f38/18/21/60/73/b210.png';
banner[4]='https://i62.servimg.com/u/f62/19/61/71/04/banner18.jpg';
banner[5]='http://i38.servimg.com/u/f38/18/21/60/73/b310.png';
 
document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)]; setInterval("document.getElementById('logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

Thanks,
"Randomize your forum banner" not displaying banner in correct position  1f425

I have two banners in rotation, this doesn't seem to work at all.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 22nd 2018, 1:02 am

Bump.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by tikky February 22nd 2018, 7:59 am

change to:
Code:
(function() {
  var BannerRotator = {
    images : [
      'http://i21.servimg.com/u/f21/18/21/60/73/free10.png',
      'http://i21.servimg.com/u/f21/18/21/60/73/logo10.png'
    ],

    start_delay : 5000,
    duration : 5000,
    height : 'auto',

    fade_image : true,
    fade_speed : 1200,
    
    keep_initial : true,
    remember_position : true,
    preload : true,

    // technical data below
    index : -1,
    logo : null,
    
    // increment the index and display the next image in rotation after a small delay
    next : function(ms) {
      if (ms === undefined) ms = FA.BannerRotator.duration;

      window.setTimeout(function() {
        if (++FA.BannerRotator.index >= FA.BannerRotator.images.length) FA.BannerRotator.index = 0; // reset index when it exceeds "images" length
        if (FA.BannerRotator.remember_position) my_setcookie('fa_banner_index', FA.BannerRotator.index); // remember the last banner shown
        
        // fade banner in and out
        if (FA.BannerRotator.fade_image) {
          $(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed, function() {
            FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index]; // set next banner
            $(this).fadeIn(FA.BannerRotator.fade_speed, FA.BannerRotator.next); // fade it in
          });
        }

        // default rotation
        else {
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
          FA.BannerRotator.next();
        }
      }, ms);
    },
    
    // initial start up to get the correct logo node and setup some other settings
    init : function() {
      var logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo'),
          index = my_getcookie('fa_banner_index');
          
      if (logo) {
        FA.BannerRotator.logo = logo.tagName == 'IMG' ? logo : logo.firstChild;
        FA.BannerRotator.logo.style.height = FA.BannerRotator.height;
        
        if (FA.BannerRotator.keep_initial) FA.BannerRotator.images[FA.BannerRotator.images.length] = FA.BannerRotator.logo.src;
        if (FA.BannerRotator.remember_position && index) {
          FA.BannerRotator.index = +index;
          FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index] || FA.BannerRotator.images[0];
        }
        
        FA.BannerRotator.next(FA.BannerRotator.start_delay);
      } else if (window.console && window.console.warn) {
        console.warn('Your forum version is not optimized for this plugin');
      }
    }
  };
  
  if (!window.FA) FA = {};
  if (!FA.BannerRotator) {
    FA.BannerRotator = BannerRotator;
    
    if (FA.BannerRotator.preload) {
      for (var i = 0, j = FA.BannerRotator.images.length, img; i < j; i++) {
        img = document.createElement('IMG');
        img.src = FA.BannerRotator.images[i];
      }
    }
    
    $(FA.BannerRotator.init);
  }
}());
by @Ange Tuteur
tikky
tikky
Forumember

Posts : 856
Reputation : 155
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 22nd 2018, 8:45 am

Hmm, that seems to do a banner slideshow. Is it possible for the banner to change randomly upon refreshing the forum only?

Thanks again.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 23rd 2018, 12:01 pm

Bump.

My forum banner size is 2560x605. I have three of them that I would like in rotation. The tutorial works in the OP, but they're off centred and all to the right of the page.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 25th 2018, 1:40 am

Bump.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 26th 2018, 5:35 am

Hardcore Gamer wrote:My forum banner size is 2560x605. I have three of them that I would like in rotation. The tutorial works in the OP, but they're off centred and all to the right of the page.

Bump.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 27th 2018, 7:42 am

Bump.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by mpelmmc February 27th 2018, 2:28 pm

Hello @Hardcore Gamer

Please go:
ACP(Admin Control Panel) > Modules > HTML & JAVASCRIPT > Javascript codes management > Create a new Javascript
  • Title: whichever you want
  • Position: "Randomize your forum banner" not displaying banner in correct position  Checkb10 All the pages
  • Javascript code:
    Code:
    $(function(){   
      var banner = new Array();
     
    //########################## EDITABLE ZONE ##################################
      var segundosDesfile = 5; //The seconds it takes to the banner to change to the following banner
      var random = false; //Change to -true- if you want that the banners change be automatic
      var speedTransition = "slow"; //You can change to -fast- the transition effect
     
      banner[0] = "URL_BANNER_1";
      banner[1] = "URL_BANNER_2";
      //You can add more...
    //########################## END EDITABLE ZONE #############################
     
      var i_act = 0;
      var sel = "img#i_logo, a#logo img, a#pun-logo img";
      $(sel).attr("src", banner[random ? Math.floor(Math.random() * banner.length) : i_act]);
      setInterval(function() { 
          $(sel).fadeOut(speedTransition,function(){
            $(sel).load(function(){
                $(sel).fadeIn();
            });
            $(sel).attr("src", banner[random ? Math.floor(Math.random() * banner.length) : ++i_act]);
          }); 
          if(!random && i_act == banner.length-1) i_act = -1;
      }, segundosDesfile * 1000); 
    });

Please let me know if this works for you or if you have any doubt so we can solve it Smile

Greetings.
mpelmmc
mpelmmc
Helper
Helper

Male Posts : 1089
Reputation : 170
Language : English and Spanish

https://help.forumotion.com/

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 28th 2018, 1:38 am

@mpelmmc Hi there, the header seems to be way off still. I will send you a screenshot and my forum link through PM.

EDIT: I'd also like it if the banner changes when refreshing the page, and not a slideshow.

Thanks for your help.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by mpelmmc February 28th 2018, 8:00 pm

Hello,

Please install the code I gave you in your forum in order to try to make it fit into your forum. I don't see it installed and therefore I cannot adjust it via CSS.

Also, I'd be useful if you could explain or provide screenshots about in what part you want of the header to be, this way we would give you a faster answer Wink.

Greetings.
mpelmmc
mpelmmc
Helper
Helper

Male Posts : 1089
Reputation : 170
Language : English and Spanish

https://help.forumotion.com/

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 28th 2018, 10:57 pm

Hmm, I can send you a screenshot of what it is meant to look like through DM. I can't really keep the code up for too long as it ruins the whole forum and members will start to ask what's happening/it will look unprofessional.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by mpelmmc February 28th 2018, 11:19 pm

Okay, I see what you mean.

I'm afraid I can't help with this because the way you want to edit the banner is meant to through a more advanced CSS and javascript knowledge that's really beyond me, so I think I can't help you any further than I did.

I'm sorry.
mpelmmc
mpelmmc
Helper
Helper

Male Posts : 1089
Reputation : 170
Language : English and Spanish

https://help.forumotion.com/

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer February 28th 2018, 11:23 pm

https://help.forumotion.com/t138806-randomize-your-forum-banner

This code pretty much works, but the header just isn't aligned and centred properly in the middle.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by SLGray March 1st 2018, 12:59 am

Are the banners all the same size and sized correctly for the area of the forum?


"Randomize your forum banner" not displaying banner in correct position  Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51172
Reputation : 3507
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer March 1st 2018, 1:11 am

SLGray wrote:Are the banners all the same size and sized correctly for the area of the forum?

All the banners are 2560x605, yes, all the same size.


Last edited by Hardcore Gamer on March 19th 2018, 2:31 am; edited 1 time in total
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer March 2nd 2018, 7:35 am

I am starting to think maybe this code works better in templates? Is that possible, would that be a better way?
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer March 4th 2018, 6:21 am

Bump.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer March 5th 2018, 10:28 am

Another bump.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer March 7th 2018, 11:25 am

Bump.

I'm sure someone with the knowledge will see this one day and will be willing to help. Thanks.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer March 9th 2018, 4:58 am

Bump.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer March 16th 2018, 9:28 am

Hardcore Gamer wrote:Bump.

I'm sure someone with the knowledge will see this one day and will be willing to help. Thanks.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer March 18th 2018, 3:32 am

Hardcore Gamer wrote:Bump.

I'm sure someone with the knowledge will see this one day and will be willing to help. Thanks.

This code really needs fixing for ModernBB. Sad
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by tikky March 18th 2018, 1:34 pm

Try:

Code:
$(function() {
    var images = ['http://78.media.tumblr.com/6e79dd6dbfa7248e60a48ba9c36c4a7d/tumblr_nfvqpd8cgr1qzeylbo1_1280.gif', 'https://i.pinimg.com/originals/2e/35/95/2e359568d36c711612bdde426a28a51f.gif'];
    $('.headerbar').css({'background-image': 'url(' + images[Math.floor(Math.random() * images.length)] + ')'});
  });
tikky
tikky
Forumember

Posts : 856
Reputation : 155
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer March 19th 2018, 2:42 am

WOW! That code actually works. I can't believe it. Thank you.

The only issue I find is that upon refreshing, sometimes the transition between banners is jarring and not instant. I'm not sure if it's possible to fix that? Like, sometimes when I hit the refresh button, the banner doesn't change to a new one...

Seriously, thank you again.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

In progress Re: "Randomize your forum banner" not displaying banner in correct position

Post by Hardcore Gamer March 21st 2018, 9:26 am

This is pretty much solved, honestly. The code works fine.

I think one of the staff members should update the tips & tricks thread and use the above code for ModernBB.
avatar
Hardcore Gamer
Forumember

Male Posts : 524
Reputation : 4
Language : English

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum