Question : how to dynamically change CSS style based on time

I have a page with Js-Kit (Echo) comments (for articles, blogs).

I want to turn off the comments xx hours after the page was open.

So on this page http://www.info-scroll.com/c4p/my_test/lunch_discussion_09-Jun-2010.html, the comments get turned off at (say) 9pm on Jun 9 (They are turned off on this page)

This page has comments turned on (so you can add a new comment), http://www.info-scroll.com/c4p/my_test/lunch_discussion_10-Jun-2010.html

Here's the code to turn off comments:

<style type="text/css">
.jsk-CommentFormButton { display: none; }
.js-singleCommentReplyable { display: none; }
.jsk-CommentFormSurface { display: none; }
.js-commentControl { display:none; }
</style>

So how could I evaluate the time and then set the style (basically throw out the above style when I want to add comments).

I can probably evaluate the time difference, something like

if (mydate.getHours() >= 16 && [my_screen_date = todays_date]) || (my_screen_date <> todays_date) {
//apply the above style
}
else { //don't apply the above style
}

is that possible ?

Answer : how to dynamically change CSS style based on time

I didn't read your original post very clearly, and I thought your pseudo code was php.

Here's a go at it in javascript. This should parse the page for the posted date, and if it is past 9:00 pm EST of that date or anytime past that date, it hides the "Leave a comment" link. (Hopefully) It works in this mock-up.

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
  /* <![CDATA[ */
  function checkTime(){
      var months = {
          'Jan': 0,
          'Feb': 1,
          'Mar': 2,
          'Apr': 3,
          'May': 4,
          'Jun': 5,
          'Jul': 6,
          'Aug': 7,
          'Sep': 8,
          'Oct': 9,
          'Nov': 10,
          'Dec': 11
      };

      // Parse posted date
      var posted = document.getElementById('Label1').innerHTML.split(/\s/g);
      var pmonth = eval('months.' + posted[1]);
      var pday = posted[2].replace(',','');
      // Today's date pieces
      var d = new Date();
      var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
      var d2 = new Date(utc + (3600000*(-4)));
      var month = d.getMonth();
      var day = d.getDate();
      var hour = d2.getHours();
      
      alert(month + ' ' + pmonth + ':' + day + ' ' + pday);
      
      if(pmonth == month && day >= pday){
          if(hour > 21){
              hideComments();
          }
      }else{
          alert('second');
          hideComments();
      }
      
  }
  
  function hideComments(){
      var elems = document.getElementsByTagName('*');
      for(i = 0; i < elems.length; i++){
          if(elems[i].className == 'js-LeaveComment'){
              elems[i].style.display = 'none';
          }
      }
  }
  /* ]]> */
  </script>  
 </head>
<body onload="checkTime();">
 <h2 align="center"><big><span id="screen_name">The Afternoon Club</span> - <span id="Label1">Wednesday, Jun 23, 2010</span></big></h2>
 <div class="js-LeaveComment">Leave a comment (Should hide)</div>
 <div class="y">Leave a comment (Should show)</div>
 <div class="js-LeaveComment">Leave a comment (Should hide)</div>
 <div class="y">Leave a comment (Should show)</div>
 <div class="js-LeaveComment">Leave a comment (Should hide)</div>
</body>
</html>

           
         