WordPress.org

Ready to get started?Download WordPress

Forums

YOP Poll
[resolved] Replacing radio buttons with background images (5 posts)

  1. Runtheball
    Member
    Posted 1 year ago #

    I've cloned the 'white' template and am trying to customize a poll. I'd like to remove the radio buttons from each yop-poll-answers ul li, and replace them with background images. That background image should toggle when the li is clicked, to display a different bg after clicking/voting. I'd also like to remove the 'vote' button. I'm wondering if any of this will conflict with the YOP logic?

    I've added the following jQuery within the javascript panel in the Poll editor. I'm not good with jQuery and can't understand why this function appears to do absolutely nothing.

    Any guidance to reach the goals stated above would be welcome.

    $(function() {
        // replace the checkboxes with the images
        $("input name=['yop_poll_answer']").each(function() {
            if ($(this).attr('checked')) { // radio button is checked onload
                $(this).hide();
                $(this).after($("<img src='../../themes/mytheme/media/img/poll-item.png' class='radioButtonImage' />"));
            } else { // radio button is not checked
                $(this).hide();
                $(this).after($("<img src='../../themes/mytheme/media/img/poll-item-checked.png'  class='radioButtonImage' />"));
            }
        });
    
        // setup click events to change the images
        $("input.radioButtonImage").click(function() {
            if($(this).attr('src') == '../../themes/mytheme/media/img/poll-item-checked.png') { // its checked, so uncheck it
                $(this).attr('src', '../../themes/mytheme/media/img/poll-item.png');
                $(this).prev().attr('checked', 'false');
            } else { // its not checked, so check it
                $(this).attr('src', '../../themes/mytheme/media/img/poll-item-checked.png');
                $(this).prev().attr('checked', 'true');
            }
        });
    });

    http://wordpress.org/extend/plugins/yop-poll/

  2. YOP
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Runtheball,

    We are sorry but at the moment you can not replace the radio buttons with background images.

    We will take your suggestion into consideration and make this option available in the future.

    Best wishes,

    YOP Team

  3. Runtheball
    Member
    Posted 1 year ago #

    Please clarify: are you saying that using jquery to replace radio buttons will not work with your plugin? Or are you saying that this is not a supported feature and you can't provide guidance with this task?

  4. YOP
    Member
    Plugin Author

    Posted 1 year ago #

    Hey Runtheball,

    You can replace the buttons using jQuery.
    Please follow the instructions below:

    Edit the template and add this function in the JavaScript section:

    function change_radio_buttons_%POLL-ID%() {
    jQuery(".yop-poll-li-answer-%POLL-ID% :radio").each(function() {
    if (jQuery(this).attr('checked')) { // radio button is checked onload
    jQuery(this).hide();
    jQuery(this).after("<img src='http://images.larryelder.com/images/home/radiobutton_on.png' class='radioButtonImage-%POLL-ID%' ans_value='"+jQuery(this).val()+"' />");
    } else { // radio button is not checked
    jQuery(this).hide();
    jQuery(this).after("<img src='http://images.larryelder.com/images/home/radiobutton_off.png' class='radioButtonImage-%POLL-ID%' ans_value='"+jQuery(this).val()+"' />");
    }
    });
    }

    Then search for this function: jQuery(document).ready(function(e) {

    and after

    if(typeof window.tabulate_results_%POLL-ID% == 'function')
    tabulate_results_%POLL-ID%();

    add

    change_radio_buttons_%POLL-ID%();
    jQuery(".radioButtonImage-%POLL-ID%").click(function() {
    jQuery(".yop-poll-li-answer-%POLL-ID% :radio").each(function() {
    jQuery(this).attr('checked', 'false');
    jQuery('.radioButtonImage-%POLL-ID%').attr('src', 'http://images.larryelder.com/images/home/radiobutton_off.png');
    });
    if(jQuery(this).attr('src') == 'http://images.larryelder.com/images/home/radiobutton_on.png') { // its checked, so uncheck it
    jQuery(this).attr('src', 'http://images.larryelder.com/images/home/radiobutton_off.png');
    jQuery('#yop-poll-answer-' + jQuery(this).attr('ans_value') ).attr('checked', 'false');
    } else { // its not checked, so check it
    jQuery(this).attr('src', 'http://images.larryelder.com/images/home/radiobutton_on.png');
    jQuery('#yop-poll-answer-' + jQuery(this).attr('ans_value') ).attr('checked', 'true');
    }
    });

    Next, replace the links and save.

    Let us know if you need more help.

    Regards,

    YOP Team

  5. Runtheball
    Member
    Posted 1 year ago #

    That works!

    Thanks for the amazing support!!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic