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

Posted on 2012-09-21
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
    LVL 42

    Accepted Solution

    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

    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 42

    Expert Comment

    by:Chris Stanyon
    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

    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
    The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now