ansaurus

Question

Changing link class based on dates

Answer 1

A:

on html code open in each li in class a php tag and use a if statement. If current week echo current

Sotiris 2010-08-07 12:59:40

Answer 2

A:

http://www.tizag.com/javascriptT/javascriptdate.php

Try writing an function using the .getDay() in JavaScript. You'd also have to use class names as numbers.. 0 = Sunday, 1 = Monday, etc.

function menuDate() {
  var currentDay = currentTime.getDay();
  if ($(li).hasClass(currentDay)){
    $(li).addClass('current').removeClass('notcurrent');
    }

.notcurrent {
display: none;
}

.current {
display: list-item;
}

Christian Benincasa 2010-08-07 13:05:27

could have [edited your previous answer](http://stackoverflow.com/posts/3430520/edit) instead of deleting it and submitting a new one.

Gordon 2010-08-07 13:06:51

I would strongly avoid the use of Javascript for such a simple static action. PHP can do the job, even easier, reaching a wider audience...

Harmen 2010-08-07 13:10:45

Answer 3

+1 A:

the simplest and most straightforward (but not necessary most elegant) option, is to use php's date('W') and the modulus operator. Basically, you need to add the following to each menu item's class

 <?php if(date('W') % <TOTAL NUMBER> == <ITEM>) echo 'current' ?>

for example, for "corsham-menu" the TOTAL NUMBER will be 6 and ITEM will be from 0 to 5, so the code needs to be like

<li class="<?php if(date('W') % 6 == 0) echo 'current' ?> "> Menu A
<li class="<?php if(date('W') % 6 == 1) echo 'current' ?> "> Menu B
<li class="<?php if(date('W') % 6 == 2) echo 'current' ?> "> Menu C
<li class="<?php if(date('W') % 6 == 3) echo 'current' ?> "> Menu D
<li class="<?php if(date('W') % 6 == 4) echo 'current' ?> "> Menu E
<li class="<?php if(date('W') % 6 == 5) echo 'current' ?> "> Menu F

ps really nice site you have there! ))

stereofrog 2010-08-07 13:10:34

Thanks for this Stereofrog. Now, sorry but you'll have to guide me slightly here. I've implemented this fine but can you just clear this up for me. This will rotate the 'current' class to the next item week after week correct?At the moment it has selected a seemingly random choice on each list as the 'current' class. How do I set the starting list item that should be current as of this week?Wow, hope that makes sense. Here's a current link (minus CSS cleanliness)http://images.snapdragonsnursery.com/html/menus/menu-selector.php

James 2010-08-11 20:22:29

Actually, I might have got it. But would appreciate if you could confirm this is all okay. I simply rotated the item numbers so that on some lists it goes 2, 3, 0, 1 instead of being in numerical order. The right items are now highlighted. So will this continue to work do you think?

James 2010-08-11 20:43:49

yes, the order doesn't matter, you can start with any number. Note that date('W') considers a week to start on monday.

stereofrog 2010-08-11 21:49:19

Fantastic - thanks for your help.

James 2010-08-12 07:37:11

Answer 4

A:

Hi!

Here's a simple demo written in javascript/jQuery that calculates the current week number and highlights the list item that has the same id as the current week number. It should work as a start to get you on the way to the functionality that you want.

<html>
<head>

<!-- jQuery library - I get it from Google API's -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
<!-- Function for calculating the week number -->
Date.prototype.getWeek = function() {
    var determinedate = new Date();
    determinedate.setFullYear(this.getFullYear(), this.getMonth(), this.getDate());
    var D = determinedate.getDay();
    if(D == 0) D = 7;
    determinedate.setDate(determinedate.getDate() + (4 - D));
    var YN = determinedate.getFullYear();
    var ZBDoCY = Math.floor((determinedate.getTime() - new Date(YN, 0, 1, -6)) / 86400000);
    var WN = 1 + Math.floor(ZBDoCY / 7);
    return WN;
}

<!-- The jQuery code -->
$(function(){
    var today = new Date();
    var weekno = today.getWeek();

    $("li#" + weekno).addClass("current");

});

</script>

<style>
li.current {
    font-weight: bold;
    color: #ff0000;
}
</style>

</head>
<body>

<ul id="myWeekList">
<li id="29">Week 29</li>
<li id="30">Week 30</li>
<li id="31">Week 31</li>
<li id="32">Week 32</li>
<li id="33">Week 33</li>
<li id="34">Week 34</li>
<li id="35">Week 35</li>
<li id="36">Week 36</li>
</ul>

</body>

</html>

Regards, Thomas Kahn

tkahn 2010-08-07 13:17:46

Answer 5

A:

Don't use Javascript to solve this... Use PHP! Let me give you this dynamic solution:

<?php
  // Menu structure
  $menu = array(
    'A' => array('weekNo' => 0, 'url' => '#/corsham/A.pdf', 'title' => 'Menu'),
    'B' => array('weekNo' => 1, 'url' => '#/corsham/B.pdf', 'title' => 'Menu'),
    'C' => array('weekNo' => 2, 'url' => '#/corsham/C.pdf', 'title' => 'Menu')
  );

  // Get week number in range, in this example, 0-2
  $weekNo = date('W') % count($menu); // Get week number

  // Show the menu
  echo '<ul>';
  // Iterate over each menu item
  foreach($menu as $label=>$item){
    echo '<li class="menus6' . ($item['weekNo'] == $weekNo ? ' current' : '') . '"><h5>' . $item['title'] . '</h5><a href="' . $item['url'] . '">' . $label . '</a></li>';
  }
  echo '</ul>';
?>

Harmen 2010-08-07 13:22:39

ansaurus

tags:

views:

answers:

Changing link class based on dates

related questions