jQuery, change size of div based on date

[pshoeg]

Hi there,

I have a timeline made of two divs, like this:

<div id="timeline">
	<div class="now"></div>
	<div class="later"></div>
</div>

They're both floated left. I'd like the size of them to change based on the date (or at least the week), so that it shows the progress of the year.
With 52 weeks in a year, the width of the #now div should be increased by 1.9% each week, and then reset at the end of the year.

Is there a clever way to do this with jQuery?

Thanks!

[pshoeg]

So far, I've made it work with changing the width every month, but writing all these numbers seems stupid.


<script>
$('.now').css('width', function(){
month = new Date().getMonth();
if (month = 1) {
return '0%';
} else if (month = 2) {
return '8.3%';
} else if (month = 3) {
return '16.6%';
} else if (month = 4) {
return '24.9%';
} else if (month = 5) {
return '33.2%';
} else if (month = 6) {
return '41.5%';
} else if (month = 7) {
return '49.8%';
} else if (month = 8) {
return '58.1%';
} else if (month = 9) {
return '66.4%';
} else if (month = 10) {
return '74.7%';
} else if (month = 11) {
return '83%';
} else if (month = 12) {
return '91.3%';
}
});

$('.later').css('width', function(){
month = new Date().getMonth();
if (month = 1) {
return '100%';
} else if (month = 2) {
return '91.7%';
} else if (month = 3) {
return '83.4%';
} else if (month = 4) {
return '75.1%';
} else if (month = 5) {
return '66.8%';
} else if (month = 6) {
return '58.5%';
} else if (month = 7) {
return '50.2%';
} else if (month = 8) {
return '41.9%';
} else if (month = 9) {
return '33.6%';
} else if (month = 10) {
return '25.3%';
} else if (month = 11) {
return '17%';
} else if (month = 12) {
return '8.7%';
}
});
</script>

[chris.upjohn]

You can accomplish the same result using vanilla JavaScript and the document.getElementsByClassName method, see the below for how i would do it:

function setWidth(ele, arr) {
    var month = new Date().getMonth();
 
    for (var i = 0, max = ele.length; i < max; i++) {
        ele[i].style.width = arr[month - 1] + '%';
    }
}
 
var now = [0, 8.3, 16.6, 24.9, 33.2, 41.5, 49.8, 58.1, 66.4, 74.7, 83, 91.3],
    ele = document.getElementsByClassName('now');
 
setWidth(ele, now);
 
var lat = [100, 91.7, 83.4, 75.1, 66.8, 58.5, 50.2, 41.9, 33.6, 25.3, 17, 8.7],
    ele = document.getElementsByClassName('later');
 
setWidth(ele, lat);

Of course browser support for this method is limited to modern browsers but you can find a lot of useful information about emulating it on Google https://www.google.com/search?q=docu...ient=firefox-a