Random Forum Background, every xMoment

[stronktank]

Greetings!

I was wondering what I could add/edit from this script so the background changes (every 30 minutes, every hour, every day). I found something here, but don't have enough skill to properly implement it in this code, or change it to minutes/hours:

<script type="text/javascript">
/* Random Forum Background Image or Color by SubDevo */
/* Global Header - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */

var backgrounds=[ // URL to Image or hex color.
"URL TO IMAGE",
"FF00FF"
]; // DON'T TOUCH

var bg=backgrounds[Math.floor(backgrounds.length*Math.random())];
bg=(bg.indexOf("http:")==0)?"-image:url("+bg+")":"-color:#"+bg;
document.write("<style type='text/css'>body{background"+bg+";}</sty"+"le>");
</script>

Thanks!

[Speed33]

Jul 19, 2015 7:04:49 GMT -8 stronktank said:

Greetings!

I was wondering what I could add/edit from this script so the background changes (every 30 minutes, every hour, every day). I found something here, but don't have enough skill to properly implement it in this code, or change it to minutes/hours:

<script type="text/javascript">
/* Random Forum Background Image or Color by SubDevo */
/* Global Header - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */

var backgrounds=[ // URL to Image or hex color.
"URL TO IMAGE",
"FF00FF"
]; // DON'T TOUCH

var bg=backgrounds[Math.floor(backgrounds.length*Math.random())];
bg=(bg.indexOf("http:")==0)?"-image:url("+bg+")":"-color:#"+bg;
document.write("<style type='text/css'>body{background"+bg+";}</sty"+"le>");
</script>

Thanks!

No not from this code you cant.

[stronktank]

Speed33 , any code would be fine to have random backgrounds every xMoments,...

[Lynx]

stronktank - I'm going to take the other code you linked ( here ) and see if I can turn it into a plugin. It'll just be daily to start, and if I can get that to work, I'll try implementing another option for hourly. I'm still new at making plugins, but anything to help me learn is worth giving it a shot.

[Lynx]

Hey, stronktank - I just spotted this plugin: www.proboards.com/library/plugins/item/106

Would that work for you?

[Tumbleweed]

Hey stronktank, If what Lynx  linked you to doesn't suit your needs, I found this on stackoverflow (my favorite site):

I have it working on my test site ( colormaddness.proboards.com/ ) with two image only but you can add as many as you like, just make sure all the ones except the last have a comma and the last has a semi-colon. I put it in my global headers but I'm sure you can stick it in your wrapper template so it just works on one theme. You can adjust the 5000 to speed it up or slow it down.  500 would be super fast which might drive members away and make them want to punch you in the nose. ha ha I'd space them pretty far apart.

<script>
$(function () {
   var body = $('body');
   var backgrounds = [
     'url(http://i657./uu300/EliteList/100x100/Prints/Spu1a_zps72352179.png)',
     'url(http://i657./uu300/EliteList/100x100/Prints/Spul5_zpse33d0dde.png)'];
   var current = 0;

   function nextBackground() {
       body.css(
           'background',
       backgrounds[current = ++current % backgrounds.length]);

       setTimeout(nextBackground, 5000);
   }
   setTimeout(nextBackground, 5000);
   body.css('background', backgrounds[0]);
});
</script>
 Oh, and one last thought. Try to make your images as small as possible in bytes or you may have very slow loading of your forum. I use this site to optimize as it give you options. I usually find the one where you don't notice any quality changes and then pick on above it to be safe. Mind you, they have a limit on the size they will let you optimize so if that is your problem, the image is way too big in bytes. You'd have to optimize on a graphics program.

[stronktank]

Thanks, Tumbleweed!!

Your code is about what I need, but there is no way to set a background color behind it? Or have the image 'above' the orginal background settings?
Also, now it's set to 'repeat' the background along the page, while I just want one image stuck to the 'roof' and have a color background for the rest of the page.

[Tumbleweed]

Jul 23, 2015 9:24:04 GMT -8 stronktank said:

Thanks, Tumbleweed!!

Your code is about what I need, but there is no way to set a background color behind it? Or have the image 'above' the orginal background settings?
Also, now it's set to 'repeat' the background along the page, while I just want one image stuck to the 'roof' and have a color background for the rest of the page.

No, that code is for the body background only. If the one MSG posted doesn't do the trick for you I have a couple questions. Will this taking the place of your banner or be in addition to your banner? 

This code should do the trick for you but I'll need to know the above questions because you may need css and template changes.

www.aspsnippets.com/Articles/JavaScript-Auto-Image-Rotator-using-Timed-Image-Swap-technique.aspx

Here on my test site, abetteramerica.freeforums.net/  I remove the banner completely and added to the top in a fixed position. I didn't have any big images to use so used tiny ones and made a background color behind it but you could have a image there to start with while the code loads and starts the rotation. Let me know if you need help.

[stronktank]

Tumbleweed, the abetteramerica forums don't link?

gccc.boards.net/

As you can see the background changes when you refresh the page. This is exactly what I want, but instead of every time you load the page, only once a day for example.
The background is behind the banner (which just contains the creator logo and some link buttons)..
If you scroll down everything has this dark grey/blueish color.
If I put in the code you gave me it repeats the background all over the page and in between loading the background appears white,...

[Tumbleweed]

Jul 24, 2015 5:53:07 GMT -8 stronktank said:

Tumbleweed, the abetteramerica forums don't link?

gccc.boards.net/

As you can see the background changes when you refresh the page. This is exactly what I want, but instead of every time you load the page, only once a day for example.
The background is behind the banner (which just contains the creator logo and some link buttons)..
If you scroll down everything has this dark grey/blueish color.
If I put in the code you gave me it repeats the background all over the page and in between loading the background appears white,...

Sorry about the link, some how my letter "I" got caught up in the link but it doesn't matter,that isn't what you want either. I was taking it you wanted more flexibility in how often as in more often than "on load" or  page refresh but I get now you want to set it based on real time so you can set it for every 12 hours or 24 hours.  I had a code like that based on real time but it targeted the body background.

Until some coder, that knows JavaScript well, comes along to help you with rewriting that, I'll keep looking. Sorry for not getting what you really wanted right off the bat. Keep bumping this every 24 hours (yes, like a timer, lol) to show you still need this and I'll post back if I find something that will really work for you.

[stronktank]

Help? Please? Bump!

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Aug 3, 2015 4:54:36 GMT -8 stronktank said:

Help? Please? Bump!

Which code works for you? And you want it based off of server time or local computer time? And what else does it need? Cause I'm rather confused and I've worked enough with the date object to at least provide progress to what you have so far.

[stronktank]

support.proboards.com/thread/383490

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ , This is what I'm using right now. It changes the background with every page reload.

What time it changes doesn't really matter (not sure what you mean with server time or local computer time?).
Just want an option to have the background change every day (to make things easier).

gccc.boards.net/

This is the site where I use it.

Thanks a lot!!

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Aug 13, 2015 8:09:23 GMT -8 stronktank said:

support.proboards.com/thread/383490

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ , This is what I'm using right now. It changes the background with every page reload.

What time it changes doesn't really matter (not sure what you mean with server time or local computer time?).
Just want an option to have the background change every day (to make things easier).

gccc.boards.net/

This is the site where I use it.

Thanks a lot!!

This should fix all of your problems, based on when the proboards forum changes days.
Saves the background and the day in your cookies, also I already customized it to your  current background css , and current images in rotation

<script type="text/javascript">

function getcookiehc(cname)

{

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i<ca.length; i++)

 {

 var c = ca[i].trim();

 if (c.indexOf(name)==0) return c.substring(name.length,c.length);

}

return -1;

}



/* Random Forum Background Image or Color by SubDevo */

/* Global Header - Please leave this header intact. Do not repost. */

/* interoceandesigns.com or lsdp.proboards.com */



var backgrounds=[ // URL to Image or hex color.

  "http://storage.proboards.com/6253000/i/Uj8DN8GvtrhSjI9EgQ7f.jpg",

  "http://storage.proboards.com/6253000/i/0_SHmUTivuE8PtUjM13v.jpg",

  "http://storage.proboards.com/6253000/i/NAQvMrnOpLbofrxLLVwJ.jpg",

  "http://storage.proboards.com/6253000/i/WPXYyZybVumxbFJ8fglV.jpg",

  "http://storage.proboards.com/6253000/i/So7cxLiYYa41YShNl8qt.jpg"

 

]; // DON'T TOUCH

var clockhcday=parseInt(new Date(proboards.data("serverDate")).getDate())

var hcbg=backgrounds[Math.floor(backgrounds.length*Math.random())];

if(getcookiehc('hcday')!=clockhcday)

{

document.cookie="hcbg="+hcbg+';path=/';

document.cookie="hcday="+clockhcday+';path=/';

}

else{

hcbg=getcookiehc('hcbg')

}

hcbg=(hcbg.indexOf("http:")==0)?"-image:url("+hcbg+")":"-color:#"+hcbg;

document.write("<style type='text/css'>body{background"+hcbg+";background-repeat:no-repeat;background-position:center top;background-attachment:scroll;background-color:#1d2031;}</sty"+"le>");

</script>


[stronktank]

Thank you so much, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ ! Exactly what I wanted!!

Deleted the 'normal' background as it kept loading before the global header backgrounds.

Thanks again!!!