Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs

Dashboard
Notifications
Mark all as read
Q&A

Manipulate a web browser to hide a certain HTML element in a certain website by a single action

+2
−2

Before I publish a new webpage in my website (in the content management system itself), I zoom in from say 100% zooming to 500% zooming and then re-read it, as a nice way to check for typos.

The problem is that a very certain initiated popup (a JavaScript popup appearing pretty much when the webpage starts) appears and in high zooming levels covers about 40% of the text so that each time I have to go to the browser's developer tools, inspect that popup element and set display: none to it.

I can automatically hide the popup with a user script, running from a user script manager on all webpages of my domain but I need a more focal approach such as some keyboard shortcut to set that element to display: none.

How would you do that?

I use Windows 10 but would prefer an approach different than AutoHotkey

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

2 comment threads

Something to consider... (1 comment)
Userscript that creates a hotkey to hide the element (2 comments)

2 answers

You are accessing this answer with a direct link, so it's being shown above all other answers regardless of its score. You can return to the normal view.

+3
−0

Following Alexei's comment I tried the following code which worked:

window.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.altKey && event.key === 'l') {
    document.querySelector(".cbntphone_icon").style.display = "none";
  }
});

We listen to any relevant keyboard-key-down event in the browser window, per the if statement.
If Ctrl+Alt+l are pressed, than the element becomes hidden.

Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

+0
−0

An alternative to creating a userscript is to use a bookmarklet. This is a bookmark that contains an executable snippet of Javascript code. When you click on it, that code will get executed in the context of the current page. This has a few advantages vs. a userscript. You can easily control exactly when and how many times the script fires, and you can use it on any page (not just those you pre-configured the userscript to run on).

Leveraging the code in your answer, create a new bookmark in your browser and use the following as the URL:

javascript: (() => {document.querySelector(".cbntphone_icon").style.display="none";})();

Place that bookmark on your browser's "bookmarks toolbar" for ease of access. Now, whenever that popup appears, click on that bookmark and the popup will disappear.

I find this particularly helpful when modifying pages with dynamically generated content (i.e., ads that get created when reading down a page that uses "infinite scrolling"). Whenever I see a new ad get injected, I hit the button again to find and delete the ad. A userscript would run once, and any ad created after that point wouldn't be affected.

Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

Sign up to answer this question »