We Keep Coding

Is it possible to display respective country flag to out side of the select function. Or Can we display country flag on the both place

function onChangeCallback(ctr) {
console.log("The country was changed: " + ctr);
//$("#selectionSpan").text(ctr);
}
$(document).ready(function() {
$(".niceCountryInputSelector").each(function(i, e) {
new NiceCountryInput(e).init();
});
});
.container {
margin: 80px auto !important;
padding: 15px;
}
.bg-box1 {
background-color: #E8E8E8;
padding: 30px;
/* width: 460px;*/
width: 700px;
box-shadow: 3px 3px 5px #808080;
border-radius: 6px;
}
.bg-box {
box-shadow: 1px 1px 3px #484848;
border-radius: 6px;
}
select {
border-radius: 6px;
}
.search {
src: url(img/search.png);
}
.niceCountryInputMenu {
background: white !important;
color: black !important;
border: 1px solid #a8a8a8;
cursor: pointer;
border-radius: 4px;
box-shadow: 1px 1px 3px #808080
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDefaultText {
width: 270px;
padding: 6px;
margin: 6px 0px 0px 15px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.1rem;
}
.niceCountryInputMenuDefaultText a:hover {
text-decoration: none;
}
.niceCountryInputMenu a {
color: #787878 !important;
}
.niceCountryInputMenuDropdown {
/*border-left: 1px solid #a8a8a8;*/
height: 30px;
width: 25px;
float: right;
line-height: 30px;
padding: 8px;
text-align: center;
position: relative;
right: 0;
color: #484848;
}
.niceCountryInputMenuDropdownContent {
border: 1px solid #a8a8a8;
background-color: #fff;
font-size: 1.1rem;
border-top: 0;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.niceCountryInputMenuDropdownContent a {
height: 40px;
line-height: 40px;
display: block;
width: 100%;
color: #787878 !important;
overflow: hidden;
text-decoration: none;
border: 1px solid #F5F5F5;
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDropdownContent a:hover {
background-color: #63a2d7 !important;
color: white !important;
text-decoration: none;
}
.niceCountryInputMenuFilter {
border: 1px solid #a8a8a8;
border-top: -10;
border-bottom: 0;
}
.niceCountryInputMenuFilter input {
width: 100%;
width: calc(100% - 10px);
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
outline: none;
border-radius: 6px;
font-size: 1.1rem;
color: #808080;
}
.niceCountryInputMenuCountryFlag {
border: 1px solid #d3d3d3;
width: 23px;
height: 18px;
margin-left: 5px;
margin-right: 5px;
}
.niceCountryInputMenuCountryNoFlag {
display: inline-block;
border: 1px solid black;
background: white;
color: black;
line-height: 15px;
text-align: center;
width: 22px;
margin-left: 5px;
margin-right: 5px;
font-size: 13px;
}
<script src="https://manishasecurity.in/creative-js/niceCountryInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Select a Country:</h3>
<div class="bg-box1">
<div class="row">
<div class="col-4">
<div style="background-color: #fff; width: 160px; height: 50px;margin-top: 0px; padding: 4px; border-radius: 6px;font-size: 12px;" data-showflags="true" class=""></div>
</div>
<div class="col-8">
<div class="niceCountryInputSelector bg-box" style="width: 400px;" data-selectedcountry="ad" data-showspecial="false" data-showflags="true" data-i18nall="All selected" data-i18nnofilter="No selection" data-i18nfilter="Search Country..." data-onchangecallback="onChangeCallback" />
</div>
</div>
</div>
</div>
Hi,
I have made the country flag dropdown list.
In the dropdown list, whether it is scroll by mouse or search country name in the search box, the country will be autocompleted and it will be displayed in the input field with the country name and flag.
The dropdown function working properly.
Requirement:-
Without removing its Name and flag from the dropdown section, Can we display Country Flag outside of the dropdown section?. I am trying for that but I am not able to do that.
I hope someone can understand and help me out in this situation.
Thanks Lots

I modified the function onChangeCallback to place the flag to the other div.
function onChangeCallback(ctr) {
let flag=$(".niceCountryInputSelector").find("[data-flagiso='"+ctr+"']")[0];
flag=$(flag).clone();
$(".col-4").children("div:first-child").empty();
$(".col-4").children("div:first-child").append(flag);
}
So, you can append the flagObjElement to where you want to append.

how do I add a notification when a button is pressed?

I want to create a notification saying "text was copied to clipboard" whenever my copy button is pressed similar to what happens when you copy something using the copy button with google translate. I dont want to use an alert() though. I don't know how too do this. Thank you for taking the time to read this, my code is below.
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function maFunction() {
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
elt.style.background = "blue;";
}
body {
margin-top: 20px;
margin-left: 20px;
display: flex;
}
.txt {
margin-right: 20px;
background: #ffffff;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
/*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
margin-top: 0px;
}
.text {
border: none;
margin-top: 15px;
margin-left: 18px;
height: 660px;
width: 630px;
outline: none;
font-size: 24px;
resize: none;
}
.asci {
background: #ffffff;
border-style: solid;
border-color: #4CAF50;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
/*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
.alpha {
margin-top: 15px;
margin-left: 10px;
height: 660px;
width: 564px;
outline: none;
font-size: 24px;
resize: none;
vertical-align: top;
border: none;
}
.button {
background: #4CAF50;
border: none;
outline: none;
color: #ffffff;
padding: 14px;
width: 100px;
border-radius: 0 10px;
margin-top: 0px;
margin-left: 0px;
font-size: 22px;
cursor: pointer;
}
::selection {
color: black;
background: lightblue;
}
<html>
<head>
<title>alphabetical order machine</title>
<link rel="stylesheet" href="alphabetical.css">
</head>
<body>
<form class="txt">
<textarea class="text" id="input" type="text" placeholder="type your text here" onkeyup="myFunction()"></textarea>
</form>
<form class="asci">
<textarea class="alpha" id="output" readonly="readonly" type="output" placeholder="your alphabetized text will appear here"></textarea>
<input class="button" type='button' value="copy" onclick="maFunction()">
</form>
<script src="alphabetical.js"></script>
</body>
</html>

if you want pure css code, you can use this example code, without alert() javascript function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal-window {
position: fixed;
background-color: rgba(200, 200, 200, 0.75);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 2rem;
background: #fff;
color: #444;
}
.modal-window header {
font-weight: bold;
}
.modal-window h1 {
font-size: 150%;
margin: 0 0 15px;
}
</style>
</head>
<body>
<input type="button" class="open-button" value="Open Modal" onclick="fadeOut()" />
<div id="open-modal" class="modal-window">
<div>
<h1>CSS Modal</h1>
<div>Copy ClipBoard</div>
</div>
</div>
<script>
function fadeOut(){
location.href='index.html#open-modal';
setTimeout(function () {
location.href='index.html#modal-close';
}, 1000);
}
</script>
</body>
</html>
or you can search: pure css popup box in google,
and there are many css framework like bootstrap or materialize css which contains various types of modal box.

How can I toggle the border property of an element on click, without it displacing other elements?

I'm trying to build a page where people can select the colour and capacity of a product. Only one colour/capacity can be active at a given time and when one has been selected a border needs to appear around it.
You can see in my attempt below the problem of the other elements being displaced when the border is applied.
I thought about giving all the elements border: 2px solid rgba(0,0,0,0) to resolve the displacing issue then using javascript to change the border properties on click, but I think this is probably not an elegant solution.
Here is the HTML...
<ul>
<li onclick="changeName('Gold')"><div class="select-colour" id="gold"></div></li>
<li onclick="changeName('Silver')"><div class="select-colour" id="silver"></div></li>
<li onclick="changeName('Space Grey'); "><div class="select-colour" id="space-grey"></div></li>
</ul>
and the CSS...
ul li {
width: 47px;
height: 47px;
border-radius: 12px;
border: 2px solid rgba(0,0,0,0);
padding: 3px;
}
.select-colour {
width: 45px;
height: 45px;
border-radius: 8px;
border: 1px solid #c2bebb;
-webkit-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
-moz-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
}
#gold {
background-color: #f5e7dc;
}
#silver {
background-color: #e2e2e2;
}
#space-grey {
background-color: #232323;
}
Does anyone have any ideas about the best way to approach this? Thanks.

Add box-sizing: border-box to the ul li selector like this:
ul li {
width: 47px;
height: 47px;
border-radius: 12px;
border: 2px solid rgba(0,0,0,0);
padding: 3px;
box-sizing: border-box;
}
Box sizing: border-box makes the element total width/height include the border and radius.
Edit:
Two links for documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Here's a CSS only solution using radio buttons and labels. Hope this helps.
* {
box-sizing: border-box;
}
.container {
position: relative;
padding-top: 30px;
}
label {
color: transparent;
position: absolute;
top: 0;
left: 0;
}
input:checked+label {
color: black;
}
input[type="radio"] {
display: none;
}
#gold+label:after {
content: "";
width: 2rem;
height: 2rem;
background: gold;
position: absolute;
border-radius: 5px;
top: 30px;
left: 0;
}
#gold:checked+label:after, #silver:checked+label:after, #bronze:checked+label:after {
border: 2px solid red;
}
#silver+label:after {
content: "";
width: 2rem;
height: 2rem;
background: silver;
position: absolute;
border-radius: 5px;
top: 30px;
left: 40px;
}
#bronze+label:after {
content: "";
width: 2rem;
height: 2rem;
background: sandybrown;
position: absolute;
border-radius: 5px;
top: 30px;
left: 80px;
}
<div class="container colors">
<form name="colors">
<input type="radio" id="gold" name="color" />
<label for="gold">Gold</label>
<input type="radio" id="silver" name="color" />
<label for="silver">Silver</label>
<input type="radio" id="bronze" name="color" />
<label for="bronze">Bronze</label>
</form>
</div>

use
box-sizing: border-box;
Here is the link to MDN where you can find more details
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Simply keep the border-color: transparent if the div is not selected, and change the color of the border on selection. By the way, you may add a transition to it as well.

<style>
input[type="checkbox"]:checked ~ #hello{
box-shadow: 0 0 0 3px hotpink;
}
#hello{
width: 50px;
margin: 20px;
}
</style>
<input id="check" type="checkbox">
<label id="hello" for="check">Hello</label>
This is what you want a hidden check box

stop focusing even i dont click outsite of div

I have written small piece of code where i have a div container and in that div has spans and forms textbox btns. when i click on btn1, container height increase and show an textbox but when i click on textbox div goes focus out. How is possible that when i click on btn1 and its stay focus in even i click on textbox(after click on btn1 and show blackbox) it shouldnt goes focusout and when i click out site of container it should goes focusout ? how can i do please help me ?
var tt = $.noConflict();
tt(document).ready(function($) {
$(".qta").focus(function() {
$(".gutt").css({
'display': 'inline-block'
});
$(".gutte").addClass('grandisciti');
});
$(".gutte").focusout(function() {
$(".gutt").css({
'display': 'none'
});
$(".gutte").removeClass('grandisciti');
});
});
body {
width: 100%;
height: 100%;
background-color: #c1c2c3;
}
.gutte {
box-sizing: border-box;
position: relative;
display: block;
width: 550px;
height: 50px;
background-color: #fff;
color: #000;
margin: 0px;
padding: 0px;
margin-left: 32%;
margin-top: 30px;
padding-top: 2.5px;
padding-left: 1px;
padding-bottom: 2px;
border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.ati {
box-sizing: border-box;
position: static;
display: inline-block;
width: 105px;
height: 45px;
margin: 0px;
padding: 0px;
padding: 0px 10px;
border: none;
background-color: #ccc;
/*border:2px solid #ccc;*/
border-radius: 10px;
outline: none;
cursor: pointer;
transition: 0.8s all;
font-size: 120%;
color: #000;
}
.grandisciti {
width: 600;
height: 300px;
-webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.gutt {
display: none;
width: 530px;
margin:10px;
background-color: #000;
}
.tref {
display: inline-block;
width: 80%;
height: 100px;
resize: none;
outline: none;
padding: 10px;
margin: 15px;
border: 5px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body
<div tabindex="1" class="gutte">
<div class="irj fjr_p05gure rddre ">
<button class="ati qta ">btn1</button>
<button class="ati ">btn2</button>
<button class="ati ">bt3</button>
</div>
<span class="gutt">
<input type="text" class="tref"/>
</span>
</div>

Have a close look at the event passed to the focusout function, in particular the target attribute. Your gutte div will likely be catching a focusout event generated by the button. You will need to put in some conditions so that you don't collapse gutte when focus is moving around within gutte.

Why does the login box appear without the link being clicked?

I am trying to make a login box modal dialog window with CSS, HTML and jQuery but the login box is appearing without me clicking the Login / Sign In link. My HTML code is fairly straightforward:
Login / Sign In
<div id="login-box" class="login-popup">
<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />
<form method="post" class="signin" action="#">
<fieldset class="textbox">
<label class="username">
<span>Username or email</span>
<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password" placeholder="Password">
</label>
<button class="submit button" type="button">Sign in</button>
<p>
<a class="forgot" href="#">Forgot your password?</a>
</p>
</fieldset>
</form>
</div>
<link rel="stylesheet" type="text/css" href="login.css" />
The CSS is more complex:
#mask {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
opacity: 0.8;
z-index: 999;
}
#login-popup {
display: none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999;
/* CSS3 */
-moz-box-shadow: 0px 0px 20px #999;
/* Firefox */
-webkit-box-shadow: 0px 0px 20px #999;
/* Safari, Chrome */
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
/* Firefox */
-webkit-border-radius: 3px;
/* Safari, Chrome */;
}
img#btn_close {
Position the close button
float: right;
margin: -28px -28px 0 0;
}
fieldset {
border: none;
}
form#signin #textbox label {
display: block;
padding-bottom: 7px;
}
form#signin #textbox span {
display: block;
}
form#signin p, form#signin span {
color: #999;
font-size: 11px;
line-height: 18px;
}
form#signin #textbox input {
background: #666666;
border-bottom: 1px solid #333;
border-left: 1px solid #000;
border-right: 1px solid #333;
border-top: 1px solid #000;
color: #fff;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font: 13px Arial, Helvetica, sans-serif;
padding: 6px 6px 4px;
width: 200px;
}
form#signin input:-moz-placeholder {
color: #bbb;
text-shadow: 0 0 2px #000;
}
form#signin input::-webkit-input-placeholder {
color: #bbb;
text-shadow: 0 0 2px #000;
}
#button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background: -o-linear-gradient(top, #f3f3f3, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color: #000;
border-width: 1px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: #333;
cursor: pointer;
display: inline-block;
padding: 6px 6px 4px;
margin-top: 10px;
font: 12px;
width: 214px;
}
#button:hover {
background: #ddd;
}
The jQuery is new to me and there is most likely a few errors in there.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
$(document).ready(function() {
$('a.login-window').click(function() {
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
Does anyone see some errors in that code that could be causing the problem? If so please tell me.

The problem is with HTML
<div id="login-box" class="login-popup">
and CSS
#login-popup {
display: none;
You use the # in the css selector which is for ids but the element has a class..
So the CSS rule should use .
.login-popup {
display: none;
Same error seems to exist for all your rules.. you use classes in the HTML but try to target them with id selectors in CSS