The Fox Comments Page On a Diet

Yes this is an image of the entire Fox Article comments page with all the content aside from the comment section removed. The main benefit of this is scrolling the comments section very easy, because, well that’s all that’s there!

What does this do?

The Fox Comments page uses a layout with an huge amount of wasted space. Removing items from a web page is easy as it’s just HTML. Here are instructions for doing it so all you see are the comments. That’s no excuse for not reading the article, but you can do that before removing it.

Note: As an enhancement if might be nicer to hide these elements so they can be restored so later you can go back and view the article without having to refresh the page.

How is the appearance changed?

Below you can see before and after images. You may say, “that looks the same”, but note the position of the vertical scrollbar.

Fox-comments-before

Before

After

After

In addition, the livefyre page actually has a comment count field located above the area to enter a new comment. That is now shown.

comment_count

What do I need to do?

You need to execute the following javascript code within the web browser.

How does this work?

Web pages use a DOM, or Document Object Model, which is a tree of the elements that make up a web page. The DOM is loaded with the initial HTML of the page and then customized at run time to change the appearance.

Pretty much every browser has developer tools that let you see the DOM. Most also let you delete portions. With Chrome, for example, right click a node and select “Delete element”. This is also useful if you have a site you want to print which has a header or other content you do not want to include.

What the code is doing is selecting nodes in the DOM and calling the remove() function to remove them. Fortunately, livefyre already uses the jQuery javascript library which makes selecting DOM nodes easier that the built in support in web browsers for DOM manipulation.

$(.alert).remove(); indicates to find and remove all node of the CLASS alert and then call remove() on each of them.

$(#bottom).remove(); indicates to remove the single node with the ID bottom. There can be only a single node of any given ID in the DOM.

$([itemprop|=headline]).remove(); indicates to remove any node that has a attribute named itemprop with the value of headline.

What the final line does is to find any node of class fyre-stream-stats and change the class to fyre-stream-stats1. This is an unknown class so the browser displayed it. The prior class, fyre-stream-stats, is marked as not shown in the CSS for the comments page.