v1.0 Release – Various Changes to Improve the OnScroll Patch

Yesterday, ted reviewed my onScroll patch and and he outlined some changes that I should look to make. Lets dive in right away and have a look at what I have changed according to his recommendations:

Move javascript to an external file

ted recommended that I move all my JavaScript to an external file since the amount of lines was just too much. Having all that code in the script tags is not ideal. Thus, I’ve now moved all my JavaScript code to an external file leaving only the following in hg_templates/pushlog.tmpl:

var start = 0;
if(window.top.location.search.substring(1) == "")
$(window).scroll(function() {
  if(start > 0) {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {

Change the parity counter

I’ve also changed how I deal with the parity counter which is responsible for setting up the class of each row. In the pushlog the class value of the rows alternates between ‘parity0′ and ‘parity1′. Beforehand I was using an if/else block to replicate this functionality for the new entries loaded on scroll. However, this has now been changed to the following which is a better implementation:

var row = $(document.createElement('tr'));
row.addClass('parity' + counter % 2);

So basically if the counter is an odd value counter % 2 will return 1, otherwise it will return 0. For each row I increment the counter by 1, which means that it alternates between an even and odd value.

Change how max entries is retrieved

ted was wondering why I was doing the following to retrieve the total amount of entries in the database:

<div id="page_header" class="page_header" maxentries="#max#">
start = ($("#page_header").attr("maxentries")) - 10;

I know that the above implementation was a very round about way of doing this. In my earlier implementations I had tried doing what he recommended, which is to just declare var start = {max} but for some odd reason that didn’t work for me initially. I tried this again today and now somehow it works. This had me very confused and frustrated. I thought a bit harder about this oddity and realized that what I had probably tried beforehand was this: var start =’{max}’ which sets start to an empty string. Anyways, I’ve rectified the situation and now I do the following to set the value of the ‘start’ variable:

function fillPage(max) {
  start = max - 10;
  var vHeight = 0;
  if (document.documentElement)
    vHeight = document.documentElement.clientHeight;
    vHeight = document.body.clientHeight;
  if (document.body.offsetHeight &lt; vHeight) {
    for(var count = 0, offSetHeight = document.body.offsetHeight; offSetHeight &lt; vHeight; count++)
      offSetHeight += 180;
    if(count &gt; 0)

OnScroll should not work with any pushlog queries

ted brought up a very good point in one of his comments on the bug page. He asked what would happen if a user ran a query? Would the pushlog try to load more entries even though the user just wants to see his query data? Well, for my previous implementation the answer was yes. The function fillPage() would get called when the query is loaded and it would try to load more entries. I needed to fix this situation and I did so by adding the following code:

if(window.top.location.search.substring(1) == "")

window.top.location.search.substring(1) will return an empty string if no query has been executed. Thus I can just perform a simple if statement to check whether the pushlog is being loaded normally or is a query being executed. If it happens to be the former then fillPage() is called, otherwise it isn’t.

This entry was posted in DPS911, Mercurial Project, Open Source and tagged , . Bookmark the permalink.

One Response to v1.0 Release – Various Changes to Improve the OnScroll Patch

  1. i just wanna thank you for sharing your this info on your blog

    Sent from my Android phone

Leave a Reply to television fan Cancel reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>