Styling Radio buttons... need to check JavaScript output for CSS properties

**lilpete** · 09-23-2010, 11:05 AM

Hi Guys,
I need your help once again..

I have made this page:-
http://www.test.steptoes.co.uk/test.html

And I have taken the CSS and applied it to this page:-
http://www.test.steptoes.co.uk/produ...ZT1XMjA0.ghtml

Basically I need to change the Javascript to output a label tag around the text that is outputted.
The buttons work fine, I just need to adjust the text..

at the moment it is just outputting the number e.g. "7"
Whereas I want to output the label tag aswell e.g. <label for="size_7">7</label>

Javascript in question:-
In head:

Code:

<script type="text/javascript">
/*<![CDATA[*/

function MySizes(id,sizes){
 ary=sizes.split(",");
 var obj=document.getElementById(id);
 for (var ip,z0=0;z0<ary.length;z0++){
  ip=zxcFormField('INPUT',id,'radio');
  ip.value=ary[z0];
  ip.style.marginRight='5px';
  obj.appendChild(document.createTextNode(ary[z0]));
  obj.appendChild(ip);
 }

}

function zxcFormField(tag,nme,type){
 var el;
 try {
  el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
 }
 catch (e){
  el=document.createElement(tag);
  if (type) el.type=type;
  el.name=nme;
 }
 return el;
}
/*]]>*/
</script>

Trigger:

Code:

<div id="size_[_own ID_]"></div>
	<script type="text/javascript"> 
/*<![CDATA[*/
MySizes('size_[_own ID_]','[_own Size_]')
/*]]>*/
</script>

Any ideas? I hope someone can help.

**lilpete** · 09-23-2010, 12:52 PM

just realised it only works in Chrome...
never mind! - back to the drawing board!

**riptide** · 09-23-2010, 02:27 PM

what are you trying to do. are you trying to change the number (4) to 7 or are you trying to change the size of the radio buttons. I'm using fire fox so I don't see any changes.

**lilpete** · 09-23-2010, 02:59 PM

Hi,
I am trying to make the radio buttons little reactive images almost..

like these guys:-
http://www.barratts.co.uk/en/ruffle-...llerina-172104

While viewing in Chrome it appears like I have acheived this here:-
http://www.test.steptoes.co.uk/test.html
But when viewed in other browsers the actual buttons still appear rather then my image sprite.. and it just looks like a mess in IE.. Firefox you are right, no change whatsoever.

Best regards,
Pete

http://www.test.steptoes.co.uk/images/sprite.gif

**riptide** · 09-23-2010, 05:53 PM

this is areal hack but I was able to come up with something without using much javascript. though it doesn't quite do what you wanted.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.e{filter:alpha(opacity=00);
    -moz-opacity:.0;
	opacity:.0;
    -khtml-opacity: .o;}


#M {
	
}
.R {background-image: url(http://www.145thaurorastorage.com/img/corners/bg-tr.gif); border:#999933 thin solid; width:30px;}
.z {background-image: url(http://www.kitdarby.com/App_Themes/blue/images/bg_tr.gif); border:#999933 thin solid; width:30px;}
-->
</style>
</head>

<body>

<form> 

<div id="M"  class="R" onclick="document.getElementById('M').className='z'"   onmouseout="document.getElementById('M').className='R'"> <input type="radio"  class="e" name="group1" value="milk"></div> Milk<br>

<div id="F"  class="R" onclick="document.getElementById('F').className='z'"   onmouseout="document.getElementById('F').className='R'"> <input type="radio"  class="e" name="group1" value="butter"></div> butter<br>





</form>


</body>
</html>

Thread: Styling Radio buttons... need to check JavaScript output for CSS properties

Thread Tools

Search Thread

Styling Radio buttons... need to check JavaScript output for CSS properties

Bookmarks

Bookmarks

Posting Permissions