Hide Feedjit Header and Footer

Feedjit is a useful add-on to a website for tracking visitors to your blog. Feedjit shows a little snapshot of when and where each visitor to your site came from. One can easily see visitors from around the world.

However, one difficulty with Feedjit is that it contains a ‘real-time view’ hyperlink to the Feedjit site for traffic statistics. I don’t particularly want this accessible from the front page of my site. I also don’t want the Feedjit advertising to show if I can eliminate it.

So, with a little Javascript, I managed to intercept the Feedjit HTML and modify the resulting display so that it would appear as follows:

How is it done?

The first thing was to figure out how Feedjit works. Feedjit requires that you include in your page a request to load a Feedjit javascript file. What comes back from this is script to create the necessary HTML in your page. This HTML creates an IFRAME window for the Feedjit results so that it can load the visitor information independently from your page load. The Feedjit output is put in the iframe in an HTML table element where each table row represents one visitor to your site. If we can somehow identify the iframe object and the table object in the frame then we can use some javascript to fiddle with the table and remove the top and bottom rows.

Use the Firebug console in Firefox to see the CSS and HTML that was loaded by Feedjit into the browser. This will show that the iframe name was ‘FJIframe’ and the table ID was ‘FJ_Tlist’. This is good, but please understand that this solution is just a hack that is dependent on these coded names. Once Feedjit updates their script or rebuilds their process and changes these names this hack will fail to work.

The first step is to figure out how to edit the table so it appears as we want. Assume for the moment that the Feedjit table has been rendered fully and we are coming in after the fact to fix it up. The function ‘hideFeedjit()’ shown in the code below performs the table row deletions. We must remove the top two rows of advertising and the bottom two rows to get rid of the Feedjit links to the real-time view. We will hide the rows in the table by setting their display style to none so that they take no space.

One difficulty with this solution is that the container div block has already been rendered and sized to fit the full table. When we hide the rows we end up with unused white space at the bottom of the container. To fix this we need to resize our container. This is why we have the named ‘visitor’ div block set up around the Feedjit code. We can resize this object to remove the white space from the missing rows.

The next problem to solve is a timing problem. We can only run the ‘hideFeedjit()’ function after the Feedjit server has responded to the request to load its javascript and its HTML has been created. We don’t know when this will happen. So, we run a little timing loop to periodically check if the iframe has been loaded. This is the purpose of the ‘checkIframeLoading()’ function. If we can see that the iframe is fully populated and the table in the iframe exists then we can perform our edits.

The operative test to see if the iframe is loaded is to check if readyState == ‘complete’. This works in Internet Explorer and Firefox version 3.6 or later. But, for some reason Internet Explorer versions prior to version 8 would not identify the iframe object if it was searched for by name.

The last step is to start this whole process once my web page is loaded. We activate the function as soon as it is declared but we know that the page load may not be complete. This is why we check for existance of the iframe and table objects. If they are undefined we simply wait a bit and try again.

This solution is fault tolerant. If it fails to find the required objects or delays in load times occur then the worst thing that will happen is that you will see the uncorrected Feedjit display. We also shut the timing loop down after 100 iterations or 10 seconds to be nice to our web browser. So, as web transfer delays are always possible there is no guarantee that it will hide the Feedjit links all the time, every time.

Good luck! You can see this Feedjit hack operating on the home page of Kisekae World

.

 

WordPress Text Widget Contents

Validated in Firefox, Internet Explore 8.0 and later, Chrome, and Safari

Copy this code into a WordPress text widget. Or, if you are not using WordPress or some other content management system then simply insert this code into your web page where you want the Feedjit output to appear. Note, you will have to replace the identified Feedjit script link with your own code. See the Feedjit site.

<div id="visitors">

<script type="text/javascript" src="http://feedjit.com/serve/?... ">
</script>


<script type="text/javascript">
var loop = 100 ;
function checkIframeLoading() {
   // Get a handle to the iframe element

   var iframe = window.frames['FJIframe'];
   // Check if loading is complete
    if (iframe) {
      if ( iframe.document.readyState == 'complete' ) {
        var table = iframe.document.getElementById('FJ_TList') ;
        if (table) {
           // The loading is complete, call the function we want executed once the iframe is loaded
           hideFeedjit();
           return;
        }
      }
   }

   // If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds.
   loop = loop - 1 ;
   if (loop > 0) {
      window.setTimeout('checkIframeLoading();', 100);  
   }
}
checkIframeLoading();
</script>

<script type="text/javascript">
function hideFeedjit() {
   var iframe = window.frames['FJIframe'];
   var table = iframe.document.getElementById('FJ_TList') ;
   var div = document.getElementById('visitors') ;
   var th1 = table.offsetHeight ;
   var dh1 = div.offsetHeight ;
   table.rows[0].style.display = 'none' ;
   table.rows[1].style.display = 'none' ;
   table.rows[table.rows.length-1].style.display = 'none' ;
   table.rows[table.rows.length-2].style.display = 'none' ;
   var th2 = table.offsetHeight ;
   var dh2 = dh1 - (th1-th2) ;
   div.style.height = dh2+'px' ;
}
</script>
</div>