CODEWITHSUNDEEP
javascriptjqueryhtmlhide
SorryEh
SorryEh

Reputation: 928

How to hide an HTML element from appearing on other pages for desktop only?

I have a situation where I am creating a website via CMS and using page wrappers. Page wrappers css/html etc will apply to all pages, so if I create a custom button which i have, called "Start a Fundraiser", this button appears on all pages. I was wondering if there was a javascript method or something else that could hide it from other pages or force it to only appear in the greeting page only, preferably applied to desktop only with the way it displays on mobile phones it looks fantastic, but if that over complicates it, I'm fine with hiding it on mobile version's other pages too.

Test Page <== my test page here if you went to "Learn More" tab and opened the drop downs, the Start a fundraiser button would pull down from wherever it was sitting.

Now the CMS does have the ability to create a variety of conditional statements, but it is the most confusing thing ever, here's an example:

Simple Tests
If the test case matches, do one thing or do nothing:
[[?xx[[S1:first_name]]xx::xxBobxx::Hi, Bob!::]]
If the first_name is Bob, render "Hi, Bob!", if not, render nothing.
If the test case matches, do one thing or do another thing:
[[?xx[[S1:first_name]]xx::xxBobxx::Hi, Bob!::Hello.]]
If the first_name is Bob, render "Hi, Bob!", if not, render "Hello."

Now there are over 100 S-tags, and none of them specifically say "hide" or anything like that, so It's taking a while going through each one of them because they have very generic titles, so in the mean time I was hoping for some kind of solution to speed things up.

And their customer service didn't help lol, gave me the links to the code I posted above.

EDIT It has been brought to my attention that it is possible that the CMS uses PHP, however I have access to none of the html documents so I can't check to see if php tags are being used. In the page wrapper though, I can call the HTML document I need by using this S-tag command:

[[S63:3]]

and it pulls all the body content. So that's why I can't tell if it is using PHP or not. The CMS system is called Luminate Online (now owned by Blackbaud)

Here's an image of how plugging in data looks, and how the page wrapper is being made. It says HTML Body on the left hand, but it's not, its basically a style wrapper that gets applied to any html page that uses it, whoever set this up created the content elsewhere that's inaccessible and that person is no longer with us.

Page Wrapper

If you require any additional information please feel free to ask! i will provide what i can!

Any suggestion is grealty appreciated! thank you for your time.

Upvotes: 1

Views: 817

Answers (2)

Richard Howell
Richard Howell

Reputation: 359

Here is a JavaScript solution assuming your button has an ID:

    // Set your target url
    var url = 'http://yourdomain.com/targeturl';

    if ( document.URL == url ){
        // If it is the target show the button
        document.getElementById("x").style.display = 'block';
    }else{
        // If it is not the target page hide the button
        document.getElementById("x").style.display = 'none !important';   
    }

A CSS solution to hide the button on all device widths except desktop:

   #x {
      display: none;
   }
   @media ( min-width: 992px ) {
      #x {
         display: block;
      }
   }

Be sure to change "x" to the ID of the button.

Here is a jQuery alternative with your specific URL and IDs:

    var url = "http://convio.cancer.ca/site/TR?fr_id=21959&pg=entry";
    if ( window.location.href == url ){
        $( '#hmpgonly').css( 'display', 'block' );
    } else {
        $( '#hmpgonly').css( 'display', 'none !important' );
    }

On that page it will show the button, on all others it should remove it. I tested this in your console after page load.

Upvotes: 3

Cesar Bielich
Cesar Bielich

Reputation: 4945

Looks like you are using PhP, so you can do something like this.

Show on all pages but "/site/TR/Events/General/" one

if ($_SERVER['SCRIPT_NAME'] != '/site/TR/Events/General/index.php') {
    ///code here
}

Show on just "/site/TR/Events/General/" page

if ($_SERVER['SCRIPT_NAME'] == '/site/TR/Events/General/index.php') {
    ///code here
}

I like to use $_SERVER['SCRIPT_NAME'] since it shows the base path which eliminates issues with dynamic paths like /dir/?this=that&that=this.

Upvotes: 1

Related Questions