Forum Moderators: not2easy
Try #1
I set labels to display: none. This works perfectly in Firefox, but in IE the whole dropdown disappears.
Try #2
Added CSS to the labels to display left, but this does not work in IE either. The whole form element still disappears.
position:absolute;
left: -9999px;
Try #3
Added a class="superfluous" to the labels I want hidden. Then some JS to hide with the DOM:
<script type="text/javascript">
function addEvent(elm, evType, fn,useCapture)
{
if(elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent)
{
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else
{
elm['on' + evType] = fn;
}
}
function removeSuperfluousLabels()
{
//get all labels
var labels = document.getElementsByTagName("label");
for (i=0;i<labels.length;i++)
{
//look for all labels that are classed as superfluous
if(labels[i].className=="superfluous")
{
//hide the label
labels[i].style.display="none";
}
//add in default text to show format required
//find the field that the label refers to (using for attribute)
var thisId = labels[i].getAttribute("for");
if ((thisId)==null)
{//alert('feckin ie') ... as ever
thisId = labels[i].htmlFor;
}
var format = labels[i].childNodes[0].nodeValue;
//find the format suggested - in parenthesis following word 'format'
//oh, and did I tell you that I'm useless at writing/deciphering regexp?!
var startpoint = format.indexOf("(format ")+ 8;
var endpoint = format.indexOf(")");
format=format.substr(startpoint,(endpoint-startpoint));
//write the format into the text input field
document.getElementById(thisId).value=format;
//add in auto-select behaviour to form fields so that user does not need to highlight to overtype (DOM-added) default text
//addEvent(document.getElementById(thisId), 'focus', autoselect, false); // doesn't work because of 'this' keyword misunderstood by IE in other function
document.getElementById(thisId).onfocus = autoselect;
}
}
function autoselect()
{
this.select();
}
addEvent(window, 'load', removeSuperfluousLabels, false);
</script>
All three times the elements are not displayed in IE. Any fixes for this? Ideally I would like to get this sorted by using solely CSS, without any JS, because the JS is only applied client side, so you'll see the labels display and then disappear.
Thanks.
