www.webdeveloper.com
Results 1 to 7 of 7

Thread: How to hide a div using innerhtml

  1. #1
    Join Date
    Jan 2014
    Posts
    3

    How to hide a div using innerhtml

    Hi,

    I would like to do the following :

    Hide a div <div id="one"> if a string (textstring) or if another div (<div id="two">) is included in the html code of one page of my web site.

    The div to hide is as follows :

    <div id="one">
    ....
    <h4>textstring</h4>
    ....
    <div id="two">
    ....
    </div>
    ...
    </div>


    I am a beginner in both php and javascript.

    I guess that it should be possible to test with innerhtml whether textstring or div id="two" is absent or present.
    Then, if one of them is present, I also guess that a javascript code could hide the div id="one".

    But unfortunately, I am unable to write the expected code.

    So, I thank anyone in advance for any help in this matter.

    Patrick

  2. #2
    Join Date
    Oct 2013
    Posts
    600
    Try this:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <script>
    	function hide(){
    	  if ((document.getElementById('test').innerHTML == 'textstring') || (document.getElementById('two'))) {
    	      document.getElementById('one').style.display='none';
    	  }
    	}
        </script>
    </head>
    <body onload="hide()">
    <div id="one">
    ....
    <h4 id="test">textstring</h4>
    ....
    <div id="two">
    ...
    </div>
    ...
    </div>
    </body
    </html>

  3. #3
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Here's a quick method using jQuery:
    http://jsfiddle.net/y5EQW/1/

  4. #4
    Join Date
    Jan 2014
    Posts
    3
    Hi,

    Thank you Kevin2 and cbVision for your replies.

    1- Unfortunately, I made a mistake in my request.
    The correct request would have been :
    Hide a div <div id="one"> if a string (textstring) or if another div (<div id="two">) is NOT included in the html code of one page of my web site.

    2- I have not access to the <body> tag

    Thank you again in advance for any solution.

    Patrick

  5. #5
    Join Date
    Oct 2013
    Posts
    600
    Answer to 1:
    Code:
        <script>
    	function hide(){
    	  if ((document.getElementById('test').innerHTML != 'textstring') || (!document.getElementById('two'))) {
    	      document.getElementById('one').style.display='none';
    	  }
    	}
        </script>
    Answer to 2 is that you're probably screwed. If you don't have access to the body tag you probably can't add the necessary JavaScript into the <head> or call it appropriately, whether you use pure JavaScript or jQuery.

  6. #6
    Join Date
    Jan 2014
    Posts
    3
    Hi,

    Thank you for your prompt reply.

    1- I have access to the external .js file where I can add the function code :

    function hide(){
    if ((document.getElementById('test').innerHTML != 'textstring') || (!document.getElementById('two'))) {
    document.getElementById('one').style.display='none';
    }
    }

    2- I have also access to the .tpl (template) file where is located the here below code :
    <div id="one">
    ....
    <h4>textstring</h4>
    ....
    <div id="two">
    ....
    </div>
    ...
    </div>

    Is there any code that I could add to the .tpl file in order to activate the hide function ?

    Thank you very much again.

    Patrick

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    you can add this code into your template file (the lower in its content the better)

    Code:
    <script>
    /* this is to save possible already existing onload functions*/
    var old_onload=window.onload;
    /* this is to set new onload up with executing possible previously set functions */
    window.onload=function(){
    hide();
    old_onload();
    }
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles