Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Manipulate a web browser to hide a certain HTML element in a certain website by a single action
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
2 answers
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.
0 comment threads
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.
0 comment threads
2 comment threads