Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing radio buttons to images - a little help please.

    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
    Last edited by Inxie; 10-08-2012 at 10:52 AM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Where, in your code, do you load the JQuery library that you claim to be using?
    Last edited by jmrker; 10-09-2012 at 02:30 PM.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    <!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&amp;cPath=6_1&amp;products_id=3&amp;number_of_uploads=0&amp;action= add_product&amp;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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by Inxie View Post
    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.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,901
    Thanks
    56
    Thanked 543 Times in 540 Posts
    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();
    });

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    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?
    Last edited by Inxie; 10-09-2012 at 08:42 AM.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,901
    Thanks
    56
    Thanked 543 Times in 540 Posts
    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 />

  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #10
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by vwphillips View Post
    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.

  • #11
    New Coder
    Join Date
    Jul 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So there's no simple way to get this to use a different image per radio button?

  • #12
    New Coder
    Join Date
    Jul 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Inxie View Post
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •