Our SharePoint site currently has a bug where some of the content is set to "display:none" when being viewed in Firefox and possibly other non-IE browsers. The bug stems from the code below:
<script language=javascript>
function MSOLayout_MakeInvisibleIfEmpty() {
var allElements=document.getElementsByName("_invisibleIfEmpty");
var agt=navigator.userAgent.toLowerCase();
var isNav=((agt.indexOf('mozilla')!=-1)&&((agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible')==-1)));
var isIE=(agt.indexOf("msie")!=-1);
for (var curElement=0; curElement < allElements.length; curElement++) {
if ((isIE && allElements[curElement].childNodes.length==0) || (isNav && allElements[curElement].childNodes.length <=1)) {
allElements[curElement].style.display="none";
}
}
}
</script>
For some reason, the element is being set to "display: none" if the length of its child nodes are less than or equal to 1. The equal to bugs me. Why should the element be hidden if there is a single child node?
For example, some markup like this would be hidden when that function is run:
<div id="example" name="_invisibleIfEmpty">
Hello World!
</div>
If I output the child node length of example in IE6 and Firefox 3, they both equal 1.
<div id="example" name="_invisibleIfEmpty">
Hello World! <p>Extra Hello World!</p>
</div>
Using this the lengths both equal 2.
It appears that child node length works the same if both IE and Firefox (and Mozilla as a whole?), so why is the Javascript hiding elements with child node length of 1 or less only in mozilla browsers?
<script language=javascript>
function MSOLayout_MakeInvisibleIfEmpty() {
var allElements=document.getElementsByName("_invisibleIfEmpty");
var agt=navigator.userAgent.toLowerCase();
var isNav=((agt.indexOf('mozilla')!=-1)&&((agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible')==-1)));
var isIE=(agt.indexOf("msie")!=-1);
for (var curElement=0; curElement < allElements.length; curElement++) {
if ((isIE && allElements[curElement].childNodes.length==0) || (isNav && allElements[curElement].childNodes.length <=1)) {
allElements[curElement].style.display="none";
}
}
}
</script>
For some reason, the element is being set to "display: none" if the length of its child nodes are less than or equal to 1. The equal to bugs me. Why should the element be hidden if there is a single child node?
For example, some markup like this would be hidden when that function is run:
<div id="example" name="_invisibleIfEmpty">
Hello World!
</div>
If I output the child node length of example in IE6 and Firefox 3, they both equal 1.
<div id="example" name="_invisibleIfEmpty">
Hello World! <p>Extra Hello World!</p>
</div>
Using this the lengths both equal 2.
It appears that child node length works the same if both IE and Firefox (and Mozilla as a whole?), so why is the Javascript hiding elements with child node length of 1 or less only in mozilla browsers?
