Jump to content

Use current date to move divs


Recommended Posts

 

I was wondering if someone could come up with a way of using the current date to set the position of a div.

I would like to apply such a process to this page: http://www.paulclift.net/news.html

The object in question which I would like to move automatically up and down, so that it is in the appropriate place relative to the other items on the page, is the three HR lines with past/future written above & below it.

There must be a way to do this - not having to constantly move this object, and others like it on other pages, would be a huge time-saver! Please help if you have any ideas. Thanks.

Here is the code I have so far:

 

//first, get today's date

Date.prototype.yyyymmdd = function() { var yyyy = this.getFullYear().toString(); var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based var dd = this.getDate().toString(); return yyyy + (mm[1]?mm:"0"+mm[0]) + (dd[1]?dd:"0"+dd[0]); }; d = new Date();//next, set the 'seperator' id to today's date document.getElementById("seperator").setAttribute("id", d.yyyymmdd());//next, find divs with a date for an ID function sortDivs(div) { var elems = document.getElementsByClassName("date");// Sort array numerically elems.sort(function(a, b) { return a.id.split()[1] - b.id.split()[1]; });// finally, move elements to sorted order while (iLen--) div.insertBefore(a[iLen], div.firstChild); }
<div id="news-content"></div><div id="separator" class="date">THIS IS MY SEPARATOR DIV/div><div id="20150523" class="date">CONTENT<div>MORE CONTENT</div></div><div id="20150524" class="date">CONTENT<div>MORE CONTENT</div></div><div id="20150525" class="date">CONTENT<div>MORE CONTENT</div></div>
Link to post
Share on other sites

I don't think you can call sort() on elems because it's not an array, it's a node list. Node lists are different than arrays in that they keep the order that the elements have in the DOM structure and they automatically update when an element is added or removed from the document.

 

The id attribute cannot have a number as the first character, so your HTML wouldn't pass validation.

 

Normally things like this are sorted using a server-side language before being added to the HTML code.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...