www.webdeveloper.com
Results 1 to 12 of 12

Thread: Hide divs with empty spans?

Hybrid View

  1. #1
    Join Date
    Dec 2008
    Posts
    11

    Question Hide divs with empty spans?

    Is there a simple javascript snippet that can achieve this effect?

    I have the following code that is being dynamically generated by joomla:

    HTML Code:
    <div class="cbUserListFieldLine"><span class="cbUserListFieldTitle cbUserListFT_cb_extdesc">Specialty:</span> <span class="cbListFieldCont cbUserListFC_cb_extdesc"> </span></div>
    Is there a snippet of javascript that could specify to make the div with class "cbUserListFieldLine" invisible if the span with class "cbUserListFC_cb_extdesc" is empty?

    Sorry, I'm still very new to hand coding javascript and don't even know where to start with making it do what I want it to. Even a general direction would be helpful.

    Thanks!

  2. #2
    Join Date
    Aug 2009
    Location
    York, UK
    Posts
    13
    Firstly, can need to give your elements an "ID", so we can get a reference to them.
    So, lets give the span an ID of "mySpan" and the Div and ID of "myDiv", as follows:

    Code:
    <div id="myDiv" class="cbUserListFieldLine"><span class="cbUserListFieldTitle cbUserListFT_cb_extdesc">Specialty:</span> <span id="mySpan" class="cbListFieldCont cbUserListFC_cb_extdesc"> </span></div>
    Then, we can do what you want easily with the following code:

    Code:
    if (document.getElementById("mySpan").innerHTML == "")
    {
        doucment.getElementById("myDiv").style.display = "none";
    }
    Does that help?

  3. #3
    Join Date
    Feb 2006
    Posts
    2,927
    Code:
    window.onload=function(){
        var spans= document.getElementsByTagName('span');
        var i= 0, L= spans.length, tem, pa;
        while(i<L){
            tem= spans[i++];
            if(tem.className.indexOf('cbUserListFC_cb_extdesc')!= -1 && !tem.textContent && !tem.innerText){
                tem.parentNode.style.display== 'none';
            }
        }
    }

  4. #4
    Join Date
    Dec 2008
    Posts
    11
    Thank you both but I'm still not having any luck...

    ilawton: I cannot hack the dynamically created code so adding ids is not an option for me...sorry. :/

    mrhoo: Your solution looks like it should work perfectly but has no effect in the page. This is the code after being implemented, did I do something wrong?

    I've included the entire head of the document because it dynamically adds quite a bit of javascript, including jquery. Just trying to make sure I don't have a conflict happening. Your code is at the very bottom.

    HTML Code:
    <head>
    
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta name="robots" content="index, follow" />
      <meta name="keywords" content="joomla, Joomla" />
      <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
      <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
      <title>Member Directory</title>
    
      <link rel="stylesheet" href="http://www.go9gator.com/mindgains.org/components/com_comprofiler/plugin/templates/default/template.css" type="text/css" />
      <script type="text/javascript" src="http://www.go9gator.com/mindgains.org/components/com_comprofiler/js/jquery-1.3.2/jquery-1.3.2.min.js"></script><script type="text/javascript"><!--
    jQuery.noConflict();
    --></script>
    	<script type="text/javascript" src="http://www.go9gator.com/mindgains.org/components/com_comprofiler/js/tabpane.min.js"></script>
    	<script type="text/javascript"><!--
    jQuery(document).ready(function($){
    var cbshowtabsArray = new Array();
    function showCBTab( sName ) {
    	if ( typeof(sName) == 'string' ) {
    		sName = sName.toLowerCase();
    	}
    	for (var i=0;i<cbshowtabsArray.length;i++) {
    		for (var j=0;j<cbshowtabsArray[i][0].length;j++) {
    			if (cbshowtabsArray[i][0][j] == sName) {
    				eval(cbshowtabsArray[i][1]);
    				return;
    			}
    		}
    	}
    }
    
     {
    		var cbUserURLs = new Array('http://www.go9gator.com/mindgains.org/index.php?option=com_comprofiler&task=userProfile&user=62&Itemid=3','http://www.go9gator.com/mindgains.org/index.php?option=com_comprofiler&task=userProfile&user=66&Itemid=3','http://www.go9gator.com/mindgains.org/index.php?option=com_comprofiler&task=userProfile&user=65&Itemid=3','');
    		$('#cbUserTable > tbody > tr').click( function(e) {
    			if ( ! ( $(e.target).is('a') || ( $(e.target).is('img') && $(e.target).parent().is('a') ) || $(e.target).hasClass('cbClicksInside') || ( $(e.target).parents('.cbClicksInside').length > 0 ) ) ) {
    				window.location = cbUserURLs[this.id.substr(3)];
    				return false;
    			}
    		} );
    	}
    	$('#cbUserListsSearchTrigger').show();
    	$('#cbUserListsSearcher').hide();
    	$('#cbUserListsSearchTrigger').click( function() {
    		$('#cbUserListsSearchTrigger').hide('medium', function() {
    			$('#cbUserListsSearcher').slideDown('slow');
    		} );
    		return false;
    	} );
    
    {
    	function cbsearchkrit(thisSelect) {
    		var kindval = $(thisSelect).val();
    		if ( kindval == '' ) {
    			$(thisSelect).parent( 'div' ).next('div.cbSearchCriteria').slideUp('slow');
    		} else {
    			$(thisSelect).parent( 'div' ).next('div.cbSearchCriteria').slideDown('slow');
    			if ( ( kindval == 'is' ) || ( kindval == 'isnot' ) ) {
    				$(thisSelect).parent('div').next('div.cbSearchCriteria.cb__js_radio').find('input:checkbox').parent().each( function() {
    				    return $(this).html( $(this).html().replace(/(name=)("?)([^"\[ >]+)(\[\])("?)([ >])/g, '$1"$3"$6').replace(/type="?checkbox"?/g,'type="radio"') );
    				} );
    				$(thisSelect).parent('div').next('div.cbSearchCriteria.cb__js_select').each( function() {
    				    return $(this).html( $(this).html().replace(/(name=)("?)([^"\[ >]+)(\[\])("?)([ >])/g, '$1"$3"$6').replace(/multiple(=("?)multiple("?))?/gi,'') );
    				} );
    			} else {
    				$(thisSelect).parent('div').next('div.cbSearchCriteria.cb__js_radio').find('input:radio').parent().each( function() {
    				    return $(this).html( $(this).html().replace(/(name=)("?)([^"\[ >]+)(\[\])?("?)([ >])/g, '$1"$3\[\]"$6').replace(/type="?radio"?/g,'type="checkbox"') );
    				} );
    				$(thisSelect).parent('div').next('div.cbSearchCriteria.cb__js_select').each( function() {
    				    return $(this).html( $(this).html().replace(/(name=)("?)([^"\[ >]+)(\[\])?("?)([ >])/g, '$1"$3\[\]"$6').replace(/(<select )/gi,'$1multiple="multiple" ').replace(/size=("?)[^" >]*("?)/g,'size="0"') );
    				} );
    			}
    		}
    	}
    	$('div.cbSearchKind select').click( function() {
    		cbsearchkrit( this );
    	} ).click();
    	$('div.cbSearchKind select').change( function() {
    		cbsearchkrit( this );
    	} );
    }});
    --></script>
    
    
    <link rel="stylesheet" href="/mindgains.org/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="/mindgains.org/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="/mindgains.org/templates/siteground-j15-18/css/template.css" type="text/css" />
    
    <script type="text/javascript">
    window.onload=function(){
        var spans= document.getElementsByTagName('span');
        var i= 0, L= spans.length, tem, pa;
        while(i<L){
            tem= spans[i++];
            if(tem.className.indexOf('cbUserListFC_cb_extdesc')!= -1 && !tem.textContent && !tem.innerText){
                tem.parentNode.style.display== 'none';
            }
        }
    }
    </script>
    </head>

  5. #5
    Join Date
    Aug 2009
    Location
    York, UK
    Posts
    13
    mrhoo's code is your best bet for sure, but it does have a syntax issue, such as == where it should be =

    Try this instead:

    Code:
    window.onload=function(){
        var spans= document.getElementsByTagName('span');
        var i= 0, L= spans.length, tem, pa;
        while(i<L){
            tem= spans[i++];
            if(tem.className.indexOf('cbUserListFC_cb_extdesc')!= -1 && !tem.textContent && !tem.innerText){
                tem.parentNode.style.display = 'none';
            }
        }
    }

  6. #6
    Join Date
    Dec 2008
    Posts
    11
    I'm so sorry. I'm still not getting anything... Would it help if you guys could see the page?

    http://www.go9gator.com/mindgains.or...slist&Itemid=3

    As you can see, the "Specialty:" fields are the empty ones that I'm trying to get rid of...

    Again, sorry for the difficulty and thanks for all of the help.

  7. #7
    Join Date
    Dec 2008
    Posts
    11
    EDIT: Looks like I had the class wrong...It should be if class "cbListFieldCont" is empty then the parent div should be display=none. However, if I change the javascript to accommodate that, it just makes the user pictures disappear, and the empty "Specialty:" fields remain visible....

  8. #8
    Join Date
    Aug 2009
    Location
    York, UK
    Posts
    13
    Yep, you should be looking for only the fields that are Speciality ones... The code from before was fine, but you just needed to look for "cbUserListFC_cb_description" as well as "cbUserListFC_cb_extdesc".

    So, the code should be:

    Code:
    window.onload=function(){ 
        var spans= document.getElementsByTagName('span');
        var i= 0, L= spans.length, tem, pa;
        while(i<L){
            tem= spans[i++];
            if((tem.className.indexOf('cbUserListFC_cb_extdesc')!= -1 || tem.className.indexOf('cbUserListFC_cb_description')) && !tem.textContent && !tem.innerText){
                tem.parentNode.style.display = "none";
            }
        }
    }

    I tested the above and it works good. No Speciality tags!


    Also, the following bit of code is throwing a javascript error. So, I'd remove it if I were you.

    Code:
    <script type="text/javascript"> 
    if ($(".cbUserListFC_cb_extdesc").html() == "") { $(".cbUserListFieldLine").css("display", "none"); }
    </script>
    I assume this is something you put in before.

  9. #9
    Join Date
    Dec 2008
    Posts
    11
    Getting closer for sure.

    It looks like this code is working in IE, but in Firefox, the Specialty tags are still there...

    ...and for some reason in both browsers the javascript is also removing my user pictures and login fields on the left as well as creating some weird display issues with the header. :/

    Any ideas what may cause this? Does the "parentNode" include more than just the divs that the spans are in?
    Last edited by adefesche; 08-12-2009 at 11:55 AM.

  10. #10
    Join Date
    Aug 2009
    Location
    York, UK
    Posts
    13
    Ah yes... ok, this should be it:

    Code:
    window.onload=function(){ 
        var spans= document.getElementsByTagName('span');
        var i= 0, L= spans.length, tem, pa;
        while(i<L){
            tem= spans[i++];
            if((tem.className.indexOf('cbUserListFC_cb_extdesc')!= -1 || tem.className.indexOf('cbUserListFC_cb_description') != -1) && ((tem.textContent == 0 || tem.textContent == null) && !tem.innerText)){
                tem.parentNode.style.display = "none";
            }
        }
    }

    Any good?

  11. #11
    Join Date
    Dec 2008
    Posts
    11
    You are a LIFE SAVER. Thank you so much.

    There is just one remaining (and rather random) display issue in IE (7, on my computer) where the heading is getting pushed down and covered up by the sub-heading.

    :/ Any clue? If not, it's okay...you've been MORE than helpful!

  12. #12
    Join Date
    Aug 2009
    Location
    York, UK
    Posts
    13
    No worries, glad to be of help.

    Not sure about the CSS bug. Looks like the div "contentheading cbUserListTitle" needs floating left, or some height set on it. Defo an IE7 vs IE8 CSS issues.

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