/    Sign up×
Community /Pin to ProfileBookmark

<LABEL> tag not working inside of <TD>?

Copy linkTweet thisAlerts:
Jun 21.2007

So this code works beautifully by itself, but when I put it in a table, it does not work anymore. The radio buttons just dissapear when the javascripted styling is applied through CSS.

Good code:

[code]<div class=”radioWrapper”>
<label class=”label_radio” id=”Lblyes1″ for=”yes1″>
<input class=”radioAlign” name=”yes1″ id=”yes1″ value=”yes” type=”radio” />Text </label>
<label class=”label_radio” id=”Lblno1″ for=”no1″>
<input class=”radioAlign” name=”no1″ id=”no1″ value=”no” type=”radio” />Text</label>
</div>[/code]

Bad code that doesn’t work for some reason:

[code]
<table><tr><td><div class=”radioWrapper”>
<label class=”label_radio” id=”Lblyes1″ for=”yes1″>
<input class=”radioAlign” name=”yes1″ id=”yes1″ value=”yes” type=”radio” />Text </label>
<label class=”label_radio” id=”Lblno1″ for=”no1″>
<input class=”radioAlign” name=”no1″ id=”no1″ value=”no” type=”radio” />Text</label>
</div></td></tr></table>[/code]

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJun 21.2007 — "javascripted styling is applied" what is applied?
Copy linkTweet thisAlerts:
@ray326Jun 21.2007 — It doesn't look like tabular data in the first place. Once it's in the table your selector is probably wrong.
Copy linkTweet thisAlerts:
@askfritzauthorJun 21.2007 — Ray, that sounds exactly right.

How would I go about fixing this?

I'm going to PM you the page where it's at.
Copy linkTweet thisAlerts:
@felgallJun 21.2007 — If it isn't tabular data then DON'T put it in a table.
Copy linkTweet thisAlerts:
@askfritzauthorJun 21.2007 — Well it works with Firefox and Safari, just not crappy IE7. I've hoaned it down to the javascript....I just don't understand why it wouldn't work in IE7.

Java
<i>
</i>var d = document;
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
var ie = (navigator.userAgent.toLowerCase().indexOf('msie') != -1) ? true : false;
if(ie) var ie7 = (window.XMLHttpRequest) ? true : false;
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };

// preload images
var radio_on = new Image();
radio_on.src = "/images/formWidgets/radio_on.gif";
var radio_off = new Image();
radio_off.src = "/images/formWidgets/radio_off.gif";
var check_on = new Image();
check_on.src = "/images/formWidgets/check_on.gif";
var check_off = new Image();
check_off.src = "/images/formWidgets/check_off.gif";

window.onload = function() {
if(!d.getElementById || !d.createTextNode) return;
var ls = gebtn(d,'label');
for (var i = 0; i &lt; ls.length; i++) {
var l = ls[i];
if (l.className.indexOf('label_') == -1) continue;
var inp = gebtn(l,'input')[0];
if (l.className == 'label_check') {
l.className = (safari &amp;&amp; inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
l.onclick = check_it;
};
if (l.className == 'label_radio') {
l.className = (safari &amp;&amp; inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
l.onclick = turn_radio;
};
};
/* SELECT BOX INIT */
};
var check_it = function() {
var inp = gebtn(this,'input')[0];
if (this.className == 'label_check c_off' || (!safari &amp;&amp; inp.checked)) {
this.className = 'label_check c_on';
if (safari) inp.checked = true;
} else {
this.className = 'label_check c_off';
if (safari) inp.checked = false;
};
};
var turn_radio = function() {
var inp = gebtn(this,'input')[0];
if (this.className == 'label_radio r_off' || inp.checked) {
var ls = gebtn(this.parentNode,'label');
for (var i = 0; i &lt; ls.length; i++) {
var l = ls[i];
if (l.className.indexOf('label_radio') == -1) continue;
l.className = 'label_radio r_off';
};
this.className = 'label_radio r_on';
if (safari) inp.checked = true;
} else {
this.className = 'label_radio r_off';
if (safari) inp.checked = false;
};
};


Autocompleter.SelectBox = Class.create();
if(!safari)
{
Autocompleter.SelectBox.prototype = Object.extend(new Autocompleter.Base(), {
initialize: function(select, options) {
this.element = "&lt;input type="text" id="" + $(select).id + "_combo" /&gt;"
new Insertion.Before(select, this.element)
var inputClasses = Element.classNames(select);
inputClasses.each(function(inputClass)
{
Element.addClassName($(select).id + "_combo", inputClass);
});

<i> </i>this.update = "&lt;div id="" + $(select).id + "_options" class="autocomplete"&gt;&lt;/div&gt;"
<i> </i>new Insertion.Before(select, this.update)

this.baseInitialize($(select).id + "_combo", $(select).id + "_options", options);
this.select = select;
this.selectOptions = [];

<i> </i>$(this.element.id).setAttribute('readonly','readonly');
<i> </i>this.element.readOnly = true;
<i> </i>if(this.options.debug)alert('input ' + this.element.id + ' and div '+ this.update.id + ' created, Autocompleter.Base() initialized');
<i> </i>if(!this.options.debug)Element.hide(select);

<i> </i>var optionList = $(this.select).getElementsByTagName('option');
<i> </i>var nodes = $A(optionList);

<i> </i>for(i=0; i&lt;nodes.length;i++){
<i> </i> this.selectOptions.push("&lt;li id="" + nodes[i].value + ""&gt;" + nodes[i].innerHTML + '&lt;/li&gt;');
<i> </i> if (nodes[i].getAttribute("selected")) this.element.value = nodes[i].innerHTML;

<i> </i> if(this.options.debug)alert('option ' + nodes[i].innerHTML + ' added to '+ this.update.id);
<i> </i>}

<i> </i>Event.observe(this.element, "click", this.activate.bindAsEventListener(this));

<i> </i>if ($(select).selectedIndex &gt;= 0)this.element.value = $(select).options[$(select).selectedIndex].innerHTML;

<i> </i>var self = this;
<i> </i>this.options.afterUpdateElement = function(text, li) {
<i> </i> var optionList = $(select).getElementsByTagName('option');
<i> </i> var nodes = $A(optionList);

<i> </i> var opt = nodes.find( function(node){
<i> </i> return (node.value == li.id);
<i> </i> });
<i> </i> $(select).selectedIndex=opt.index;
<i> </i> if(self.options.redirect) document.location.href = opt.value;
<i> </i> if(self.options.autoSubmit != '')
<i> </i> $(self.options.autoSubmit).submit;
<i> </i>}
},

getUpdatedChoices: function() {
this.updateChoices(this.setValues());
},

setValues : function(){
return ("&lt;ul&gt;" + this.selectOptions.join('') + "&lt;/ul&gt;");
},

setOptions: function(options) {
this.options = Object.extend({
//MORE OPTIONS TO EXTEND THIS CLASS
redirect : false, // redirects to option value
debug : false, //show alerts with information
autoSubmit : '' //form Id to submit after change
}, options || {});
}
})
} else {
// its Safari, do not render the widget
}
/*
USAGE
[CSS]
div.autocomplete {
position:absolute;
width:400px;
background-color:white;
border:1px solid #ccc;
margin:0px;
padding:0px;
font-size:0.8em;
text-align:left;
max-height:200px;
overflow:auto;
}
div.autocomplete ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.autocomplete ul li.selected {
background-color: #EAF2FB;
}
div.autocomplete ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
cursor:pointer;
}
label {
cursor:pointer;
}
label.c_off,
label.r_off,
label.c_on,
label.r_on { padding-left: 20px; }
label.c_off input,
label.r_off input,
label.c_on input,
label.r_on input { position: absolute; left: -9999px; }
label.r_off { background: url(img/radio_off.gif) no-repeat; }
label.c_off { background: url(img/check_off.gif) no-repeat; }
label.c_on { background: url(img/check_on.gif) no-repeat; }
label.r_on { background: url(img/radio_on.gif) no-repeat; }
.combo {
padding:5px 0px 0px 5px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
line-height:12px;
display : block;
text-align:left;
background: url(img/selectBg.jpg) right no-repeat;
height:22px;
cursor: pointer;
border:2px solid #7b9dc3;
color:#000;
}
[HTML SELECTBOX]
&lt;select id="selectBox" class="combo"&gt;
&lt;option&gt;test&lt;/option&gt;
&lt;option&gt;test1adgadgadgadd&lt;/option&gt;
&lt;option&gt;test2&lt;/option&gt;
&lt;option&gt;test3&lt;/option&gt;
&lt;/select&gt;
&lt;script type="text/javascript"&gt;
new Autocompleter.SelectBox('selectBox');
&lt;/script&gt;
[HTML RADIO BUTTON]
&lt;label class="label_radio" id="userCaptureData" for="sample"&gt;&lt;input name="sample" id="sample" value="1" type="radio" /&gt; Sample Label&lt;/label&gt;&lt;br/&gt;
&lt;label class="label_radio" id="userCaptureData1" for="sample1"&gt;&lt;input name="sample" id="sample1" value="1" type="radio" /&gt; Sample Label&lt;/label&gt;&lt;br/&gt;
&lt;label class="label_radio" id="userCaptureData2" for="sample2"&gt;&lt;input name="sample" id="sample2" value="1" type="radio" /&gt; Sample Label&lt;/label&gt;&lt;br/&gt;

*/

CSS
div.autocomplete {
position:absolute;
width:200px;
background-color:white;
font-family: Arial, Helvetica, sans-serif;
border:1px solid #7b9dc3;
border-top:0px;
margin:0px;
padding:0px;
font-size:10px;
text-align:left;
max-height:200px;
overflow:auto;
}
div.autocomplete ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.autocomplete ul li.selected {
background-color: #EAF2FB;
}
div.autocomplete ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
cursor:pointer;
}
label {
cursor:pointer;
}
.radioAlign
{
vertical-align: middle;
height: 19px;
}
label.c_off,
label.r_off,
label.c_on,
label.r_on { padding-left: 15px; }
label.c_off input,
label.r_off input,
label.c_on input,
label.r_on input { position: absolute; left: -9999px; }
label.r_off { background: url(/images/formWidgets/radio_off.gif) no-repeat; }
label.c_off { background: url(/images/formWidgets/check_off.gif) no-repeat; }
label.c_on { background: url(/images/formWidgets/check_on.gif) no-repeat; }
label.r_on { background: url(/images/formWidgets/radio_on.gif) no-repeat; }
.combo {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border: 2px solid #7b9dc3;
padding: 3px 3px 3px 0px;
color: #000;
}
.stdField
{
vertical-align:middle;
}
.stdWrapper
{
line-height:16px;
}
.radioWrapper
{
height:22px;
line-height: 22px;
}
.input_text
{
border: 2px solid #7b9dc3;
padding: 3px 3px 3px 3px;
color: #0b2579;
}
Copy linkTweet thisAlerts:
@ray326Jun 21.2007 — As I said in my PM reply, it looks like your label in question is mis-targeted.

<label class="label_radio r_off" id="Lblm50_2" [B]for="Lblm50_2"[/B]>

<input class="radioAlign" name="m50_2" [B]id="m50_2"[/B] value="m50_2" type="radio">

Also, there's no actual label text so it doesn't really function as a [B]label[/B] does it?
Copy linkTweet thisAlerts:
@askfritzauthorJun 21.2007 — You're absolutely correct, Ray. I just PM'd you and we both came to the same conclusion.

Awesome for the effort, though. If I hadn't put an hour into it and just figured it out myself, I would have greatly appreciated the time you put into it as well.

Thank you!
×

Success!

Help @askfritz spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...