I'm using language switcher builded in HTML, CSS, JS, jQuery... I'm new to JS/jQuery and don't know how to add links to drop-down menu languages. Each submenu has to link to other language version of website.
Anybody can advise? Please?
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../dist/css/flags.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<link rel="stylesheet" href="https://smsverificator.com/assets/css/language_switcher_style.css">
</head>
<body onl oad="prettyPrint()">
<div >
<form>
<div >
<label>Select Language</label><br>
<div id="options"
data-input-name="country2"
data-selected-country="US">
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="../dist/js/jquery.flagstrap.js"></script>
<script>
$('#basic').flagStrap();
$('#origin').flagStrap({
placeholder: {
value: "",
text: "Language"
}
});
$('#options')
.flagStrap({
countries: {
"US": "English",
"PL": "Polish",
"RU": "Russian",
"DE": "German",
"UA": "Ukrainian",
"ES": "Spanish",
"FR": "French"
},
buttonSize: "btn-sm",
buttonType: "btn-info",
labelMargin: "10px",
scrollable: false,
scrollableHeight: "350px"
});
$('#advanced')
.flagStrap({
buttonSize: "btn-lg",
buttonType: "btn-primary",
labelMargin: "20px",
scrollable: false,
scrollableHeight: "350px",
onSelect: function (value, element) {
alert(value);
console.log(element);
}
});
</script>
</body>
</html>
CSS:
/* Tomorrow Theme */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
.prettyprint {
background: white;
font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco,
Consolas, monospace;
font-size: 12px;
line-height: 1.5;
border: 1px solid #ccc;
padding: 10px;
}
.pln {
color: #4d4d4c;
}
@media screen {
.str {
color: #718c00;
}
.kwd {
color: #8959a8;
}
.com {
color: #8e908c;
}
.typ {
color: #4271ae;
}
.lit {
color: #f5871f;
}
.pun {
color: #4d4d4c;
}
.opn {
color: #4d4d4c;
}
.clo {
color: #4d4d4c;
}
.tag {
color: #c82829;
}
.atn {
color: #f5871f;
}
.atv {
color: #3e999f;
}
.dec {
color: #f5871f;
}
.var {
color: #c82829;
}
.fun {
color: #4271ae;
}
}
@media print, projection {
.str {
color: #006600;
}
.kwd {
color: #006;
font-weight: bold;
}
.com {
color: #600;
font-style: italic;
}
.typ {
color: #404;
font-weight: bold;
}
.lit {
color: #004444;
}
.pun,
.opn,
.clo {
color: #444400;
}
.tag {
color: #006;
font-weight: bold;
}
.atn {
color: #440044;
}
.atv {
color: #006600;
}
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0;
}
/* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
/* */
}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
/* */
}
I don't know how to add links to the submenu items in CSS/Java. Anybody could advise please?
CodePudding user response：
You are using $('#basic') and $('#origin') which are jQuery selectors for HTML elements, with these id's.
I guess that you copied the code from a demo and paste it into another piece of code which you wrote?
If you will add reference to the original demo, we will be able to explain the usage better.
CodePudding user response：
Im pasting 3 main codes: html/jquery, css here and dont know how to set hirelinks on submenu fields...
/*
* FlagStrap - v1.0
* A lightwieght jQuery plugin for creating Bootstrap 3 compatible country select boxes with flags.
* http://www.blazeworx.com/flagstrap
*
* Made by Alex Carter
* Under MIT License
*/
(function ($) {
var defaults = {
buttonSize: "btn-md",
buttonType: "btn-default",
labelMargin: "10px",
scrollable: true,
scrollableHeight: "250px",
placeholder: {
value: '',
text: 'Please select country'
}
};
var countries = {
"AF": "Afghanistan",
"AL": "Albania",
"DZ": "Algeria",
"AS": "American Samoa",
"AD": "Andorra",
"AO": "Angola",
"AI": "Anguilla",
"AG": "Antigua and Barbuda",
"AR": "Argentina",
"AM": "Armenia",
"AW": "Aruba",
"AU": "Australia",
"AT": "Austria",
"AZ": "Azerbaijan",
"BS": "Bahamas",
"BH": "Bahrain",
"BD": "Bangladesh",
"BB": "Barbados",
"BY": "Belarus",
"BE": "Belgium",
"BZ": "Belize",
"BJ": "Benin",
"BM": "Bermuda",
"BT": "Bhutan",
"BO": "Bolivia, Plurinational State of",
"BA": "Bosnia and Herzegovina",
"BW": "Botswana",
"BV": "Bouvet Island",
"BR": "Brazil",
"IO": "British Indian Ocean Territory",
"BN": "Brunei Darussalam",
"BG": "Bulgaria",
"BF": "Burkina Faso",
"BI": "Burundi",
"KH": "Cambodia",
"CM": "Cameroon",
"CA": "Canada",
"CV": "Cape Verde",
"KY": "Cayman Islands",
"CF": "Central African Republic",
"TD": "Chad",
"CL": "Chile",
"CN": "China",
"CO": "Colombia",
"KM": "Comoros",
"CG": "Congo",
"CD": "Congo, the Democratic Republic of the",
"CK": "Cook Islands",
"CR": "Costa Rica",
"CI": "C" "ô" "te d'Ivoire",
"HR": "Croatia",
"CU": "Cuba",
"CW": "Cura" "ç" "ao",
"CY": "Cyprus",
"CZ": "Czech Republic",
"DK": "Denmark",
"DJ": "Djibouti",
"DM": "Dominica",
"DO": "Dominican Republic",
"EC": "Ecuador",
"EG": "Egypt",
"SV": "El Salvador",
"GQ": "Equatorial Guinea",
"ER": "Eritrea",
"EE": "Estonia",
"ET": "Ethiopia",
"FK": "Falkland Islands (Malvinas)",
"FO": "Faroe Islands",
"FJ": "Fiji",
"FI": "Finland",
"FR": "France",
"GF": "French Guiana",
"PF": "French Polynesia",
"TF": "French Southern Territories",
"GA": "Gabon",
"GM": "Gambia",
"GE": "Georgia",
"DE": "Germany",
"GH": "Ghana",
"GI": "Gibraltar",
"GR": "Greece",
"GL": "Greenland",
"GD": "Grenada",
"GP": "Guadeloupe",
"GU": "Guam",
"GT": "Guatemala",
"GG": "Guernsey",
"GN": "Guinea",
"GW": "Guinea-Bissau",
"GY": "Guyana",
"HT": "Haiti",
"HM": "Heard Island and McDonald Islands",
"VA": "Holy See (Vatican City State)",
"HN": "Honduras",
"HK": "Hong Kong",
"HU": "Hungary",
"IS": "Iceland",
"IN": "India",
"ID": "Indonesia",
"IR": "Iran, Islamic Republic of",
"IQ": "Iraq",
"IE": "Ireland",
"IM": "Isle of Man",
"IL": "Israel",
"IT": "Italy",
"JM": "Jamaica",
"JP": "Japan",
"JE": "Jersey",
"JO": "Jordan",
"KZ": "Kazakhstan",
"KE": "Kenya",
"KI": "Kiribati",
"KP": "Korea, Democratic People's Republic of",
"KR": "Korea, Republic of",
"KW": "Kuwait",
"KG": "Kyrgyzstan",
"LA": "Lao People's Democratic Republic",
"LV": "Latvia",
"LB": "Lebanon",
"LS": "Lesotho",
"LR": "Liberia",
"LY": "Libya",
"LI": "Liechtenstein",
"LT": "Lithuania",
"LU": "Luxembourg",
"MO": "Macao",
"MK": "Macedonia, the former Yugoslav Republic of",
"MG": "Madagascar",
"MW": "Malawi",
"MY": "Malaysia",
"MV": "Maldives",
"ML": "Mali",
"MT": "Malta",
"MH": "Marshall Islands",
"MQ": "Martinique",
"MR": "Mauritania",
"MU": "Mauritius",
"YT": "Mayotte",
"MX": "Mexico",
"FM": "Micronesia, Federated States of",
"MD": "Moldova, Republic of",
"MC": "Monaco",
"MN": "Mongolia",
"ME": "Montenegro",
"MS": "Montserrat",
"MA": "Morocco",
"MZ": "Mozambique",
"MM": "Myanmar",
"NA": "Namibia",
"NR": "Nauru",
"NP": "Nepal",
"NL": "Netherlands",
"NC": "New Caledonia",
"NZ": "New Zealand",
"NI": "Nicaragua",
"NE": "Niger",
"NG": "Nigeria",
"NU": "Niue",
"NF": "Norfolk Island",
"MP": "Northern Mariana Islands",
"NO": "Norway",
"OM": "Oman",
"PK": "Pakistan",
"PW": "Palau",
"PS": "Palestinian Territory, Occupied",
"PA": "Panama",
"PG": "Papua New Guinea",
"PY": "Paraguay",
"PE": "Peru",
"PH": "Philippines",
"PN": "Pitcairn",
"PL": "Poland",
"PT": "Portugal",
"PR": "Puerto Rico",
"QA": "Qatar",
"RE": "R" "é" "union",
"RO": "Romania",
"RU": "Russian Federation",
"RW": "Rwanda",
"SH": "Saint Helena, Ascension and Tristan da Cunha",
"KN": "Saint Kitts and Nevis",
"LC": "Saint Lucia",
"MF": "Saint Martin (French part)",
"PM": "Saint Pierre and Miquelon",
"VC": "Saint Vincent and the Grenadines",
"WS": "Samoa",
"SM": "San Marino",
"ST": "Sao Tome and Principe",
"SA": "Saudi Arabia",
"SN": "Senegal",
"RS": "Serbia",
"SC": "Seychelles",
"SL": "Sierra Leone",
"SG": "Singapore",
"SX": "Sint Maarten (Dutch part)",
"SK": "Slovakia",
"SI": "Slovenia",
"SB": "Solomon Islands",
"SO": "Somalia",
"ZA": "South Africa",
"GS": "South Georgia and the South Sandwich Islands",
"SS": "South Sudan",
"ES": "Spain",
"LK": "Sri Lanka",
"SD": "Sudan",
"SR": "Suriname",
"SZ": "Swaziland",
"SE": "Sweden",
"CH": "Switzerland",
"SY": "Syrian Arab Republic",
"TW": "Taiwan, Province of China",
"TJ": "Tajikistan",
"TZ": "Tanzania, United Republic of",
"TH": "Thailand",
"TL": "Timor-Leste",
"TG": "Togo",
"TK": "Tokelau",
"TO": "Tonga",
"TT": "Trinidad and Tobago",
"TN": "Tunisia",
"TR": "Turkey",
"TM": "Turkmenistan",
"TC": "Turks and Caicos Islands",
"TV": "Tuvalu",
"UG": "Uganda",
"UA": "Ukraine",
"AE": "United Arab Emirates",
"GB": "United Kingdom",
"US": "United States",
"UM": "United States Minor Outlying Islands",
"UY": "Uruguay",
"UZ": "Uzbekistan",
"VU": "Vanuatu",
"VE": "Venezuela, Bolivarian Republic of",
"VN": "Viet Nam",
"VG": "Virgin Islands, British",
"VI": "Virgin Islands, U.S.",
"WF": "Wallis and Futuna",
"EH": "Western Sahara",
"YE": "Yemen",
"ZM": "Zambia",
"ZW": "Zimbabwe"
};
$.flagStrap = function (element, options, i) {
var plugin = this;
var uniqueId = generateId(8);
plugin.countries = {};
plugin.selected = {value: null, text: null};
plugin.settings = {inputName: 'country-' uniqueId};
var $container = $(element);
var htmlSelectId = 'flagstrap-' uniqueId;
var htmlSelect = '#' htmlSelectId;
plugin.init = function () {
// Merge in global settings then merge in individual settings via data attributes
plugin.countries = countries;
// Initialize Settings, priority: defaults, init options, data attributes
plugin.countries = countries;
plugin.settings = $.extend({}, defaults, options, $container.data());
if (undefined !== plugin.settings.countries) {
plugin.countries = plugin.settings.countries;
}
if (undefined !== plugin.settings.inputId) {
htmlSelectId = plugin.settings.inputId;
htmlSelect = '#' htmlSelectId;
}
// Build HTML Select, Construct the drop down button, Assemble the drop down list items element and insert
$container
.addClass('flagstrap')
.append(buildHtmlSelect)
.append(buildDropDownButton)
.append(buildDropDownButtonItemList);
// Check to see if the onSelect callback method is assigned / callable, bind the change event for broadcast
if (plugin.settings.onSelect !== undefined && plugin.settings.onSelect instanceof Function) {
$(htmlSelect).change(function (event) {
var element = this;
options.onSelect($(element).val(), element);
});
}
// Hide the actual HTML select
$(htmlSelect).hide();
};
var buildHtmlSelect = function () {
var htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
$.each(plugin.countries, function (code, country) {
var optionAttributes = {value: code};
if (plugin.settings.selectedCountry !== undefined) {
if (plugin.settings.selectedCountry === code) {
optionAttributes = {value: code, selected: "selected"};
plugin.selected = {value: code, text: country}
}
}
htmlSelectElement.append($('<option>', optionAttributes).text(country));
});
if (plugin.settings.placeholder !== false) {
htmlSelectElement.prepend($('<option>', {
value: plugin.settings.placeholder.value,
text: plugin.settings.placeholder.text
}));
}
return htmlSelectElement;
};
var buildDropDownButton = function () {
var selectedText = $(htmlSelect).find('option').first().text();
var selectedValue = $(htmlSelect).find('option').first().val();
selectedText = plugin.selected.text || selectedText;
selectedValue = plugin.selected.value || selectedValue;
if (selectedValue !== plugin.settings.placeholder.value) {
var $selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
} else {
var $selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-placeholder');
}
var buttonLabel = $('<span/>')
.addClass('flagstrap-selected-' uniqueId)
.html($selectedLabel)
.append(selectedText);
var button = $('<button/>')
.attr('type', 'button')
.attr('data-toggle', 'dropdown')
.attr('id', 'flagstrap-drop-down-' uniqueId)
.addClass('btn ' plugin.settings.buttonType ' ' plugin.settings.buttonSize ' dropdown-toggle')
.html(buttonLabel);
$('<span/>')
.addClass('caret')
.css('margin-left', plugin.settings.labelMargin)
.insertAfter(buttonLabel);
return button;
};
var buildDropDownButtonItemList = function () {
var items = $('<ul/>')
.attr('id', 'flagstrap-drop-down-' uniqueId '-list')
.attr('aria-labelled-by', 'flagstrap-drop-down-' uniqueId)
.addClass('dropdown-menu');
if (plugin.settings.scrollable) {
items.css('height', 'auto')
.css('max-height', plugin.settings.scrollableHeight)
.css('overflow-x', 'hidden');
}
// Populate the bootstrap dropdown item list
$(htmlSelect).find('option').each(function () {
// Get original select option values and labels
var text = $(this).text();
var value = $(this).val();
// Build the flag icon
if (value !== plugin.settings.placeholder.value) {
var flagIcon = $('<i/>').addClass('flagstrap-icon flagstrap-' value.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
} else {
var flagIcon = null;
}
// Build a clickable drop down option item, insert the flag and label, attach click event
var flagStrapItem = $('<a/>')
.attr('data-val', $(this).val())
.html(flagIcon)
.append(text)
.on('click', function (e) {
$(htmlSelect).val($(this).data('val'));
$(htmlSelect).trigger('change');
$('.flagstrap-selected-' uniqueId).html($(this).html());
e.preventDefault();
});
// Make it a list item
var listItem = $('<li/>').prepend(flagStrapItem);
// Append it to the drop down item list
items.append(listItem);
});
return items;
};
function generateId(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (!length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i ) {
str = chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
plugin.init();
};
$.fn.flagStrap = function (options) {
return this.each(function (i) {
if ($(this).data('flagStrap') === undefined) {
$(this).data('flagStrap', new $.flagStrap(this, options, i));
}
});
}
})(jQuery); /* Tomorrow Theme */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
.prettyprint {
background: white;
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
font-size: 12px;
line-height: 1.5;
border: 1px solid #ccc;
padding: 10px;
}
.pln {
color: #4d4d4c;
}
@media screen {
.str {
color: #718c00;
}
.kwd {
color: #8959a8;
}
.com {
color: #8e908c;
}
.typ {
color: #4271ae;
}
.lit {
color: #f5871f;
}
.pun {
color: #4d4d4c;
}
.opn {
color: #4d4d4c;
}
.clo {
color: #4d4d4c;
}
.tag {
color: #c82829;
}
.atn {
color: #f5871f;
}
.atv {
color: #3e999f;
}
.dec {
color: #f5871f;
}
.var {
color: #c82829;
}
.fun {
color: #4271ae;
}
}
@media print, projection {
.str {
color: #006600;
}
.kwd {
color: #006;
font-weight: bold;
}
.com {
color: #600;
font-style: italic;
}
.typ {
color: #404;
font-weight: bold;
}
.lit {
color: #004444;
}
.pun, .opn, .clo {
color: #444400;
}
.tag {
color: #006;
font-weight: bold;
}
.atn {
color: #440044;
}
.atv {
color: #006600;
}
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0;
}
/* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
/* */
}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
/* */
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../dist/css/flags.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="../dist/js/jquery.flagstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<link rel="stylesheet" href="https://smsverificator.com/assets/css/language_switcher_style.css">
</head>
<body onl oad="prettyPrint()">
<div >
<form>
<div >
<label>Select Language</label><br>
<div id="options"
data-input-name="country2"
data-selected-country="US">
</div>
</div>
</form>
</div>
<script>
$('#basic').flagStrap();
$('#origin').flagStrap({
placeholder: {
value: "",
text: "Language"
}
});
$('#options')
.flagStrap({
countries: {
"US": "English",
"PL": "Polish",
"RU": "Russian",
"DE": "German",
"UA": "Ukrainian",
"ES": "Spanish",
"FR": "French"
},
buttonSize: "btn-sm",
buttonType: "btn-info",
labelMargin: "10px",
scrollable: false,
scrollableHeight: "350px"
});
$('#example').flagStrap({
onSelect: function(value) {
var urls = {
"US": "http://google.com.au",
"PL": "http://google.com",
"RU": "http://google.co.uk"
};
if (urls[value] !== undefined) {
window.location.href = urls[value];
}
}
});
$('#advanced')
.flagStrap({
buttonSize: "btn-lg",
buttonType: "btn-primary",
labelMargin: "20px",
scrollable: false,
scrollableHeight: "350px",
onSelect: function (value, element) {
alert(value);
console.log(element);
}
});
</script>
<select data-width="fit">
<option data-content='<span ></span> <a href="https://smsverificator.com/en/">English</a>'>English</option>
<option data-content='<span ></span> Spanish'>Spanish</option>
<option data-content='<span ></span> Polish'>Polish</option>
</select>
</body>
</html>