The Edge Finder
Previous  Top  Next

PageSnip has an incredibly useful feature called the Edge Finder.

The Edge Finder allows you to "explode" a web page into a series of boxes so that you can see how it is put together and quickly locate the sections of the page that are of interest to you.
clip0011

NOTES:

1) The Edge Finder is a "toggle". Right-clicking and activating it once turns it on. Repeating it on the same page turns it off.

2) Don't worry! When you "explode" a web page, you are not really doing anything to the website where the content is served from! You are only affecting the copy of the web page that is running in Internet Explorer on your computer!


Why do I need an Edge Finder?

Most Internet pages are put together in what reminds you of a series of nested boxes. Some of these boxes are known as TABLES and some as DIVs (there are others - but these two are the important ones here).

These "boxes" serve as containers to hold web content and make it display as interesting pages that often remind you of a newspaper.

While these boxes serve their purpose well, sometimes they make it difficult to select just the right box in order to capture the entire contents of that box in one action or to hide or remove the contents so you don't have to print or save them. Often the boxes themselves are invisible - so being able to point your mouse over the edge of one to get a selection is almost impossible.


How does the Edge Finder work?

The Edge Finder makes a temporary change to the borders of all the TABLE and DIV elements on the page. It makes them VERY wide and uses different colors so they are easy to see.

It also sets the borders to a dashed pattern. This is important because the gaps between the dashes make it easy for you to tell one border outline from another.

Consider this simple web page:
clip0009
There are actually three DIVs inside a table here that separate the content (as shown by the words inside the DIVS).

If you wanted to select only a part of the content (or remove part of it), you could drag and select with the mouse, but on a complex web page it is easier to use the Edge Finder.

To turn on the Edge Finder, just right-click anywhere on the page and select the "Toggle Edge Finder" option:

clip0010

Instantly you will see the results!

clip0011

The web page has "exploded" and you can see the "edge" of each of the DIVs and also of the table itself.

If you wanted to "select" the entire contents of one of these containers - all you would need to do is point the mouse cursor at the "white space" (the "gap") in the dashed line.

Then just right-click and make your PageSnip menu selection.



To illustrate this, let's use the "> PageSnip - Hide Item or Selection" feature to turn off all the content in the DIV with the words "Two" in it.

Just position the mouse in a white space in the dashed line that surrounds the "Two's"

clip0012
(see it on the lower left side - note that the pointer is in the white space...

Next we right click (without moving the mouse) and select the "> PageSnip - Hide Item or Selection" menu option.

clip0013

Instantly the content of the DIV is hidden!

clip0014

Because we used the Edge Finder to help make our "selection" we were able to hide not only the contents of the DIV - but the DIV itself as well.


We can use the same technique to "select" content for snipping!

Here is another example:

clip0015

This time we have a TABLE with a visible border and four DIVs inside.

We want to capture the content of DIVS One and Two.

When we turn on the Edge Finder, we see this:

clip0016

Note that there is a extra DIV this time that we can see surrounds both the One and Two DIVs.

We can use this to make a selection of both of those sets of content at the same time!

We position the mouse over the gaps in the DIV that surrounds both the One and Two DIVs.

clip0017

Then we right-click without moving the mouse and select the "> PageSnip - Add Selection" menu option:

clip0018

Instantly the content of both the One and the Two DIV are captured and sent into PageSnip!

As a bonus - PageSnip changes the border around the "selection" to green so we know that we have captured that content.

clip0019

Weird page explosions (or help me - I've killed my web page!)

Sometimes when PageSnip's edge finder adds the thick dashed border to the TABLES and DIVs on a page, it will cause the page to seem to "fall apart". Usually this is because the containers were tightly fitted and the extra width of the border causes the content to "spill out" of its box.

Often the result will be something like this:

clip0020

You can see how the extra width of the Edge Finder border caused the Three DIV to overflow its bounds and drop below the other two.

In most cases this does not matter. As long as you can see the edge of the container that you want to snip or remove PageSnip will work as expected. The fact that the page is exploded into a different shape does not matter at all.