0

i am building a country selector using a pre-made list I found on google, and a smart method of pinpointing a flag on a png sprite posted on stackoverflow by roberkules (http://stackoverflow.com/questions/5409780/html-country-list-with-flags).

I'm a beginner, and as much as I understand how each part works, I don't understand how I can "make" the jQuery read the ISO codes and then apply it to each country. I also added <i></i> to the first country to see if it would at least put the Spanish flag but nothing.

! I am aware there is a similar question, but that one uses manual css coordinates, and i wanted it to work with the method in this JavaScript:

(function($) {
// size = flag size + spacing
var default_size = {
    w: 20,
    h: 15
};

function calcPos(letter, size) {
    return -(letter.toLowerCase().charCodeAt(0) - 97) * size;
}

$.fn.setFlagPosition = function(iso, size) {
    size || (size = default_size);

    return $(this).css('background-position',
        [calcPos(iso[1], size.w), 'px ', calcPos(iso[0], size.h), 'px'].join(''));
};
})(jQuery);

// USAGE:

(function($) {

$(function() {
    // on load:
    $('.country i').setFlagPosition('es');

});

})(jQuery);​

http://jsfiddle.net/3TvWs/ Is where I am now.

Could anyone help, even just a hint?

Edit: Sorry, i realize that i explained this badly. The (flag)Spain is just an example of how the pinpointing works. I actually meant the flags to be inside the dropdown, and not have that spain bubble at all. Sorry for the misunderstanding.

FezMonki
  • 117
  • 2
  • 12

1 Answers1

0

Set an event handler to listen for the change event on the dropdown menu event and call setFlagPosition in it.

$('select[name="country"]').on('change', function(){
    $('.country i').setFlagPosition($(this).val())[0].nextSibling.nodeValue = $(':selected', this).text();
});

http://jsfiddle.net/mowglisanu/3TvWs/1/

Musa
  • 96,336
  • 17
  • 118
  • 137
  • Oh that works perfectly, but actually i meant to put the flags inside the dropdown, the (flag)spain was just there to show how the script positioned the flag, im not planning to actually keep it. So just the dropdown with flags in the actual list, and thank you very much so far. – FezMonki Dec 02 '12 at 03:32
  • Nevermind, i wouldve preferred the flags in the dropdown, but it works fine this way too. Thank you. – FezMonki Dec 02 '12 at 05:09