CODEWITHSUNDEEP
javascriptjqueryhtml
Funk Forty Niner
Funk Forty Niner

Reputation: 74217

How to highlight elements according to current event date?

I borrowed some code from another question asked on SO, since I couldn't find a script that would do what I want to achieve.

What I'd like to do is highlight a current event based on the date it is assigned, and the following code is not working for an <td> element inside a table, a <div>, or a <p> element.

I would also like to apply the highlight to any ID of the same name, is that possible with what I have now?

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style>
body {padding: 20px; font-family: sans-serif;}
p {margin-top: 80px; font-size: 11px;}
.active {color: hotpink;
background:#000;
font-weight:bold;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var TODAY = new Date();
//Individual dates could be organized as objects, but using arrays below seems to be more readable and tidy
var SCHEDULE = {
'some-class': ['May 5 2011', 'June 5 2011'],
'some-class-a': ['May 5 2012', 'June 5 2012'],
'some-class-b': ['May 10 2012', 'June 10 2012'],
'some-class-c': ['December 15 2012', 'December 31 2012'],
'some-class-d': ['May 20 2012', 'June 20 2012'],
'some-class-e': ['December 15 2012', 'December 31 2012']
};
for (var events_ in SCHEDULE) {
console.log('checking ' + events_ + ', dates have to be within the ' + SCHEDULE[events_] + ' range');
if (TODAY >= Date.parse(SCHEDULE[events_][0]) && TODAY <= Date.parse(SCHEDULE[events_][1])) {
console.log(events_ + ' is currently in session!');
document.getElementById(events_).classList.add('active');
}
}
});//]]>
</script>
</head>
<body>
<ul>
<li id="some-class">Event 1</li>
<li id="some-class-a">Event 2</li>
<li id="some-class-b">Event 3</li>
<li id="some-class-c">Event 4</li>
<li id="some-class-d">Event 5</li>
<li id="some-class-e">Event 6</li>
</ul>
<p id="some-class-e">Current event here text</p>
<div id="some-class-e">Current event here, more text</div>
<table id="events" border="1">
<tr>
<td>Event 1 (May 16 - Dec 1)</td>
</tr>         
<tr>
<td>Event 2 (May 31 - June 1)</td>
</tr>
<tr>
<td id="some-class-e">Current Event (December 15 - December 31)</td>
</tr>               
</table>
</body>
</html>

jsFiddle demo

Upvotes: 4

Views: 1532

Answers (1)

Alexander
Alexander

Reputation: 23537

First of all, IDs need to be unique and by making use of document.getElementById you will only fetch one.

If you want to use the same identifier (for example, some-class-e) more than once you need to make use of a classname instead.

You can get all the elements by classname using document.getElementsByClassName and then apply the active classname to it.

<ul><li class="some-class-e">Event 6</li></ul>
<p class="some-class-e">Current event here text</p>
<div class="some-class-e">Current event here, more text</div>


var matches = document.getElementsByClassName(events_);
for(var i = 0; i < matches.length; ++i){
  matches[i].classList.add('active');
}

See it here.

UPDATE

A jQuery variant:

$.each(SCHEDULE, function(classname, dates) {
  if (TODAY >= Date.parse(dates[0]) && TODAY <= Date.parse(dates[1])) {
    $("." + classname).addClass("active");
  }
});

There you go.

Upvotes: 7

Related Questions