Remove Items from Websites that Get in Your Way

Many websites I visit have pop-up advertising that is embedded within a page. These ads are typically layered over top of the content I want to see. The websites usually provide a way to close the ads, but what happens if the close button is missing? Or what if a website has a syntax error which causes elements on the page to overlap? You may be able to dig through the page's source code to find the content of interest…or you could get rid of the thing standing in your way.

Background

Recently, I was seeking information on a collectible dice game called Marvel Dice Masters. Upon visiting the official website (http://dicemasters.com/), I was greeted with the advertisement shown in Figure 1.

Screenshot showing the Marvel Dice Master advertisement
Figure 1. Marvel Dice Master Advertisement

As you may notice, the ad doesn't have a close button. This becomes problematic when I try using the website's navigation. Hovering the mouse cursor over the "Rules" option shows a fly-out menu, but it's obscured by the ad (see Figure 2).

Screenshot showing the fly-out menu behind the Marvel Dice Master advertisement
Figure 2. Obscured Fly-Out Menu

I tried a few different tricks to get rid of the ad. Clicking on the text around the ad, for example, didn't work. The ad also didn't seem to use a timer.

The only thing that kind of worked was to scroll the page around. The ad was set to always be in the same location allowing me to somewhat see the menu options. However, it would be much more convent to close the ad.

Solution

Even though there doesn't appear to be a way to close / hide the advertisement, it can be removed. In Google Chrome, for example, you can right-click the ad. Then click Inspect Element (see Figure 3) which opens the Developer Tools panel.

Screenshot showing the Inspect Element option
Figure 3. Inspect Element Option

Note that the Developer Tools panel automatically highlights the code for the advertisement's image tag (see Figure 4).

Screenshot showing the image tag for the advertisement
Figure 4. Highlighted Image Tag

With the image tag highlighted, you can hit the delete key to remove the image tag which in turn removes the advertisement (see Figure 5).

Screenshot showing the fly-out menu without the ad getting in the way
Figure 5. Highlighted Image Tag

Final Thoughts

It should be mentioned that this is only a temporary solution. When you visit another page on the Marvel Dice Masters website, the floating ad will return. The ad also reappears if you reload the page or visit the website at another time.

Related Posts

0 Comments

There are currently no comments.

Leave a Comment