Im currently trying to place a social media panel in my website (which i have done via my main template) however im having an issue trying to make sure it dosnt display on certain pages - ie login page, order page etc…
The code below is what i have and i cant even get it to work on a single URL - can someone help / tell me how i cna get this to work on a single link then how i can add multiple url’s ?
The pages are generated via PHP but the main template is pushed out onto all pages. i have set up the div section for the content i need and it displays correctly on all pages - just im having an issue making sure it Dosnt display on the pages i dont want it to!
Im still learning alot each day about web development but PHP is not something i know anything about, i know about HTML and CSS, the template is a .ascx
The best solution would be to prevent the panel being added when the page is generated on the server. You can do it in JS, but it’s not ideal as the panel obviously won’t be hidden if the user has JS disabled, and may briefly appear on screen as the page is loaded, before the JS kicks in to hide it.
Having said that, if you’re not able to change things on the server side for some reason, I can show you how to do it with JS. Do you use jQuery on the site?
On second thoughts, don’t worry about jQuery, we can do it without:
<script>
(function(){
var urls = [
'/login',
'/order'
];
for (var i=0; i < urls.length; i++) {
if (window.location.pathname === urls[i]) {
document.getElementById('hideMe').style.display = 'none';
}
}
})();
</script>
Add this script at the bottom of your page (before the closing </body> tag), and give the div that you want to hide an ID (I’ve used hideMe in the example above). You can add more pages by adding the url to the urls array (note: don’t add the domain name, just everything from the first forward slash onwards).
This should be compatible with older versions of IE too, but I’ve not tested it. As I said before, it’s not the best way to do it, but it should get you out of a fix.
Ok i think there might be an issue with some of the things im working on and this code.
All of the template .ascx dont have any body tags - so iv just placed this at the bottom of the template and it still dosnt hide the div.
As well as this i changed the Div from a class to an id.
here is the full page of code i am working on ( word of warning there is alot - the script is at the bottom and the div is mid way through roughly line 70+
I’m a little confused now… from your earlier posts I’d assumed you were only able to edit some kind of main page template, which is why you wanted to put code there to hide the social media div on certain pages. But from what you’re saying now, it sounds like you can edit the templates for individual pages, is that right? If so, why not just add the div only to the pages where you need it?
this is technically the Header template which deals with all the … well header stuff for the website - the social media icons are to be placed in there but not shown on certain pages that use this template. so its some form of a main template ( by that i mean its used on a majority of pages but not actually THE main template - sorry for my bad description )
Is there a way of using this but in reverse? i want a div to only display on one page but in order to do so i need to place it on the template that is used across many pages.
So if page = Myaccount {
Show Div
}
Else
{
Dont show Div
}