How to get Last Child or "the end" of a series of divs to appear in parent container

Posted on 2012-09-21
Medium Priority
Last Modified: 2012-09-23
We are upgrading our web site. The designs did not include implementation, so some things in templates we paid for are only 1/8th of a framework (smile) and I have do the rest.

Please take a look at the archives widget at the bottom of this page (you have to click the tab)


the parent container is div class="paginate"  it is wide enough to hold four months at a time which are contained in child divs class="months"  and inside there are four small tables, one for each of the months.  for each year there three div class-months, four months each.

Now we have several issues here... first of all I ran some Livecode scripts on my desktop to dig the archive and build the content for all archives going back to August 16, 1998 (we were posting a daily news page, some people say, before the word "blog" existed)  This turns out to be a 315K file... I have yet to fetch all the links for 2008-2012, but will do that later today or tomorrow.... quite some bloat. I may break that up into individual files per year and then load just twelve months per year with some PHP inthe drop down menu which is currently not hooked up at all. (not sure how best to approach that part)

But today my issue is just this: the use case requires that the latest months appear in the parent container when the user opens the page.

 this is effectively like saying the entire series should be "off to the left" and only the last child <div class="month"> appears in the view... users then click on the back arrow to go further in the the past. As we got it from the designers, it does not work like that. The first child appears in the view and then you click to go forward in time. But in the end, the archives should show the current month and the most recent four months.

So, how do I get that whole set of divs to all shift to the left so that the "tail end"  i.e. the very last child, which will be a <div class="month" of the series it be what appears there when the page is opened?

I will have the same issue whether I load just a single year (only 3 children in that case, four months each) versus what I have now over 32 children with the first four months 1998 aug.sept, oct, nov appearing.
Question by:Sivakatirswami
  • 2
  • 2
LVL 45

Accepted Solution

Chris Stanyon earned 1500 total points
ID: 38424493
Currently the HTML for your archives is in ascending date order. I can't see how you build your HTML, but could you not just reverse the order. So in your HTML instead of having

<div class="months">August 1998, September 1998, October 1998, November 1998</div>
<div class="months">December 1998, January 1999, February 1999, March 1999</div>
<div class="months">April 1999, May 1999, June 1999, July 1999</div>

you switch it around so your html looks like:

<div class="months">April 1999, May 1999, June 1999, July 1999</div>
<div class="months">December 1998, January 1999, February 1999, March 1999</div>
<div class="months">August 1998, September 1998, October 1998, November 1998</div>

The other way of doing this, which I think would be a better way, is to only load the latest 4 months, and then attach a jquery event to your back and forward buttons to load the next or previous 4 months using an ajax call. At the moment you are loading all the data for your archive each time the page loads, whereas you only really need to be loading 4 at a time.

Author Comment

ID: 38425214
Ha!  thanks for thinking out of the box on this. The HTML is built programmatically, so, yes, descending order is a simple tweak in the code that generates this, in fact if it were a vertical scroller that's how it would be - the latest month on top.

I was also thinking of doing something close to  what you describe,  it may be easier to leave the pagination container prev next  alone; keep one file-per year on the back end -- 12 months at a time (descending order) and attach the ajax call to the pull down menu for years.
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38425485
Yeah, a drop down on the year would certainly make it more manageable. A call to the load() function from jQuery would work well for that.

Author Closing Comment

ID: 38427379
jquery load()  never knew about that one. I was on my way to use an older more complex xml request. I see we can also target a div class and extract just that. So I could mark up the file with class="2011" and keep it all in one file

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question