Accéder au contenu principal

Articles

Affichage des articles du 2014

Dynamic Read This list

I recently stumbled upon a news website with a catchy reading list, and I knew on the spot I needed to get down to work to replicate that effect. You can find a live example of the original concept at the URL below: http://www.thedailybeast.com/articles/2014/09/21/tea-leoni-isn-t-hillary-clinton-but-madam-secretary-may-be-her-benghazi.html In case the URL is no longer valid as you're reading this, here is a screenshot of it.  Basically, there are 5 articles per page. As you scroll the page, the reading list updates so that you can see the progress of your reading and how much is left. Note that the whole pagelet (the "Read THIS.list" box) has a fixed position and thus moves with the scrolling of the page.   What do we need? As usual, I recommend using jQuery (I've become addicted to it!) as it on the one hand highly simplifies development in JS, and on the second hand it will guarantee we can retrieve consistent height/offset values for all browsers at o