How can I make this a drop-down menu? Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

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.
The forum of the forums
4 posters

    How can I make this a drop-down menu?

    Friendly Toucan
    Friendly Toucan
    Friendly Toucan
    Forumember


    Posts : 243
    Reputation : 4
    Language : English
    • Post n°1

    Solved How can I make this a drop-down menu?

    Post by Friendly Toucan May 21st 2023, 2:36 pm

    bye Hello,

    I have added a "profile field" (images list) with about 200 different options.

    Right know, when looking at the page were you edit your profile, the options are all just stacked, taking up a lot of space. Is it possible to put them all in a drop-down menu somehow?

    Thanks.
    • Back to top
    jucarese
    jucarese
    jucarese
    Hyperactive


    Male Posts : 2462
    Reputation : 117
    Language : spanish
    Location : SSF Admin
    • Post n°2

    Solved Re: How can I make this a drop-down menu?

    Post by jucarese May 21st 2023, 7:59 pm

    It would be nice to be able to see it in order to generate good help for you, but you can try this for now:
    Code:
    .postprofile {
        overflow:auto;}

    TonnyKamper likes this post

    • Back to top
    Niko
    Niko
    Niko
    Helper
    Helper


    Male Posts : 3110
    Reputation : 245
    Language : English, Italian, French
    Location : Italy
    • Post n°3

    Solved Re: How can I make this a drop-down menu?

    Post by Niko May 22nd 2023, 8:24 pm

    Coucou @Friendly Toucan,

    sadly you cannot use images in a
    Code:
    <select>
    element, but maybe this can be helpful.

    edit: I found a possible way, so I am hiding the older solutions in a spoiler, just as reference I will keep them
    Create a new javascript code in all pages with this content:
    Code:
    var $checkbox = $('ul#profile_field_8_2 li label input[type=radio]');
    var $select = $('<select></select>');    // create a select
    $select.attr('name', $checkbox.attr('name'));    // set name and value
     
    $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#profile_field_8_2 li label').remove();
    $('select[name="profile_field_8_2"]').after('<div id="sovereign_state_flag"></div>');
    $('#sovereign_state_flag').html('<img src="'+$('select[name="profile_field_8_2"]').find(":selected").attr('flag')+'" />');

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

    And this CSS:
    Code:
    div#sovereign_state_flag {
        display: inline;
        vertical-align: middle;
        margin-left: 7px;
    }

    This is the outcome:
    How can I make this a drop-down menu? Scree124
    How can I make this a drop-down menu? Scree125


    Edit - Other options:

    SarkZKalie likes this post

    • Back to top
    Friendly Toucan
    Friendly Toucan
    Friendly Toucan
    Forumember


    Posts : 243
    Reputation : 4
    Language : English
    • Post n°4

    Solved Re: How can I make this a drop-down menu?

    Post by Friendly Toucan May 22nd 2023, 9:08 pm

    That looks very good!

    Sadly, it did not work. :/ I have both the JS and CSS you provided activated right now...
    • Back to top
    Niko
    Niko
    Niko
    Helper
    Helper


    Male Posts : 3110
    Reputation : 245
    Language : English, Italian, French
    Location : Italy
    • Post n°5

    Solved Re: How can I make this a drop-down menu?

    Post by Niko May 23rd 2023, 10:09 am

    Can you try with this javascript instead?
    Code:
    $(function() {
    var $checkbox = $('ul#profile_field_8_2 li label input[type=radio]');
    var $select = $('<select></select>');    // create a select
    $select.attr('name', $checkbox.attr('name'));    // set name and value
     
    $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#profile_field_8_2 li label').remove();
    $('select[name="profile_field_8_2"]').after('<div id="sovereign_state_flag"></div>');
    $('#sovereign_state_flag').html('<img src="'+$('select[name="profile_field_8_2"]').find(":selected").attr('flag')+'" />');
     
    $('select[name="profile_field_8_2"]').on('change', function() {
        var flag = $(this).find(":selected").attr('flag');
      $('#sovereign_state_flag').html('<img src="'+flag+'" />');
    });
    })

    Let me know @Friendly Toucan mwii

    Ape, TonnyKamper and Friendly Toucan like this post

    • Back to top
    Friendly Toucan
    Friendly Toucan
    Friendly Toucan
    Forumember


    Posts : 243
    Reputation : 4
    Language : English
    • Post n°6

    Solved Re: How can I make this a drop-down menu?

    Post by Friendly Toucan May 23rd 2023, 10:23 am

    It worked! cheers Very cool!

    Thanks for all the help! Marking this topic as "solved". Very Happy

    Niko likes this post

    • Back to top
    skouliki
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15192
    Reputation : 1696
    Language : English,Greek
    Location : Greece
    • Post n°7

    Solved Re: How can I make this a drop-down menu?

    Post by skouliki May 23rd 2023, 10:43 am

    thanks @Niko

    Problem solved & topic archived.
    Please read our forum rules: ESF General Rules

    Niko likes this post

    • Back to top