Hide divs with empty spans?

**adefesche** · 08-11-2009, 02:13 PM

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!

**ilawton** · 08-11-2009, 05:30 PM

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?

**mrhoo** · 08-11-2009, 05:41 PM

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';
        }
    }
}

**adefesche** · 08-12-2009, 10:26 AM

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>

**ilawton** · 08-12-2009, 10:42 AM

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';
        }
    }
}

**adefesche** · 08-12-2009, 11:02 AM

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.

**adefesche** · 08-12-2009, 11:18 AM

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....

**ilawton** · 08-12-2009, 11:34 AM

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.

**adefesche** · 08-12-2009, 11:45 AM

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?

**ilawton** · 08-12-2009, 12:07 PM

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?

**adefesche** · 08-12-2009, 12:23 PM

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!

**ilawton** · 08-12-2009, 12:32 PM

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: Hide divs with empty spans?

Thread Tools

Display

Hide divs with empty spans?

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions