Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Displaying HTML Code Only on Specific Pages

    Basically what I need to do is cause a bit of HTML to only display on a specific page. I have figured out how to do most of the work i.e. figuring out what page that the code is being displayed on, etc. However, for some reason the DOM element that I am using will not update based on the Javascript. I have searched the Internet for a solution and unfortunately I have found none.
    Here is the version of the code that I am currently working on:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function DisplayButton() {
      var DesiredPage = 'Page to Display';
      //Page that I want the code to display on
      var sPath = window.location.pathname;
      var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
      //This determines and places in a variable what page that the code will be on
      if (sPage == DesiredPage) {
    	document.getElementById('HiddenCode').style.display = "block";
      }
    }
    </script>
    <p Id="HiddenCode" style="display:none">Code only to be displayed on indicated page</p>
    </head>
    </html>
    I am somewhat new to Javascript so I feel like I might be missing something obvious here.

    Thank You to anyone who can help.
    Zbot
    Last edited by Zbot; 09-10-2011 at 05:21 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    So have you debugged??

    Even if you don't know how to use a debugger (and you should...you should install and use FireBug with Firefox), you can add in a little debug code:

    Code:
    window.onload = function DisplayButton() {
      var DesiredPage = 'Page to Display';
      //Page that I want the code to display on
      var sPath = window.location.pathname;
      var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
      alert( "DesiredPage=" + DesiredPage + "\nsPage=" + sPage);
      //This determines and places in a variable what page that the code will be on
      if (sPage == DesiredPage) {
    	document.getElementById('HiddenCode').style.display = "block";
      }
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    For a test, add the highlighted code to your page and run a test again:

    Code:
    window.onload = function DisplayButton() {
      var DesiredPage = 'Page to Display';
      //Page that I want the code to display on
      var sPath = window.location.pathname;
      var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
      //This determines and places in a variable what page that the code will be on
      if (sPage == DesiredPage) {
        if(document.getElementById('HiddenCode')){
          alert('You\'re good to go!');
          document.getElementById('HiddenCode').style.display = "block";
        }
        else{
          alert('The page hasn\'t really finished loading yet but the window.onload event fired anyway...');
        }
      }
    }
    Last edited by Rowsdower!; 09-09-2011 at 09:43 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, I have debugged. However, even when the two values are not equal the "Code only to be displayed on indicated page still shows up. That is the problem.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Oh, doh on me!

    You are *CREATING* the function when you load the window, but you *NEVER* call it!!!!

    Simplest fix:
    Code:
    <script>
    function DisplayButton() {
      var DesiredPage = 'Page to Display';
      //Page that I want the code to display on
      var sPath = window.location.pathname;
      var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
      //This determines and places in a variable what page that the code will be on
      if (sPage == DesiredPage) {
    	document.getElementById('HiddenCode').style.display = "block";
      }
    }
    window.onload = DisplayButton;
    </script>
    Other ways to do this, but this is simplest.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Rowsdower!: The test you gave me told me that my issue lies within I would assume that the window.onload is firing before the page fully loads. How might I fix that issue?

    Old Pendant: Yeah now i realize that it was not loading the function, derp. However, even when I do call the function it does not function as intended. I.E. it will still display the code when it is on the "wrong" page. I think that it might have something to do with what Rowsdoer! said. However, I am not sure exactly how to fix that.
    Last edited by Zbot; 09-10-2011 at 12:06 AM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    http://www.mywhizbang.com/ShowMe1.html

    Go ahead. Look at it.

    Click on your VIEW menu. Click on your SOURCE (or PAGE SOURCE) menu item.

    Then click on the "Go to other page" link.

    Well?

    Enough said?

    I have no idea what you are doing wrong in your actual code. But the code as given works perfectly.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Zbot (09-10-2011)

  • #8
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Old Pendant, I don't know what you did, but it works now great, appreciate the help, I'll change the topic to resolved if I can.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •