www.webdeveloper.com
Results 1 to 5 of 5

Thread: How can you hide Divs if content is blank.

  1. #1
    Join Date
    Aug 2010
    Posts
    34

    How can you hide Divs if content is blank.

    Hi there,

    I would like javascript to be able to hide a div based upon a containing div having no content.

    The text/content of the div is being pulled in by the CMS, if the user has not inputted anything into the CMS how can the container div "CaseStudyRow" be hidden.

    Each div I want to hide (if the cms system says its blank) have ID's assigned to them ; id="1", id="2", id="3" and so on....

    I have the following code: where the div i would like to hide IF the contents are empty according to the CMS is CaseSudyRow.

    Would an If statement be the one needed here ?

    Something like:

    IF div id1 is empty, THEN (CSS) display: none; ?

    I do not know javascript that well, if not at all

    Code:
    Code:
    <div id="1" class="CaseStudyRowFirst">
                <div class="CaseStudySectionName"> Client: </div>			
                <div class="CaseStudyContent" id="Client"></div><!-- CMS stuff -->
            </div>
            <div id="2" class="CaseStudyRow">
                <div class="CaseStudySectionName"> Sector: </div>
                <div class="CaseStudyContent" id="Sector"></div><!-- CMS stuff -->
            </div>
            <div id="3" class="CaseStudyRow">
                <div class="CaseStudySectionName"> Shows / Location: </div>
                <div class="CaseStudyContent" id="Show"></div><!-- CMS stuff -->
            </div>
            <div id="3" class="CaseStudyRow">
                <div class="CaseStudySectionName"> Challenge / Objective: </div>
                <div class="CaseStudyContent" id="Challenge"></div><!-- CMS stuff -->
            </div>
            <div id="4" class="CaseStudyRow">
                <div class="CaseStudySectionName"> Testimonial: </div>
                <div class="CaseStudyContent" id="Testimonial"></div><!-- CMS stuff -->
            </div>
            <div id="5" class="CaseStudyRowLast">
                <div class="CaseStudySectionName"> Additional Text: </div>
                <div class="CaseStudyContent" id="AddedText"></div><!-- CMS stuff -->
            </div>
        </div>
    Thank you for your help

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    If the empty div is written without any "gap", like:
    Code:
    <div id="id1"></div>
    The code is simple:
    Code:
    var mydiv=document.getElementById('id1');
    if(!mydiv.hasChildNodes()){mydiv.style.display='none'}
    But that should be written within a function triggered by an event, following the user's action. Which could be that action of the user?

  3. #3
    Join Date
    Aug 2010
    Posts
    34
    thank you, umm i'm guessing the action would be within the CMS, when the user hits the publish button.

    can it be done on page load event, If so how?

    thanks

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    <script type="text/javascript">
    onload=function(){
    var mydiv=document.getElementById('id1');
    if(!mydiv.hasChildNodes()){mydiv.style.display='none'}
    }
    </script>
    You should really learn javascript if you want to deal with this language.

  5. #5
    Join Date
    Aug 2011
    Posts
    1
    Quote Originally Posted by Kor View Post
    Code:
    <script type="text/javascript">
    onload=function(){
    var mydiv=document.getElementById('id1');
    if(!mydiv.hasChildNodes()){mydiv.style.display='none'}
    }
    </script>
    You should really learn javascript if you want to deal with this language.
    I am trying to do something like this but a little different. My code mimics your code but I am wondering if there is an easier way for this as I have about 50 id's and trying to find a simpler way that what I am doing.

    Code:
    <script type="text/javascript">
    onload=function(){
    var block01=document.getElementById('id1');
    var block02=document.getElementById('id2');
    var block03=document.getElementById('id3');
    var block04=document.getElementById('id4');
    if(!block02.hasChildNodes()){block01.style.display='none'}
    if(!block04.hasChildNodes()){block03.style.display='none'}
    }
    </script>
    
    <table class="addinfo_table">
    <tr id="id1">
    <td id="addinfo_td-left">Type</td>
    <td id="id2"></td>
    </tr>
    <tr id="id3">
    <td id="addinfo_td-left">Length</td>
    <td id="id4"></td>
    </tr>
    </table>

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