The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Background changer

View previous topic View next topic Go down

Solved Background changer

Post by Guest on Fri Aug 28, 2015 10:35 am

Hai there,
I'd like to request a code boost. Ange kindly provided me a banner chooser code not so long ago. (http://help.forumotion.com/t141790-punbb-banner-chooser) I'd like to ask if it is possible to update it, so that the background changes with the banner too? So with the yellow banner would go a yellow background, with the pink banner a pink background and so on.

forum address:
Forum address: tophun.net
Forum bersion: punbb

Thank you!Mr. Green


Last edited by Diana on Fri Aug 28, 2015 2:13 pm; edited 1 time in total

Guest
Guest


Back to top Go down

Solved Re: Background changer

Post by Ange Tuteur on Fri Aug 28, 2015 11:10 am

Hi @Diana,

Try replacing the script with this one.
Code:
$(function() {
  var banners = {
    'default' : {
      banner : 'http://i61.tinypic.com/2rzyq2e.png',
      background : '/bgimage.gif'
    },

    'fdf' : {
      banner : 'http://illiweb.com/fa/fdf/banner-summer15.png',
      background : '/bgimage.gif'
    },

    'esf' : {
      banner : 'http://i1370.photobucket.com/albums/ag257/AppleDrink/socialize_zpsy18zm3gt.png',
      background : '/bgimage.gif'
    }
  },
 
  header = document.getElementsByTagName('HEADER')[0],
  block = document.createElement('DIV'),
  cookie = my_getcookie('faBanner'),
  a, i;
 
  block.id = 'selectBanner';
  block.innerHTML = '<div id="banner-text">Choose a banner :</div>';
  if (cookie) {
    header.style.backgroundImage = 'url(' + banners[cookie].banner + ')';
    document.body.style.backgroundImage = 'url(' + banners[cookie].background + ')';
  }
  for (i in banners) {
    a = document.createElement('A');
    a.href = '#' + banners[i].banner + '|' + banners[i].background;
    a.title = i;
    a.className = 'banner-option banner-' + i.replace(/\s|\.|\?|,|#|'|"/g, '-');
   
    a.onclick = function() {
      var data = $(this).attr('href').slice(1).split('|');

      document.getElementsByTagName('HEADER')[0].style.backgroundImage = 'url(' + data[0] + ')';
      document.body.style.backgroundImage = 'url(' + data[1] + ')';
     
      my_setcookie('faBanner', $(this).attr('title'));
      return false;
    };
   
    block.appendChild(a);
  }
 
  header.appendChild(block);
});

I made some small changes at the top :
Code:
  var banners = {
    'default' : {
      banner : 'http://i61.tinypic.com/2rzyq2e.png',
      background : '/bgimage.gif'
    },

    'fdf' : {
      banner : 'http://illiweb.com/fa/fdf/banner-summer15.png',
      background : '/bgimage.gif'
    },

    'esf' : {
      banner : 'http://i1370.photobucket.com/albums/ag257/AppleDrink/socialize_zpsy18zm3gt.png',
      background : '/bgimage.gif'
    }
  },

Each section contains a "banner" and "background" pair. It's pretty much the same as last time, just a bit bigger with named fields. If you have any questions or it doesn't work let me know. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Background changer

Post by Guest on Fri Aug 28, 2015 12:45 pm

Thank you!!!


But I must have messed up somewhere, because it's not working.Help the nuub... could you look at it, please?

script:

Code:
$(function() {
 var banners = {
  'Deep Blue' : {
  banner : 'http://i61.tinypic.com/2rzyq2e.png',
  background : 'http://i60.tinypic.com/34imwkx.jpg'
  },

  'Champion' : {
  banner : 'http://i57.tinypic.com/2qkj8yu.png',
  background : 'http://i62.tinypic.com/2jurz7.jpg'
  },

  'Thundoria' : {
  banner : 'http://i60.tinypic.com/3009uah.png',
  background : 'http://i62.tinypic.com/2jurz7.jpg'
 
 },

 'Fortune' : {
  banner : 'http://i62.tinypic.com/16gbodw.png',
  background : 'http://i62.tinypic.com/2jurz7.jpg'
  },

  'Ami' : {
  banner : 'http://i62.tinypic.com/29lbtad.png',
  background : 'http://i60.tinypic.com/14l4kye.jpg'
  },

  'Black Dragon' : {
  banner : 'http://i62.tinypic.com/mvqbrd.png',
  background : 'http://i60.tinypic.com/rhra5y.jpg'
 
 },
 'Ascaron' : {
  banner : 'http://i60.tinypic.com/2n71aue.png',
  background : 'http://i62.tinypic.com/2jurz7.jpg'
  },

  'Death' : {
  banner : 'http://i58.tinypic.com/90t009.png',
  background : 'http://i58.tinypic.com/263v4ug.jpg'
  },

}
 
 header = document.getElementsByTagName('HEADER')[0],
 block = document.createElement('DIV'),
 cookie = my_getcookie('faBanner'),
 a, i;
 
 block.id = 'selectBanner';
 block.innerHTML = '<div id="banner-text">Choose a banner :</div>';
 if (cookie) {
  header.style.backgroundImage = 'url(' + banners[cookie].banner + ')';
  document.body.style.backgroundImage = 'url(' + banners[cookie].background + ')';
 }
 for (i in banners) {
  a = document.createElement('A');
  a.href = '#' + banners[i].banner + '|' + banners[i].background;
  a.title = i;
  a.className = 'banner-option banner-' + i.replace(/\s|\.|\?|,|#|'|"/g, '-');
 
  a.onclick = function() {
  var data = $(this).attr('href').slice(1).split('|');

  document.getElementsByTagName('HEADER')[0].style.backgroundImage = 'url(' + data[0] + ')';
  document.body.style.backgroundImage = 'url(' + data[1] + ')';
 
  my_setcookie('faBanner', $(this).attr('title'));
  return false;
  };
 
  block.appendChild(a);
 }
 
 header.appendChild(block);
});



Guest
Guest


Back to top Go down

Solved Re: Background changer

Post by Ange Tuteur on Fri Aug 28, 2015 12:56 pm

Ooh I see it. The comma was missing after the last curly bracket for "banners" right before "header" I corrected it for you. Mr. Green
Code:
$(function() {
  var banners = {
    'Deep Blue' : {
      banner : 'http://i61.tinypic.com/2rzyq2e.png',
      background : 'http://i60.tinypic.com/34imwkx.jpg'
    },

    'Champion' : {
      banner : 'http://i57.tinypic.com/2qkj8yu.png',
      background : 'http://i62.tinypic.com/2jurz7.jpg'
    },

    'Thundoria' : {
      banner : 'http://i60.tinypic.com/3009uah.png',
      background : 'http://i62.tinypic.com/2jurz7.jpg'
   
  },

 'Fortune' : {
      banner : 'http://i62.tinypic.com/16gbodw.png',
      background : 'http://i62.tinypic.com/2jurz7.jpg'
    },

    'Ami' : {
      banner : 'http://i62.tinypic.com/29lbtad.png',
      background : 'http://i60.tinypic.com/14l4kye.jpg'
    },

    'Black Dragon' : {
      banner : 'http://i62.tinypic.com/mvqbrd.png',
      background : 'http://i60.tinypic.com/rhra5y.jpg'
   
  },
 'Ascaron' : {
      banner : 'http://i60.tinypic.com/2n71aue.png',
      background : 'http://i62.tinypic.com/2jurz7.jpg'
    },

    'Death' : {
      banner : 'http://i58.tinypic.com/90t009.png',
      background : 'http://i58.tinypic.com/263v4ug.jpg'
    }

},
 
  header = document.getElementsByTagName('HEADER')[0],
  block = document.createElement('DIV'),
  cookie = my_getcookie('faBanner'),
  a, i;
 
  block.id = 'selectBanner';
  block.innerHTML = '<div id="banner-text">Choose a banner :</div>';
  if (cookie) {
    header.style.backgroundImage = 'url(' + banners[cookie].banner + ')';
    document.body.style.backgroundImage = 'url(' + banners[cookie].background + ')';
  }
  for (i in banners) {
    a = document.createElement('A');
    a.href = '#' + banners[i].banner + '|' + banners[i].background;
    a.title = i;
    a.className = 'banner-option banner-' + i.replace(/\s|\.|\?|,|#|'|"/g, '-');
   
    a.onclick = function() {
      var data = $(this).attr('href').slice(1).split('|');

      document.getElementsByTagName('HEADER')[0].style.backgroundImage = 'url(' + data[0] + ')';
      document.body.style.backgroundImage = 'url(' + data[1] + ')';
     
      my_setcookie('faBanner', $(this).attr('title'));
      return false;
    };
   
    block.appendChild(a);
  }
 
  header.appendChild(block);
});

Everything should be good now. Very Happy

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Background changer

Post by Guest on Fri Aug 28, 2015 1:06 pm

Thank you!!! But... something is still wrong.
And the profile image/ PM counter became buggy too. And the toolbar is gone.

edit: and the quick reply box is acting weird. o.o Smileys are gone... :S


Guest
Guest


Back to top Go down

Solved Re: Background changer

Post by Ange Tuteur on Fri Aug 28, 2015 2:05 pm

Hmm.. it might be related to accessing an undefined value. What I mean is an old cookie for the themes that doesn't exist anymore. Try replacing it with this script :
Code:
$(function() {
  var banners = {
    'Deep Blue' : {
      banner : 'http://i61.tinypic.com/2rzyq2e.png',
      background : 'http://i60.tinypic.com/34imwkx.jpg'
    },

    'Champion' : {
      banner : 'http://i57.tinypic.com/2qkj8yu.png',
      background : 'http://i62.tinypic.com/2jurz7.jpg'
    },

    'Thundoria' : {
      banner : 'http://i60.tinypic.com/3009uah.png',
      background : 'http://i62.tinypic.com/2jurz7.jpg'
    },

    'Fortune' : {
      banner : 'http://i62.tinypic.com/16gbodw.png',
      background : 'http://i62.tinypic.com/2jurz7.jpg'
    },

    'Ami' : {
      banner : 'http://i62.tinypic.com/29lbtad.png',
      background : 'http://i60.tinypic.com/14l4kye.jpg'
    },

    'Black Dragon' : {
      banner : 'http://i62.tinypic.com/mvqbrd.png',
      background : 'http://i60.tinypic.com/rhra5y.jpg'
    },

    'Ascaron' : {
      banner : 'http://i60.tinypic.com/2n71aue.png',
      background : 'http://i62.tinypic.com/2jurz7.jpg'
    },

    'Death' : {
      banner : 'http://i58.tinypic.com/90t009.png',
      background : 'http://i58.tinypic.com/263v4ug.jpg'
    }

  },
 
  header = document.getElementsByTagName('HEADER')[0],
  block = document.createElement('DIV'),
  cookie = my_getcookie('faBanner'),
  a, i;
 
  block.id = 'selectBanner';
  block.innerHTML = '<div id="banner-text">Choose a banner :</div>';
 
  if (cookie && banners[cookie]) {
    if (banners[cookie].banner) header.style.backgroundImage = 'url(' + banners[cookie].banner + ')';
    if (banners[cookie].background) document.body.style.backgroundImage = 'url(' + banners[cookie].background + ')';
  }

  for (i in banners) {
    a = document.createElement('A');
    a.href = '#' + banners[i].banner + '|' + banners[i].background;
    a.title = i;
    a.className = 'banner-option banner-' + i.replace(/\s|\.|\?|,|#|'|"/g, '-');
   
    a.onclick = function() {
      var data = $(this).attr('href').slice(1).split('|');

      document.getElementsByTagName('HEADER')[0].style.backgroundImage = 'url(' + data[0] + ')';
      document.body.style.backgroundImage = 'url(' + data[1] + ')';
     
      my_setcookie('faBanner', $(this).attr('title'));
      return false;
    };
   
    block.appendChild(a);
  }
 
  header.appendChild(block);
});

That adds some extra conditions to make sure the theme exists before making any modifications.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Background changer

Post by Guest on Fri Aug 28, 2015 2:12 pm

It works now! Thank you soo much!

Guest
Guest


Back to top Go down

Solved Re: Background changer

Post by Ange Tuteur on Fri Aug 28, 2015 2:17 pm

You're welcome ^^

Topic archived

Have a good weekend. Very Happy

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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