custom header using css 2

[skibascott]

When printing a specific webpage, I need a custom header to be displayed on the printout. The header needs to say, "this quality alert expires mm/dd/yyyy". The date must be one day after the date it was printed. Is this possible to do with cascading style sheets? This header should only be displayed on the printout and not the webpage. This only needs to be compatible with Internet Explorer.

Thank you.

 

[philote]

I don't think you can do this with just style sheets, as they deal with how the data is presented, not with the data itself. What you can do, however, is have the web page display the date you want, but give it a special class or id. Then in your style sheet, give it a display of 'none'. Then put the print styles at the bottom of your sheet. Here's an example where you have the header with an id of 'printonly'.

h1#printonly{display: none;}
...
@media print{

h1#printonly{display: block;}

}

Anything in the "@media print" section will only apply to the page when you print it.

 

[LFI]

Put the text you want printed in some kind of container, like a DIV and give it a class name like:

<div class='printOnly'>this quality alert expires <div id='expireDate' class='printOnly'></div></div>

Then, in the HEAD section of your HTML:

<style type="text/css" media="print">
.printOnly{
display:inline;
}
</style>
<style type="text/css" media="screen">
.printOnly{ 
display:none;
}
</style>

Finally, in the BODY tag's ONLOAD event, call a function that calculates tomorrow's date from today's date (let us know if you need tips on how to do that) and populate the expireDate.innerHTML with the result.

I believe this should work for you.

--Dave

 

[LFI]

A quickie function to get tomorrow's date in the format you want:

function calcExpireDate()
{
 var today = new Date();
 var tomorrow = new Date();
 tomorrow.setDate(today.getDate() + 1);
 expireDate.innerHTML = (tomorrow.getMonth()+1)+"/"+tomorrow.getDate()+"/"+tomorrow.getFullYear();
}

Note: getMonth() returns a zero-based value (January = 0, December = 11), which is why 1 is added to it.

'hope that helps.

--Dave

 

[skibascott]

Thank you both. It works perfectly.