Skin based on time of day

[Wormopolis]

Browsers Tested: IE and FF
placement: global header





this example has 4 sections of the day. each section gets a div, with all the CSS you want inside it. put everything you would normally place between <style> tags.

then in the code itself, the first array contains the banner images you want to use.

the second array is for board/thread highlights. since highlights arent done with CSS, you will need to put in the hex colors of the mouseover and mouseout for your boards and threads.

the third array is how you define the section times. the first number is the start hour (0 is midnight, 23 is 11 PM). dont overlap or it will cause an error.


if you want to add more sections, just add another div using the same naming format, as well as add a line to each array (using successive numbers).


this code will need to go at the top of global footer in order to target the banner image correctly.


<div id="section_1_style" style="display: none">

CSS for section 1 - DONT USE <style></style> tags!

</div>

<div id="section_2_style" style="display: none">

CSS for section 2

</div>

<div id="section_3_style" style="display: none">

CSS for section 3

</div>

<div id="section_4_style" style="display: none">

CSS for section 4

</div>

<script type="text/javascript">
<!--
// selective CSS for day timesections  v1.1
// by Wormopolis - www.wormocodes.com
// do not repost - keep header intact


var dayBannerArray=new Array();
dayBannerArray[1]='url to banner 1';
dayBannerArray[2]='url to banner 2';
dayBannerArray[3]='url to banner 3';
dayBannerArray[4]='url to banner 4';

var dayHighlightColorsArray=new Array();
//  board on, board off, thread on, thread off
//  must be hex color or transparent
dayHighlightColorsArray[1]=['FF0000','002222','DD0000','003333'];
dayHighlightColorsArray[2]=['00FF00','001111','00DD00','010101'];
dayHighlightColorsArray[3]=['0000FF','111100','0000DD','123123'];
dayHighlightColorsArray[4]=['0FFFF0','101010','00DD00','100101'];

var sectionData=new Array();
sectionData[1]=[0,6];   //times are 24 hour format - start, end
sectionData[2]=[7,12];   //times are 24 hour format
sectionData[3]=[12,15];   //times are 24 hour format
sectionData[4]=[16,23];   //times are 24 hour format


var timeget=new Date();
var hourget=timeget.getHours();
for (var th in sectionData) {
 if (hourget >= sectionData[th][0] && hourget < sectionData[th][1])  timeget=th;
}
//  timeget now has section
hold=document.getElementById('section_'+timeget+'_style');
if (hold) hold=hold.innerHTML;
var bannerSpot=document.getElementsByTagName('font')[0];
if (dayBannerArray[timeget]  && bannerSpot.firstChild && bannerSpot.firstChild.nodeName.match(/img/i)) {
 bannerSpot.firstChild.src=dayBannerArray[timeget];
} else {
 nwbanner=document.createElement('img');  nwbanner.src=dayBannerArray[timeget];
 bannerSpot.replaceChild(nwbanner, bannerSpot.firstChild);
}
document.write('<style type="text/css"> '+hold+'</sty'+'le>');
if (dayHighlightColorsArray[timeget]) {
 var globalHLcolor=dayHighlightColorsArray[timeget][( pb_action=='home' ? 0 : 2)];
 mouseOverHighlightCell = function(obj) {obj.style.backgroundColor=globalHLcolor;};
}
if (dayHighlightColorsArray[timeget]) {
 var globalOUTcolor=dayHighlightColorsArray[timeget][( pb_action=='home' ? 1 : 3)];
 mouseOutHighlightCell = function(obj) {obj.style.backgroundColor=globalOUTcolor;};
}

// -->
</script>