A viewing period is created for automatically showing the Whats New screen.
When you add or change the contents for the Whats New DIV you automatically change the documents lastModified date so a new viewing period is created.
Each time the page is loaded the script checks to see if the current date is within the viewing period if it is the Whats new screen is automatically scrolled into view.
If you do not want to automatically run the screen set variable showDays to zero
If you always want to show the screen then set variable showDays to a ridiculously high number like 9999
An array is used to contain each months update information
['update info']
If a month has more than 1 update simply add it to the months array index
['update info 1','update info 2']
If no update information is available for a particular month the appropriate array index should be left with just a pair of empty quotes
['']
this month will not be included in the display.
The number of previous months to display can be set at variable showMonths
A link is used to show and hide the Whats New screen with the text changing accordingly.
<script type="text/javascript">
// Jeff
// www.huntingground.freeserve.co.uk
updates=[
//jan
['Update info 1 for jan','Update info 2 for jan'],
//feb
[''],
//mar
[''],
//apr
[''],
//may
[''],
//jun
[''],
//jul
['<a href="#null" onclick="hideWhatsNew()" title="Dummy Link">Links</a>can be included in the display'],
//aug
['Set how many previous months updates are show'],
//sept
['Link for manual recall at any time'],
//oct
['Automatically scrolls into view during the valid period.'],
//nov
['Keep your visitors informed of any late breaking news, events, or recent updates.'],
//dec
['Whats new information screen.']
]
showDays=30 // number of days to automatically show updates when page loads, 0 = never
showMonths=6 // how many previous months updates to show
months=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
showing=0
function initWhatsNew(){
updateList=document.getElementById("update_list")
// populate whats new screen with updates covering last 6 months
now=new Date() // todays date
mth=now.getMonth() // current month
year=now.getFullYear() // current year
isUpdates=0
updateList.innerHTML=""
for(var i=0;i<showMonths;i++){
if(mth<0){
mth=11
year--
}
if(updates[mth][0]!=''){
updateList.innerHTML+='<b>'+months[mth]+' '+year+'<\/b><br><br>'
for(var j=0;j<updates[mth].length;j++){
updateList.innerHTML+='<li>'+updates[mth][j]+'<br><br>'
}
isUpdates=1
}
mth--
}
if(isUpdates==0){ // if no updates
document.getElementById("show_new").style.visibility="hidden"
return
}
today=new Date().getTime()
lastMod=new Date(document.lastModified).getTime()
validPeriod = lastMod + (1000 * 60 * 60 * 24 * showDays)
updateDiv=document.getElementById("w_n_update")
wWidth=document.body.clientWidth
wHeight=document.body.clientHeight
sWidth=updateDiv.offsetWidth
sHeight=updateDiv.offsetHeight
updateDiv.style.left=(wWidth-sWidth)/2+"px"
updateDiv.style.top=updateDiv.offsetTop-sHeight+"px"
defPos=parseInt(updateDiv.style.top)
topPos=defPos
stopPos=70 // top position layer scrolls down to in relation to page top (zero)
if(showDays!=0&today<validPeriod){
showWhatsNew()
}
}
showMe=""
hideMe=""
function showWhatsNew(){
document.getElementById("w_n_update").style.visibility="visible"
if (topPos<stopPos){
topPos+=30
updateDiv.style.top=topPos+"px"
showMe=setTimeout("showWhatsNew()",50)
}
else{
clearTimeout(showMe)
}
showing=1
document.getElementById("show_new").innerHTML="Hide Whats New"
document.getElementById("show_new").onclick=function(){
hideWhatsNew()
}
}
function hideWhatsNew(){
if(showing==0){return}
clearTimeout(showMe)
if (topPos>defPos) {
topPos-=50
updateDiv.style.top=topPos+"px"
hideMe=setTimeout("hideWhatsNew()",50)
}
else{
clearTimeout(hideMe)
}
document.getElementById("show_new").innerHTML="Show Whats New"
document.getElementById("show_new").onclick=function(){
showWhatsNew()
}
}
// add onload="initWhatsNew()" to the opening BODY tag
</script>
<div id="w_n_update" style="position:absolute;top:0;width:400px;height:350px;border:1px solid #8e8462;background:#9f9573;font-size:12px;visibility:hidden" onclick="hideWhatsNew()"><a id="show_new" href="#null" onclick="showWhatsNew()">Show Whats New</a>
Note to self:
In order to pass the validation for doctype strict the unordered list must contain a hard coded li tag.
The script would have to be amended to insert the current date before the hard coded li tag, populate the hard coded li tag, generate any remaining li tags under the current date and then generate the remaining dates with their respective li tags.
The validator does allow the hard coded li tag to be removed simply by using updateList.innerHTML="" and then populating as normal which is far better than having to run the following extra lines of code
hasRun=0
if(hasRun==0){
updateDate=document.createTextNode(months[mth]+' '+year)
updateList.insertBefore(updateDate,updateList.getElementsByTagName("li")[0])
for(var j=0;j<updates[mth].length;j++){
if(j==0){
updateList.getElementsByTagName("li")[0].innerHTML=updates[mth][j]+'
'
}
else{
newList=document.createElement("LI")
newListTxt=document.createTextNode(updates[mth][j])
newList.appendChild(newListTxt)
updateList.appendChild(newList)
}
}
hasRun=1
}
else{
updateDate=document.createTextNode(months[mth]+' '+year)
updateList.appendChild(updateDate)
for(var j=0;j<updates[mth].length;j++){
newList=document.createElement("LI")
newListTxt=document.createTextNode(updates[mth][j])
newList.appendChild(newListTxt)
updateList.appendChild(newList)
}
}