How to hide code / Div based on contents in URL using Javascript

There are some reasons where you want certain button / image to be hidden for some section of URL’s. For example, we are showing “Publish New Ad” button on one of our website which is visible for all URL’s of a website, and same also becomes visible on “publish-new.html” html page which is opened once user clicks on that button.

But since the user is already on “publish-new.html” page, there is no point in showing the same button again to user, so we wanted to hide this button only on URL which contains string “publish-new”. We achieved this with following Javascript code,

URL = window.location.href;
if (!URL.includes("publish-new")) {
button_html = "<a href=\"\" style=\"position:fixed;bottom:10px; left: 35%; right: 35%; width: 30%;\"> <button type=\"button\" class=\"btn btn-primary btn-sm\" style=\"background-color:#2f9d17;\"> <b> Post Free Ad </b></button></a>";
document.getElementById("hide_publish_button").innerHTML = button_html;
<p id="hide_publish_button"></p>

As you can see above, we used “window.location.href” to know what is the current URL and then with “!URL.includes(“publish-new”)” code, we decided to show buttons only when the URL doesn’t included “publish-new” and hence “Publish New” button will gets hidden for “publish-new.html”

Android Android Commands Android Java Applications Application Libraries Application Stack / User Interface Bash / Shell Scripts Commands and Packages Compilation Content Management System - CMS Core Kernel C Programs Development & Build Development Environment Setup Errors & Failures Flutter git Go Language Programs Hardware Platforms HTML JAVA Programs Kernel & Device Drivers Linux, OS Concepts and Networking Linux Device Drivers Linux Host, Ubuntu, SysAdmin Linux Kernel Linux Networking Middleware Libraries, HAL Monetization / Google AdSense NDK / Middleware / HAL OS Concepts PHP Programming Languages RaspberryPi Scripting and Automation Search Engine Optimisation ( SEO ) Social Media Socurce Code Management ( SCM ) System Administration, Security Testing and Debugging Uncategorized User Interface Userspace Utilities Web design and development Wordpress Yocto / Bitbake / Openembedded

Leave a Reply / Ask Question