Log in

View Full Version : 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/product-display_Art-W204_dGFibGU9cHJvZHVjdCZmaWVsZD1Db2RlMSZ2YWx1ZT1XMjA0.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:

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

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


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