Develop Reference

How to change the color of a span tag dynamically?

I am trying to build a slider. The Slider has a range of between 0 and 30 jumping 10 steps each time, so: 0, 10, 20, 30. At each of these 4 levels I've placed an empty circle. Currently, whenever I click on a level on the slider, the relevant part of the slider is painted in the expected colour. For example, a click on level 10, means the slider is painted in the given colour from 0-10. What I'm now trying to do is, getting the circles within a clicked level to have the same colour too, for instance I click level 10, and get circles placed at 0 and 10 to have the same colour too. I have the following code, that I've so far worked on:
function sliderVal(range){
var nodes=document.getElementsByClassName("dot");
for (let i=0;i<nodes.length;i++){
nodes[i].style.backgroundColor = "#DADDe3";
}
for (let i=0;i<range;i++){
console.log(nodes[i].id)
nodes[i].style.backgroundColor = "#84b7e3";
}
}
input[type=range] {
width: 100%;
margin: 3.9px 0;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
border-radius: 11px;
height: 11px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #84b7e3),
color-stop(0.15, #DADDe3)
);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
/*background-color: #E9E9E9;*/
/*border: 1px solid #CECECE;**/
box-shadow: 0px 0px 0.5px #000000, 0px 0.6px 1px #0d0d0d;
border: 0px solid #000000;
width: 20.035px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
margin-top: 0px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 11px;
cursor: pointer;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
background: #DADDe3;
border-radius: 1.3px;
border: 0px solid #010101;
}
input[type="range"]::-moz-range-progress {
height: 11px;
background-color: #84b7e3;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 18px;
width: 18px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 11px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #6fabde;
border: 0px solid #010101;
border-radius: 2.6px;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
background: #84b7e3;
border: 0px solid #010101;
border-radius: 2.6px;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 18px;
width: 18px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
height: 11px;
}
input[type=range]:focus::-ms-fill-lower {
background: #84b7e3;
}
input[type=range]:focus::-ms-fill-upper {
background: #99c3e8;
}
.dot {
height: 20px;
width: 20px;
background-color: #DADDe3;
border-radius: 50%;
display: inline-block;
}
#slider1{
position:absolute;
top: 77%;
left: 0%;
}
#slider2{
position:absolute;
top: 77%;
left: 10%;
}
#slider3{
position:absolute;
top: 77%;
left: 20%;
}
#slider3{
position:absolute;
top: 77%;
left: 30%;
}
<div class="slidecontainer" style="position: relative">
<input style="position: absolute" type="range" min="0" max="30" value="0" step="10" class="slider" id="myRange" onClick="sliderVal('value/10')">
<span class="dot" id="slider1" ></span>
<span class="dot" id="slider2" ></span>
<span class="dot" id="slider3"></span>
<span class="dot" id="slider4" ></span>
</div>
Unfortunately my clicklistener in the js file is not doing its job and the circles don't change their colour. As you can see, to create circles I used an empty span tag. I am completely new to HTML/Javascript and have the feeling I could/should have used something other than the span tag for what I want. Is there a way to make these span tags change their background color by modifying the above code? or should I use something else (maybe a circle icon or something) for that purpose? I know this isn't an original question. But answers to similar questions I found at Change color of span tag depending on value and also w3schools at https://www.w3schools.com/js/js_htmldom_css.asp didn't really help so far. Any suggestions?

So you need to change the onClick to onchange notice all lowercase which is the html property name for the event handler and then pass the function with the value as this.value so you'll end up with:
<div class="slidecontainer" style="position: relative">
<input style="position: absolute" type="range" min="0" max="30" value="0" step="10" class="slider" id="myRange" onchange="sliderVal(this.value/10)">
<span class="dot" id="slider1" ></span>
<span class="dot" id="slider2" ></span>
<span class="dot" id="slider3"></span>
<span class="dot" id="slider4" ></span>
</div>
and js
function sliderVal(range){
var nodes=document.getElementsByClassName("dot");
for (let i=0;i<nodes.length;i++){
nodes[i].style.backgroundColor = "#DADDe3";
}
for (let i=0;i<range;i++){
console.log(nodes[i].id)
nodes[i].style.backgroundColor = "#84b7e3";
}
}
Working DEMO

Here is really working dynamic example with change on slide:
function sliderVal(range){
var nodes=document.getElementsByClassName("dot");
for (let i=0;i<nodes.length;i++){
nodes[i].style.backgroundColor = "#DADDe3";
}
for (let i=0;i<range;i++){
console.log(nodes[i].id)
nodes[i].style.backgroundColor = "#84b7e3";
}
}
input[type=range] {
width: 100%;
margin: 3.9px 0;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
border-radius: 11px;
height: 11px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #84b7e3),
color-stop(0.15, #DADDe3)
);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
/*background-color: #E9E9E9;*/
/*border: 1px solid #CECECE;**/
box-shadow: 0px 0px 0.5px #000000, 0px 0.6px 1px #0d0d0d;
border: 0px solid #000000;
width: 20.035px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
margin-top: 0px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 11px;
cursor: pointer;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
background: #DADDe3;
border-radius: 1.3px;
border: 0px solid #010101;
}
input[type="range"]::-moz-range-progress {
height: 11px;
background-color: #84b7e3;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 18px;
width: 18px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 11px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #6fabde;
border: 0px solid #010101;
border-radius: 2.6px;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
background: #84b7e3;
border: 0px solid #010101;
border-radius: 2.6px;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 18px;
width: 18px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
height: 11px;
}
input[type=range]:focus::-ms-fill-lower {
background: #84b7e3;
}
input[type=range]:focus::-ms-fill-upper {
background: #99c3e8;
}
.dot {
height: 20px;
width: 20px;
background-color: #DADDe3;
border-radius: 50%;
display: inline-block;
}
#slider1{
position:absolute;
top: 77%;
left: 0%;
}
#slider2{
position:absolute;
top: 77%;
left: 10%;
}
#slider3{
position:absolute;
top: 77%;
left: 20%;
}
#slider3{
position:absolute;
top: 77%;
left: 30%;
}
<div class="slidecontainer" style="position: relative">
<input style="position: absolute" type="range" min="0" max="30" value="0" step="10" class="slider" id="myRange" oninput="sliderVal(Math.trunc(this.value/10))" onchange="sliderVal(Math.trunc(this.value/10))">
<span class="dot" id="slider1" ></span>
<span class="dot" id="slider2" ></span>
<span class="dot" id="slider3"></span>
<span class="dot" id="slider4" ></span>
</div>

Implement Close(X) option on a div via jquery

I have written below code to insert a banner on top of page and then on click on the banner, it should close the div. But I would like to display Close option on top right of the banner. Can someone help here?
<script>
function banner_load() {
jQuery('<span id="banner"><span class="banner-wrap" style="border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.4); display: block; font-size: 10pt; font-weight: bold; margin: 0 0 5px; padding: 5px 5px 5px 5px; position: relative; vertical-align: middle; color: white;"><span id="close" style="background: rgba(255,255,255,0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); color: #FFFFFF; cursor: pointer; font-size: 18px; font-weight: normal; height: 22px; line-height: 24px; position: absolute; right: 11px; text-align: center; top: 9px; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; width: 22px;" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;">x</span><img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto"></span></span>').insertBefore('#rootContainer');
setTimeout(function(){
if(typeof triggerResizeEvent === 'function'){ triggerResizeEvent(); }
},300);
setTimeout(function() {
document.getElementById('banner').style.display='none';
if(typeof triggerResizeEvent === 'function'){
triggerResizeEvent()
}
}, 40000);
};
window.onload = function(){banner_load();};
// for no space jQuery('<span id="banner"><span class="banner-wrap" style="border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.4); display: block; font-size: 10pt; font-weight: bold; margin: 0 0 0px; padding: 0px 0px 0px 0px; position: relative; vertical-align: middle; color: white;"><span id="close" style="background: rgba(255,255,255,0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); color: #FFFFFF; cursor: pointer; font-size: 18px; font-weight: normal; height: 22px; line-height: 24px; position: absolute; right: 11px; text-align: center; top: 9px; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; width: 22px;" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;">x</span><img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto"></span></span>').insertBefore('#rootContainer');
//
</script>

use parent id instead as
$('#banner').click(function(){
$(this).remove();
});

First thing first, please remove the code from line
jQuery('<span id="banner" style="height: auto;display: block;" class="banner"><span class="banner-wrap"><img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto"></span></span>').insertBefore('#rootContainer');
This is not recommended, better to have this piece of code in html file and manipulate it by using jquery hide() show() functions
Yes, you can add the close button somewhere
<span id="banner" style="height: auto;display: block;" class="banner">
<span class="banner-wrap">
//close button code goes here and please manipulate this DOM using jquery
<img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto">
</span>
</span>

You can show or hide a div using jQuery show() and hide() functions. Refer the code below:
$(document).ready(function(){
$(".banner-wrap").click(function(){
$("#banner").hide();
});
});

Box-shadow Disappearing while using Jquery Slide

Below Is my Css, I am using Jquery UI to slide between two div ,But I am loosing box shadow when Animation occurs.You can see the demo here https://jsfiddle.net/vfu2n7dk/3/.
.step1,
.step2 {
width: 100%;
position: absolute;
background:blue;
-webkit-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
box-shadow: 0px 0px 9px 3px rgba(0,0,0,0.75);
}
.slidecontainer {
position: relative;
}
.footer {
color: #696767;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, 0.51);
padding: 12px;
border-bottom: 2px solid #0D4413;
}
.clickverify {
color: red;
cursor: pointer;
}

I have done some changes in your code and it's working now. Please check the CODE SNIPPET.
I hope it will help you.
$(".clickverify").click(function() {
$(".step1").animate({ left:"-110%" });
$(".step2").animate({ right:"0%" });
});
.step1 {
width: 100%;
position: absolute;
background:blue;
-webkit-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
box-shadow: 0px 0px 9px 3px rgba(0,0,0,0.75);
left:0%;
}
.step2 {
width: 100%;
position: absolute;
background:blue;
-webkit-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
box-shadow: 0px 0px 9px 3px rgba(0,0,0,0.75);
right:-100%;
}
.slidecontainer {
position: relative;
}
.footer {
color: #696767;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, 0.51);
padding: 12px;
border-bottom: 2px solid #0D4413;
}
.clickverify {
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="step1">
step1
<br>
<br>
<div class="clickverify">
NEXT STEP
</div>
</div>
<div class="step2">
step2
<br>
<br>
</div>

Trying to implement a JQuery script (inexperimented)

I'm trying to implement a JQuery script to a php file, but so far it didn't work.
I'm very new to web programming (a couple weeks old) and this is my first real use of JQuery.
Here is part of what i want to do with this :
I'm trying to get the opacity of a span element gradually go from 1 to 0 for a login menu. The exact same thing as here.
And this is what i did : /** nevermind, not enough reputation for images **/
I have a some problems with this menu but my priority is to get that javascript to work. It is supposed to reduce the opacity to 0 of the icons in front of "username" and "password" (i'm just trying to have it work on password for now) but it doesn't.
This login form is part of my header.php and going to be all over the website.
Here are my codes (javascript / part of the css / part of my header.php) :
$( "#mdp" ).focusin(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
});
$( "#mdp" ).focusout(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
.......
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
And so far when i load my page nothing happens regarding theses icons, while they are supposed to vanish the same way as in the exemple i linked (and i'm guessing the submit button wouldn't either so i didn't bother going farther).
So what did i miss here ?
Thank you ! Any help is appreciated, hope there is enough information and if not i will provide more.
-Apatik
edit1 : my whole script.js looks like this :
$(document).ready(function(){
$( "#mdp" ).focusin(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
});
$( "#mdp" ).focusout(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
})

You're attaching an action to an element with the class login:
$(".login").submit(function(){
....
But nothing in your html has that class
Also, based on your comment where you said it works here but not in your own website, you may well have forgotten to include jQuery library - its done automatically here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit: Your code is in an external file called script.js which is fine, but that code executes immediately. It needs to execute once the DOM has loaded, therefore change script.js to look like
$(function(){
// existing code here
});
That is a shortened version of
$(document).ready(function(){
// existing code here
});
Either way will ensure your code only executes after the DOM has loaded.

You have to put focusin/focusout events on inputs not on the parent.
$( "#mdp input" ).focusin(function() {
$("#mdp").find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
}).focusout(function() {
$("#mdp").find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
.......
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>

you use $( "#mdp" ).focusin(function(){}); on the id #mdp but your input field has the id #txt_mdp.
Try this
$( "#txt_mdp" ).focusin(function(){ ... });
instead.

It is quite easy to solve your problem, and I suggest two ways:
Javascript
I have simplified your JS to make it work (if I deleted anything of other purposes, well, put that back). I added a class to the group that contains the icon and the input, and then bind on focus and blur events, like this:
$(".fadeicon input").focus(function() {
$(this).next().animate({opacity: 0})
}).blur(function() {
$(this).next().animate({opacity: 1})
});
I have used the standard focus and blur events on your input elements, and then select the next element to fade in or out. Your icons' HTML now look like this:
<div class="fadeicon">
<input type="text" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
The reason I added a class to the group is so you can easily select where you want this to take effect.
CSS
However, there is an even better way that rquires no javascript! It is a just css solution and it is two lines long:
.fadeicon input + span { opacity: 1; transition: opacity 400ms; }
.fadeicon input:focus + span { opacity: 0; }
Again, I used the fadeicon class to make it easily targeted, but as long as you can target them you can do this with CSS!
Examples
Here a jquery snippet:
$( ".fadeicon input" ).focus(function() {
$( this ).next().animate({opacity: 0})
}).blur(function() {
$( this ).next().animate({opacity: 1})
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant" class="fadeicon">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp" class="fadeicon">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
Heres the CSS snippet (example):
.fadeicon input + span {
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
opacity: 1;
}
.fadeicon input:focus + span { opacity: 0;}
<div class="fadeicon">
<input type="text">
<span>Fade me out</span>
</div>

POST wrong in javascript

I´m making a recover password page and I have to POST some xml information to an specific API.
My complete code is this:
<!DOCTYPE html>
<html>
<head>
<title> - Renew Password</title>
<meta charset="utf-8">
<meta name="viewport" content="width=500">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400italic,600,600italic,700,700italic" />
<style>
body {
margin: 0;
padding: 0;
height: 100%;
background: #F2F2F2; <!--url(http://peoplepowerco.com/img/email/bgBlueLg.png)-->
no-repeat;
background-size: 100%;
color: #333;
text-shadow: #fff 0px 1px 0px;
font-family: Helvetica, Arial, sans-serif;
}
#header {
width: 100%;
height: 45px;
background: #1CC0B1 url(http://wisemx.com.mx/img/logo.png) no-repeat;
background-size: 200px 45px;
}
#logo {
width: 0px;
height: 0px;
}
h1 {
color: #1CC0B1;
text-shadow: #000 0px 0px 0px;
}
.container {
width: 500px;
margin: 0px auto;
text-align: center;
}
.box {
background: #E0E0E0;
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9),
to(#D7D7D7));
background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
-webkit-box-shadow: inset 0px 2px 2px #B2B3B5;
-moz-box-shadow: inset 0px 2px 2px #B2B3B5;
-o-box-shadow: inset 0px 2px 2px #B2B3B5;
-khtml-box-shadow: inset 0px 2px 2px #B2B3B5;
box-shadow: inset 0px 2px 2px #B2B3B5;
-webkit-border-radius: 18px;
-o-border-radius: 18px;
-khtml-border-radius: 18px;
border-radius: 18px;
behavior: url(border-radius.htc);
border: solid 3px #FFFFFF;
}
label {
font-size: 18px;
}
input {
font-size: 18px;
}
input.button-primary {
display: inline-block;
padding: 8px 20px 10px;
text-decoration: none;
font-weight: bold;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
background-color: #f1f1f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f2),
to(#acacae));
background: -moz-linear-gradient(top, #f1f1f2, #acacae);
color: #333;
text-shadow: 0px 1px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
-moz-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
-o-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
-khtml-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
border: none;
font-size: 18px;
font-family: FuturaHv, Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
input.button-primary:hover {
background-color: #026eb2;
background: -webkit-gradient(linear, left top, left bottom, from(#98d7fe),
to(#026eb2));
background: -moz-linear-gradient(top, #98d7fe, #026eb2);
color: #ffffff;
text-shadow: 0px -1px 0px #333333;
}
input.button-primary:active {
background-color: #004b7b;
background: -webkit-gradient(linear, left top, left bottom, from(#026eb2),
to(#004b7b));
background: -moz-linear-gradient(top, #026eb2, #004b7b);
color: #cccccc;
text-shadow: 0px -1px 0px #000000;
}
input.button-primary:disabled {
background-color: #f1f1f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f2),
to(#acacae));
background: -moz-linear-gradient(top, #f1f1f2, #acacae);
color: #999;
text-shadow: 0px 1px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0 #fff;
-moz-box-shadow: inset 0px 1px 0 #fff;
-o-box-shadow: inset 0px 1px 0 #fff;
-khtml-box-shadow: inset 0px 1px 0 #fff;
box-shadow: inset 0px 1px 0 #fff;
border: none;
}
</style>
<script>
function submitForm()
{
var res = document.URL.split("=");
res[1] =
"XOXc4PKYCIMOMPYstCFZeCGhaeuYbqZZTvl6PwaOOb6rpu2npNhXT2Vr7Js6J2UX";
var request =
"http://developer.peoplepowerco.com/espapi/rest/user/"+res[1];
var frm = document.forms[0];
var pwdElement = frm.elements["pwd"]
var pwdConfirmElement = frm.elements["pwdConfirm"]
if (pwdElement.value.length < 6)
{
alert('La contraseña debe ser de al menos 6
caracteres de largo');
}
else if (pwdElement.value == pwdConfirmElement.value)
{
var user= "<request><user><password>" + pwdElement.value +
"</password></user></request>";
alert('DENTRO ' + request + ' ' + user);
$.ajax({
url:request,
type:"POST",
dataType:"text/xml",
data: user,
async: false,
success:
function(){
alert("Datos modificados exitosamente");
//window.location.href= "inicio.html";
},
error:
function( data, status, byKey ){
alert("Contraseña no modificada, intente
otra vez");
},
cache:false
});
alert("FUERA!");
var sbmButtom = frm.elements["submitButton"];
sbmButtom.disable=true;
frm.submit();
}
else
{
alert("Las contraseñas no coinciden. Favor de corregirlo e
intentar otra vez.")
}
}
</script>
</head>
<body>
<div id="header"></div>
<div id="logo"></div>
<div class="container">
<br clear="all">
<form name="renewPassword" method="post" action="/espapi/rest/newPassword"
onsubmit="return false">
<input type="hidden" name="key" value="tVzRl9fNE2ZAOt6yDx6frFCbsFQt2gyuKWn3wWkJ-
9oTrmiyprssDMWaEDEXylUk"/>
<h1>Escriba su nueva contraseña</h1>
<div class="box">
<p>
<label for="pwd">Nueva contraseña:</label><br>
<input id="pwd" name="pwd" type="password" value="">
</p>
<p>
<label for="pwdConfirm">Confirmar contraseña:</label><br>
<input id="pwdConfirm" name="pwdConfirm" type="password" value="">
</p>
<br>
</div>
<p>
<input type="button" name="submitButton" onclick="javascript:submitForm()"
value="Cambiar contraseña" class="button-primary">
</p>
</form>
</div>
</body>
</html>
And I don´t know what's wrong because when I write a smaller password or the passwords aren't the same; it showed me the alerts that I want but when everything is fine nothing happen. Could you help me??

$.ajax() is a jQuery feature. You have reference the jQuery library if you want to use that feature.
For example, you can add CDN reference to jQuery or download a copy to your server and reference it.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>