Changing radio buttons to images - a little help please.

Inxie · 10-08-2012, 10:47 AM

Hello, someone has kindly written up a jquery script that will change my radio buttons to images, he even showed me a demo of it working via http://jsfiddle.net/elclanrs/BQp2F/.
The problem is, I cant get it to work, and if you open that demo, place my source code in the HTML window and press RUN it doesn't work either.

Here's my page with radio buttons: http://www.pazzle.co.uk/index.php?ma...&products_id=3

Here is what he has given me:

A sprite to save and upload:
http://i.imgur.com/KSNpJ.png

jQuery:

Code:

;(function(){
$.fn.customRadioCheck = function() {

  return this.each(function() {

    var $this = $(this);
    var $span = $('<span/>');

    $span.addClass('custom-'+ ($this.is(':checkbox') ? 'check' : 'radio'));
    $this.is(':checked') && $span.addClass('checked'); // init
    $span.insertAfter($this);

    $this.parent('label').addClass('custom-label')
      .attr('onclick', ''); // Fix clicking label in iOS
    // hide by shifting left
    $this.css({ position: 'absolute', left: '-9999px' });

    // Events
    $this.on({
      change: function() {
        if ($this.is(':radio')) {
          $this.parent().siblings('label')
            .find('.custom-radio').removeClass('checked');
        }
        $span.toggleClass('checked', $this.is(':checked'));
      },
      focus: function() { $span.addClass('focus'); },
      blur: function() { $span.removeClass('focus'); }
    });
  });
};
}());

CSS:

Code:

.custom-label {
  display: inline-block;
  margin-right: .8em;
  cursor: pointer;
}
.custom-radio,
.custom-check {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -.15em; /* Adjust to for best fit */
    margin: 0 .4em;
    width: 20px;
    height: 20px;
    background: url(customRadioCheck.png) 0 0 no-repeat;
}
.custom-radio { background-position: 0 -20px; }
.custom-check.focus { background-position: -20px 0; }
.custom-radio.focus { background-position: -20px -20px; }
.custom-check.checked { background-position: -40px 0; }
.custom-radio.checked { background-position: -40px -20px; }
.custom-check.checked.focus { background-position: -60px 0; }
.custom-radio.checked.focus { background-position: -60px -20px; }

NOTE: I have saved and uploaded these as jscript_customradio.js and style_customradio.css and as expected it does not work. Here is my screenshot to show it's all loaded with no errors: http://i50.tinypic.com/o0qdde.jpg

jmrker · 10-08-2012, 02:59 PM

Where, in your code, do you load the JQuery library that you claim to be using?

vwphillips · 10-08-2012, 04:56 PM

<!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" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<form name="cart_quantity" action="http://www.pazzle.co.uk/index.php?main_page=product_info&cPath=6_1&products_id=3&number_of_uploads=0&action= add_product&zenid=991a696fe26ffa54aa3178d1fb8b2e82" method="post" enctype="multipart/form-data"><input type="hidden" name="securityToken" value="3fcfc83b67a9eda8deed0ed5147e42a6" />
<div class="attribsOptions">
<h4 class="optionName back">Gender</h4>
<div class="back">
<input type="radio" name="id[2]" value="4" id="attrib-2-4" /><label class="attribsRadioButton zero" for="attrib-2-4">Male</label><br />
<input type="radio" name="id[2]" value="5" id="attrib-2-5" /><label class="attribsRadioButton zero" for="attrib-2-5">Female</label><br />

</div>
<div class="attribsOptions">
<h4 class="optionName back">Size</h4>
<div class="back">
<input type="radio" name="id[1]" value="1" id="attrib-1-1" /><label class="attribsRadioButton zero" for="attrib-1-1">Small</label><br />
<input type="radio" name="id[1]" value="2" id="attrib-1-2" /><label class="attribsRadioButton zero" for="attrib-1-2">Medium</label><br />
<input type="radio" name="id[1]" value="3" id="attrib-1-3" /><label class="attribsRadioButton zero" for="attrib-1-3">Large</label><br />

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

zxcRadioImage={

init:function(o){
var ary=[],obj,img,imgs=[],oop={ary:[]},z0=0;
for (;z0<o.IDs.length;z0++){
imgs[z0%2]=new Image();
imgs[z0%2].src=o.ImageSRCs[z0%2];
obj=document.getElementById(o.IDs[z0]);
if (obj){
img=document.createElement('IMG')
img.src=imgs[0].src;
this.addevt(img,'mouseup','check',oop,img);
oop.ary.push([obj,img,imgs]);
obj.parentNode.insertBefore(img,obj);
obj.style.position='absolute';
obj.style.visibility='hidden';
}
}
this.check(oop);
},

check:function(o,img){
for (var z0=0;z0<o.ary.length;z0++){
if (img&&o.ary[z0][1]==img){
o.ary[z0][0].checked=true;
}
}
for (var z0=0;z0<o.ary.length;z0++){
o.ary[z0][1].src=o.ary[z0][2][o.ary[z0][0].checked?1:0].src;
}
},

addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}

}

zxcRadioImage.init({
IDs:['attrib-2-4','attrib-2-5'],
ImageSRCs:['http://www.vicsjavascripts.org.uk/StdImages/Down1.gif','http://www.vicsjavascripts.org.uk/StdImages/Up1.gif']
});

zxcRadioImage.init({
IDs:['attrib-1-1','attrib-1-2','attrib-1-3'],
ImageSRCs:['http://www.vicsjavascripts.org.uk/StdImages/Down1.gif','http://www.vicsjavascripts.org.uk/StdImages/Up1.gif']
});

/*]]>*/
</script></body>

</html>

Inxie · 10-09-2012, 02:09 AM

My scripts are called in the HEAD. See:

<script type="text/javascript" src="includes/templates/barebones/jscript/jscript_1_jquery-1.8.2.js"></script>

I know that Jquery is being loaded as several other scripts depend on it and are all working perfectly.

jmrker · 10-09-2012, 03:49 AM

Quote:

Originally Posted by Inxie

My scripts are called in the HEAD. See:

<script type="text/javascript" src="includes/templates/barebones/jscript/jscript_1_jquery-1.8.2.js"></script>

I know that Jquery is being loaded as several other scripts depend on it and are all working perfectly.

OK, but difficult to tell from the code in your first post.

xelawho · 10-09-2012, 04:45 AM

I have no idea, but here are a couple of guesses:

one, there is a semi colon before your function declaration in your jscript_customradio.js file, which might mean nothing, but probably isn't helping:
;(function(){

the bigger one is that you should be waiting for your elements to be rendered before trying to alter them - and being that you have placed this script in the head, that hasn't happened yet.

I would try putting the function call in a document ready wrapper:

Code:

$(document).ready(function() {
$('input[type=checkbox], input[type=radio]').customRadioCheck();
});

Inxie · 10-09-2012, 08:32 AM

Quote:

Originally Posted by xelawho

I have no idea, but here are a couple of guesses:

one, there is a semi colon before your function declaration in your jscript_customradio.js file, which might mean nothing, but probably isn't helping:
;(function(){

the bigger one is that you should be waiting for your elements to be rendered before trying to alter them - and being that you have placed this script in the head, that hasn't happened yet.

I would try putting the function call in a document ready wrapper:

Code:

$(document).ready(function() {
$('input[type=checkbox], input[type=radio]').customRadioCheck();
});

Thank you, I have corrected both and now the radio buttons have become images, however there are 2 issues...

The radio buttons can only be selected if you click just to the right of it (the label).
They can all be selected instead of just the 1 per group as expected.

Why might this be happening?

xelawho · 10-09-2012, 01:47 PM

you need to wrap the label around the input:

Code:

<label class="attribsRadioButton zero" for="attrib-1-1"><input type="radio" name="id[1]" value="1" id="attrib-1-1" />Small</label><br />
<label class="attribsRadioButton zero" for="attrib-1-2"><input type="radio" name="id[1]" value="2" id="attrib-1-2" />Medium</label><br />
<label class="attribsRadioButton zero" for="attrib-1-3"><input type="radio" name="id[1]" value="3" id="attrib-1-3" />Large</label><br />

...

<label class="attribsRadioButton zero" for="attrib-2-4"><input type="radio" name="id[2]" value="4" id="attrib-2-4" />Male</label><br />
<label class="attribsRadioButton zero" for="attrib-2-5"><input type="radio" name="id[2]" value="5" id="attrib-2-5" />Female</label><br />

Inxie · 10-10-2012, 01:24 AM

Thank you so much!!!

It's probably too difficult for me to attempt, but how hard would it be to have each radio button use a different image, would it require a lot of editing?

Logic Ali · 10-10-2012, 02:53 AM

Quote:

Originally Posted by vwphillips

zxcRadioImage={

init:function(o){
var ary=[],obj,img,imgs=[],oop={ary:[]},z0=0;
for (;z0<o.IDs.length;z0++){
imgs[z0%2]=new Image();
imgs[z0%2].src=o.ImageSRCs[z0%2];
obj=document.getElementById(o.IDs[z0]);
if (obj){
img=document.createElement('IMG')
img.src=imgs[0].src;
this.addevt(img,'mouseup','check',oop,img);
oop.ary.push([obj,img,imgs]);
obj.parentNode.insertBefore(img,obj);
obj.style.position='absolute';
obj.style.visibility='hidden';
}
}
this.check(oop);
},

They need to be keyboard-operable. I would make them links with a keyboard handler that responds to the spacebar.

Inxie · 10-11-2012, 10:07 AM

So there's no simple way to get this to use a different image per radio button?

Inxie · 10-11-2012, 10:56 AM

Never mind, I found a much simpler way to do this using img src as the name of the actual radio buttons label:

http://stackoverflow.com/questions/3...ood-sad-smiley

Logic Ali · 10-11-2012, 11:43 AM

Quote:

Originally Posted by Inxie

Never mind, I found a much simpler way to do this using img src as the name of the actual radio buttons label:

http://stackoverflow.com/questions/3...ood-sad-smiley

It talks about accessibility, but I can't operate it with the keyboard; can you?