Location/Country Flags [CB]

[california]

My first real profile-edittable hack!



This replaces the location input box on the modify profile page with a dropdown menu full of countries. When you select a country, the flag of that country appears to the right of the dropdown menu. If you select a country and save your profile, the flag for the country you selected will appear in your profile and miniprofile in place of where the normal location text used to be. Users who don't want the flag (or those who live in countries that are not listed) can simply choose "Other..." which is the last option, and that will bring up the default location input for them to type whatever they want (or nothing, if they don't want their location to be displayed). You can easily use this for US State flags as well.

<script type="text/javascript">
<!--
/* Location/Country Flags, profile edittable by california
©2005, SoCal Codes, http://socal.proboards26.com */
var country = new Array();

//Edit Here (these are just examples)
var imgPath="http://www.yourhost.com/yourpath/";
country[0] = ['United States of America','usa.gif'];
country[1] = ['Great Britain','uk.gif'];
country[2] = ['Canada','canada.gif'];
country[3] = ['Mexico','mex.gif'];
country[4] = ['Country Name','flagimage.gif'];

// No Edit
var td=document.getElementsByTagName("td");
if(location.href.match(/=modifypro/) && document.modifyForm){
    var locBox=document.modifyForm.location;
    var newSel=document.createElement("select");
    newSel.id="flagSel";
    var flagImg = new Image();
    flagImg.id="flag";
    flagImg.style.marginLeft="10px";
    flagImg.style.display="none";
    newSel.options[0] = new Option("Select a Country","");
    newSel.options[1] = new Option("--------------","");
    for(i=0;i<country.length;i++){   
        newSel.options[newSel.options.length] = new Option(country[0],country[1]);
    }
    newSel.options[newSel.options.length] = new Option("Other...","other");
    newSel.onchange=function(){
        var flag=document.getElementById("flag");
        var flagSel=document.getElementById("flagSel");
        if(this.options[this.selectedIndex].value=="other"){
            this.style.display="none";
            locBox.style.display='';
            locBox.value='';
            locBox.focus();
            flag.style.display="none";
            flagSel.style.bottom="0px";
        }else if(this.options[this.selectedIndex].value==""){
            flag.style.display="none";
            flagSel.style.bottom="0px";
        }else{
            flag.style.display="";
            flag.src=imgPath+this.options[this.selectedIndex].value;
            flagSel.style.bottom="10px";
        }
        return true;
    }
    locBox.parentNode.insertBefore(newSel,locBox);
    locBox.parentNode.insertBefore(flagImg,locBox);
    locBox.style.display="none";
    var flagSel=document.getElementById("flagSel");
    flagSel.style.position="relative";
    for(i=0;i<country.length;i++){
        if(locBox.value==country[1]){
            flagSel.selectedIndex=i+2;
            document.getElementById("flag").src=imgPath+locBox.value;
            document.getElementById("flag").style.display="";
            flagSel.style.bottom="10px";
            break;
        }
    }
    document.modifyForm.onsubmit=function(){
        var flagOpt=flagSel.options[flagSel.selectedIndex].value;
        if(flagOpt.match(/\./)){
            locBox.value=flagOpt;
        }
        return true;
    }
}else if(location.href.match(/on=(displ|search2|viewpr|pmv|(user)?rece|cal\w+iew)/)){
    for(i=0;i<td.length;i++){
        var t=td.innerHTML;
        if(td.width=="20%" && t.match(/location: (.+?)<br/i)){
            var loc=RegExp.$1;
            for(j=0;j<country.length;j++){
                if(loc==country[j][1]){
                    var imgCode='<img src="'+imgPath+country[j][1]+'" alt="'+country[j][0]+'" />';
                    td.innerHTML=t.replace('ion: '+loc,'ion: '+imgCode);
                }
            }
        }else if(location.href.match(/on=viewpr/) && td.width=="25%" && t.match(/cation:/)){
            for(j=0;j<country.length;j++){
                if(td[i+1].innerHTML.indexOf(country[j][1]) != -1){
                    var imgCode='<img src="'+imgPath+country[j][1]+'" alt="'+country[j][0]+'" />';
                    td[i+1].innerHTML=td[i+1].innerHTML.replace(country[j][1],imgCode);
                }
            }
        }
    }
}
// -->
</script>


Global Footer

Before bothering to add the code, you need flag images. You can find a bunch by Searching Google. I recommend using small thumbs around 60x35 or less. Download all the flags you want to use and upload them to a webhost. You cannot use ImageShack. You need a host that gives you an account and a static path, like RipWay or PhotoBucket. Put them all in the same directory/folder and put the path to that folder including the forward slash at the end where it says imgPath. Then put the filenames of the images and the names of the countries on the following lines, following the example. To add more countries, simple create more lines following the same pattern (the next line will be country[5]). The order you use will be the order that the dropdown list uses, so if you want the countries in alphabetical order, list them that way. I hope I have explained this well.