SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery, change size of div based on date

    Hi there,

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

    HTML Code:
    <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!

  2. #2
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You can accomplish the same result using vanilla JavaScript and the document.getElementsByClassName method, see the below for how i would do it:

    Code JavaScript:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •