The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Transform a 'Images List' profile field into a Select dropdown

4 posters

Go down

Transform a 'Images List' profile field into a Select dropdown Empty Transform a 'Images List' profile field into a Select dropdown

Post by Niko May 22nd 2023, 9:55 pm

Coucou,

based on the solution I provided here, I thought it would've been nice to also share it here :wouhou: :wouhou:

1. Demo

To turn this...
Transform a 'Images List' profile field into a Select dropdown Scree126

... into this
Transform a 'Images List' profile field into a Select dropdown Scree127

2. Javascript management

Go to ACP > Modules > HTML & Javascript management > Javascript codes management and create a new JS code with these settings.
Remember to check if the JS management is enabled. If not, activate it
  • Title: does not affect the result
  • Where: all pages
  • Code

    Code:
    $(function() {
    /*
    Title: Transform a 'Images List' profile field into a Select dropdown
    Author: Niko
    Version: 1.3
    Release Date: 23.05.2023 (dd.mm.year)
    Contact: https://www.fmcodes.net/u2
    Original content: https://www.fmcodes.net/t2035-
    */


    var field_codes = ['profile_field_8_6','profile_field_8_5'];

    for (i = 0; i < field_codes.length; ++i) {
        var field_code = field_codes[i];
     
    var $checkbox = $('ul#'+field_code+' li label input[type=radio]');
    var $select = $('<select></select>');    // create a select
    $select.attr('name', $checkbox.attr('name'));    // set name and value
    $select.attr('class', 'list_select');
     
    $checkbox.each(function(i, checkbox){
        var str = $checkbox.eq(i).val();
        var alt = $checkbox.eq(i).parent().find('img').attr('title');
        var flag = $checkbox.eq(i).parent().find('img').attr('src');
        var checked = $checkbox.eq(i).prop('checked');
        $select.append($('<option>').val(str).attr('flag',flag).text(alt).attr('selected',checked));
    });
     
    $checkbox.parent().parent().parent().after($select);
    $('ul#'+field_code+' li label').remove();
    $('select[name="'+field_code+'"]').after('<div class="image_flag" id="image_flag_'+field_code+'"></div>');
    $('.image_flag#image_flag_'+field_code).html('<img src="'+$('select[name="'+field_code+'"]').find(":selected").attr('flag')+'" />');

    }

    $('select.list_select').on('change', function() {
        var profile_field_id = $(this).attr('name');
        var flag = $('select[name="'+profile_field_id+'"]').find(":selected").attr('flag');
        $('.image_flag#image_flag_'+profile_field_id).html('<img src="'+flag+'" />');
    });
    });


2.1 Javascript Modification

You only need to replace the content of the variable
Code:
var field_codes = ['profile_field_8_6','profile_field_8_5'];
with the HTML ID of the profile field you are referring to.
Please take note that this is an array - therefore you can even have more fields (working individually) but with the same effect Wink

  • Example with only one profile field
    Code:
    var field_codes = ['profile_field_8_6'];
  • Example with multiple profile fields
    Code:
    var field_codes = ['profile_field_8_6','profile_field_8_5'];

    Transform a 'Images List' profile field into a Select dropdown Scree129


How to find it?:

3. CSS Style Sheet

Then, add this CSS - which can be customized as preferred - and it's here used to put the image inline with the select element
Code:
div.image_flag {
    display: inline;
    vertical-align: middle;
    margin-left: 7px;
}

And that's it!
A simple pill, but maybe it may be useful for someone Hello Hello


Last edited by Niko on May 25th 2023, 1:31 pm; edited 3 times in total
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

skouliki, Ape, YoshiGM, SarkZKalie, TonnyKamper, tikky and كونان2000 like this post

Back to top Go down

Transform a 'Images List' profile field into a Select dropdown Empty Re: Transform a 'Images List' profile field into a Select dropdown

Post by skouliki May 23rd 2023, 8:46 am

nice !!
skouliki
skouliki
Manager
Manager

Female Posts : 15182
Reputation : 1696
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Niko likes this post

Back to top Go down

Transform a 'Images List' profile field into a Select dropdown Empty Re: Transform a 'Images List' profile field into a Select dropdown

Post by Niko May 23rd 2023, 11:08 am

Thanks a lot @skouliki Smooch
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

skouliki likes this post

Back to top Go down

Transform a 'Images List' profile field into a Select dropdown Empty Re: Transform a 'Images List' profile field into a Select dropdown

Post by TonnyKamper May 23rd 2023, 11:55 am

Very nice  cheers
TonnyKamper
TonnyKamper
Active Poster

Female Posts : 1050
Reputation : 78
Language : Dutch/English
Location : DSF Admin

http://www.nederlandheelt.nl/forum

Niko likes this post

Back to top Go down

Transform a 'Images List' profile field into a Select dropdown Empty Re: Transform a 'Images List' profile field into a Select dropdown

Post by YoshiGM May 23rd 2023, 5:56 pm

Woow! This is very Useful @Niko
Congrats Very Happy

Quick question: If i want more than one profile field in drowpdown style, what i need to do ?
YoshiGM
YoshiGM
Active Poster

Male Posts : 1502
Reputation : 144
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

TonnyKamper likes this post

Back to top Go down

Transform a 'Images List' profile field into a Select dropdown Empty Re: Transform a 'Images List' profile field into a Select dropdown

Post by Niko May 23rd 2023, 10:10 pm

Thanks @TonnyKamper and Thanks @YoshiGM luv luv

@YoshiGM - I've updated the script in the first topic, now you can set an array of profile field IDs thumright
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

skouliki, YoshiGM and TonnyKamper like this post

Back to top Go down

Transform a 'Images List' profile field into a Select dropdown Empty Re: Transform a 'Images List' profile field into a Select dropdown

Post by YoshiGM May 24th 2023, 12:00 am

Ok, perfect then Wink

Thanks :zen:
YoshiGM
YoshiGM
Active Poster

Male Posts : 1502
Reputation : 144
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Niko likes this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum