How To: Hide Stickybar on Certain Pages using Javascript

Here is how you can hide stickybar on certain pages or posts easily with a little bit of javascript magic. This tutorial will tell you how to hide a specific piece of code from certain pages on your site.

A while back i had built a stickybar for my site for announcing giveaways, latest news and for shoutouts. I also used the stickybar to highlight the latest posts on my blog. While doing so, i found out that the stickybar’s functionality was buggy.

What i wanted it to do:

Load Stickybar on all pages and posts and hide it, only if the post highlighted on the stickybar is the same as the current page. Take for example, a visitor visits your blog and clicks on the post displayed on the stickybar.

Even after he has clicked it and is currently reading the same post, stickybar is still displaying the same post suggestion. It doesn’t have any meaning right?

What the Solution was:

Execute the stickybar javascript on all pages normally, but hide it if the existing page is the same as the post it was suggesting to.

How i did it?

This can be achieved by doing a php query, but if we take this approach, we are simply making an additional request to the database and thus increasing our page load times. Thank god for javascript, i solved this problem in minutes and this solution is way faster and efficient.

Here is the code (paste this in your footer.php):

<script type="text/javascript"> 
if ((window.location != "http://www.revthatup.com/giveaway-of-3-free-unlimited-hosting-accounts/") && (window.location != "http://www.revthatup.com/giveaway-of-3-free-unlimited-hosting-accounts/#comments" )) { 
document.getElementById("stickybar").style.display="block";
}
else {
document.getElementById("stickybar").style.display="none";
}
</script>

Change the above links to the appropriate post for which you want to hide the stickybar. As you can see i have added an another link which has the same href but with a #comments at the end.

This ensures that even when you click on a link that says “Show comments for this post” or something like that, the stickybar will not load.

How it works:

I am using the location object so that it returns the url of the current page to the browser and i am also including the != operator so that i can hide the div “stickybar” if the current window url is the same as the url that i have passed.

When the if part of the code becomes true, then i add the style=”display:block;” property to the div and if it becomes false then i add the style=”display:none;” property, which will hide the div.

Thats all. Now you can implement this code on your stickybar, so that your readers won’t see repeated suggestions for posts.

If you liked this tutorial about how to hide stickybar on certain pages, then you will certainly love our other javascript guides. Subscribe to us to keep you informed and updated!

Subscribe to our Weekly Newsletter

I take your privacy very seriously

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail.