When uploading any file, it's appearing all input fields as the same value even appearing the clear and change button. Also if click the clear button, it's cleared all fields.
How it works each field uniquely?
Demo: https://jsfiddle.net/sanjida96xq2/5gLqthrj/12/
View Snapshot
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
$('.image-preview').hover(
function () {
$('.image-preview').popover('show');
},
function () {
$('.image-preview').popover('hide');
}
);
});
$(function() {
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
$('.image-preview-clear').click(function(){
$('.image-preview').attr("data-content","").popover('hide');
$('.image-preview-filename').val("");
$('.image-preview-clear').hide();
$('.image-preview-input input:file').val("");
$(".image-preview-input-title").text("Browse");
});
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (e) {
$(".image-preview-input-title").text("Change");
$(".image-preview-clear").show();
$(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
});
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div>
</div>
</div>
</div>
I've fixed your JS fiddle example here -
https://jsfiddle.net/5gLqthrj/27/
So what had to be updated?
All your code showing the popover, updating the file, etc, used generic $('.image-preview') jQuery selector code. However, all 3 file uploaders used that class, so whenever you used that code, all THREE would get selected and updated. You need to be more specific and only select the one clicked, of course.
So how to do that?
There are different ways but here's a simple solution:
When an event (like click, or hover, both of which you are using) is bound in jQuery, you can reference $(this) (or $(event.currentTarget)) to figure out exactly WHICH element was clicked. Then, instead of updating all elements with that class, you only update this. You also have a few other selectors that needed updating with a similar not-specific-enough selector problem, so instead of doing a wholesale $('.selector-here') grab, I changed the code to only search for that selector WITHIN the relevant element using .find, e.g. $(this).find('.selector-here')
Hopefully this makes sense to you :)
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
$('.image-preview').hover(
function () {
$(this).popover('show');
},
function () {
$(this).popover('hide');
}
);
});
$(function() {
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
$('.image-preview-clear').click(function(){
var $preview = $(this).closest('.image-preview');
$preview.attr("data-content","").popover('hide');
$preview.find('.image-preview-filename').val("");
$preview.find('.image-preview-clear').hide();
$preview.find('.image-preview-input input:file').val("");
$preview.find(".image-preview-input-title").text("Browse");
});
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
var $preview = $(this).closest('.image-preview');
reader.onload = function (e) {
$preview.find(".image-preview-input-title").text("Change");
$preview.find(".image-preview-clear").show();
$preview.find(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$preview.attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
});
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div>
</div>
</div>
</div>
Related
I have one leaflet map and 2 div section with some content.
<body>
<div class="row showEquipmentDetails" style="margin:10px;">
<button type="button" class="btn btn-primary" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
</div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
<div id="map">
</div>
</body>
<script>
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
</script>
Am doing hide and show of 2 div section its placed on out side of the map. But I need to hide and show it above the map,so I wrote like this
<div id="map">
<div class="row" style="margin:10px;">
<button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
</div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
</div>
But click events are not working on map. when I click on first button, map is getting zoomed .click events are not fired. why? How can I achieve it?any suggestion?Thanks!!
Map is not loading to me. But check whether this solution is working for you,
var mymap = L.map('map').setView([51.505, -0.09], 13);
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
#container {
width: 650px;
height: 350px;
position:relative
}
#map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.EquipmentContent {
width: 90%;
height: 90%;
position: absolute;
top:8px;
left: 45px;
}
.showEquipmentDetails {
width: 40px;
height: 40px;
position: absolute;
top:8px;
left: 45px
}
#EquipmentContent {
z-index: 10;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<div id="container">
<div id="map"></div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style=";background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
<button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" ><i class="fa fa-bars"></i></button>
</div>
Got solution.By adding the following style I am getting the expected result
.showEquipmentDetails,.EquipmentContent{
position:absolute;
z-index:9;
width:98%;
}
I have an issue with my bootstrap show password eye icon, only appearing half of it I have tried everything that I can think of, including the following:
Removing other CSS/SCSS scripts
Altering the append input class.
Here's My issue demo here ill add relevant code only also below:
<style type="text/scss">
#import url(http://fonts.googleapis.com/css?family=Lobster);
#page {
margin: 0 15px;
padding-top: 30px;
width: 25vw;
}
label {
font-size: 0.875em;
width: 25vw;
}
// Error Messages - front end validation
.form-group.error {
label.error {
margin-top: 5px;
color: #ee4141;
}
}
// Pod
// --------------------------------------------------
// Password Creation Info Box
// --------------------------------------------------
#password-info {
margin: 20px 0;
overflow: hidden;
text-shadow: 0 1px 0 #fff;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 10px 10px 10px 50px;
margin-bottom: 1px;
background: #f4f4f4;
font-size: 12px;
transition: 250ms ease;
position: relative;
.icon-container {
display: inline;
width: 50px;
background: lighten(#428bca, 20%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
text-align: center;
.fa {
color: white;
padding-top: 10px;
position: relative;
top: 2px;
}
}
.tip {
color: #5ca6d5;
text-decoration: underline;
}
&.valid {
.icon-container {
background-color: #18c36b;
}
color: darken(#18c36b, 10%);
}
span.invalid {
color: #ff642e;
}
}
}
}
</style>
<script type="text/javascript" src="https://antimalwareprogram.co/LoginSys/browser-scss.min.js"></script>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<!--<link href="/sb/css/sb-admin.css" rel="stylesheet">-->
<script src="https://antimalwareprogram.co/sb/vendor/jquery/jquery.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/popper/popper.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<div class="input-append input-group"><input id="password" class="form-control" type="password" value="123" placeholder="password" style="display: block;"><input type="text" class="form-control" placeholder="password" style="display: none;"><span tabindex="100" title="Click here show/hide password" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span></div>
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="form-group">
</div>
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account <br> <p>Already a member? Login</p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<input type="text" name="username" id="username" class="form-control input-lg" placeholder="User Name" value="" tabindex="1">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" value="" tabindex="2">
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
<form class="validate-password" method="post" action="#">
<fieldset class="fieldset-password">
<!--<div id="alert-invalid-password" class="alert alert-danger hide">Please enter a valid password</div>
<p>All checkmarks must turn green in order to proceed</p>-->
<div id="password-info">
<ul>
<li id="length" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 6 characters
</li>
<li id="capital" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 uppercase letter
</li>
<li id="lowercase" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 lowercase letter
</li>
<li id="number" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 number</span>
</li>
<li id="special" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 symbol</span>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-7 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control input-lg" placeholder="Confirm Password" tabindex="4">
</div>
</div>
</div>
<style>
#submit , #login {
display:inline-block;
/**other codes**/
}
</style>
<div class="row" id="submits">
<input type="submit" name="submit" id="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="5">
</div>
</div>
</form>
</div></center>
<script type="text/javascript">
$("#password").password('toggle');
</script>
What really does work? only if i add the exact bootstrap code css does the eye work, but that also makes the rest of my sites css get screwed up! Demo of what I mean:
<style type="text/scss">
#import url(http://fonts.googleapis.com/css?family=Lobster);
#page {
margin: 0 15px;
padding-top: 30px;
width: 25vw;
}
label {
font-size: 0.875em;
width: 25vw;
}
// Error Messages - front end validation
.form-group.error {
label.error {
margin-top: 5px;
color: #ee4141;
}
}
// Pod
// --------------------------------------------------
// Password Creation Info Box
// --------------------------------------------------
#password-info {
margin: 20px 0;
overflow: hidden;
text-shadow: 0 1px 0 #fff;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 10px 10px 10px 50px;
margin-bottom: 1px;
background: #f4f4f4;
font-size: 12px;
transition: 250ms ease;
position: relative;
.icon-container {
display: inline;
width: 50px;
background: lighten(#428bca, 20%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
text-align: center;
.fa {
color: white;
padding-top: 10px;
position: relative;
top: 2px;
}
}
.tip {
color: #5ca6d5;
text-decoration: underline;
}
&.valid {
.icon-container {
background-color: #18c36b;
}
color: darken(#18c36b, 10%);
}
span.invalid {
color: #ff642e;
}
}
}
}
</style>
<script type="text/javascript" src="https://antimalwareprogram.co/LoginSys/browser-scss.min.js"></script>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<!--<link href="/sb/css/sb-admin.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://antimalwareprogram.co/sb/vendor/jquery/jquery.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/popper/popper.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<div class="input-append input-group"><input id="password" class="form-control" type="password" value="123" placeholder="password" style="display: block;"><input type="text" class="form-control" placeholder="password" style="display: none;"><span tabindex="100" title="Click here show/hide password" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span></div>
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="form-group">
</div>
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account <br> <p>Already a member? Login</p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<input type="text" name="username" id="username" class="form-control input-lg" placeholder="User Name" value="" tabindex="1">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" value="" tabindex="2">
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
<form class="validate-password" method="post" action="#">
<fieldset class="fieldset-password">
<!--<div id="alert-invalid-password" class="alert alert-danger hide">Please enter a valid password</div>
<p>All checkmarks must turn green in order to proceed</p>-->
<div id="password-info">
<ul>
<li id="length" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 6 characters
</li>
<li id="capital" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 uppercase letter
</li>
<li id="lowercase" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 lowercase letter
</li>
<li id="number" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 number</span>
</li>
<li id="special" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 symbol</span>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-7 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control input-lg" placeholder="Confirm Password" tabindex="4">
</div>
</div>
</div>
<style>
#submit , #login {
display:inline-block;
/**other codes**/
}
</style>
<div class="row" id="submits">
<input type="submit" name="submit" id="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="5">
</div>
</div>
</form>
</div></center>
<script type="text/javascript">
$("#password").password('toggle');
</script>
Relevent code:
Password Input Field
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100" data-toggle="password">
</div>
</div>
</div>
Bootstrap CDN CSS I use:
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-
eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-
warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-
plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-
gift:before{content:"\e102"}.glyphicon-
leaf:before{content:"\e103"}.glyphicon-
fire:before{content:"\e104"}.glyphicon-eye-
open:before{content:"\e105"}.glyphicon-eye-
close:before{content:"\e106"}.glyphicon-warning-
sign:before{content:"\e107"}.glyphicon-
plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
Demo Of just The one input:
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://antimalwareprogram.co/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="card card-register mx-auto mt-5">
<div class="card-body">
<form>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
JSFiddle With Just Input field
Note: It works only when a ad blocker is enabled but only shows a emoji then!
Another Note: With Font Awesome, it doesnt show anything with ad blocker, but without it is still half an eye!
The bootstrap css that you are including is different to the JS that you are including. Use the official CDN: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Also, make sure you close all your tags. Unclosed tags can do strange things to the layout.
Here is a working fiddle: https://jsfiddle.net/sveynh3z/
Apologies for being late to the party but I see that some of the snippets here don't appear to be working correctly so here's my one. Should it be of any use.
If you're getting an error viewing the snippet (using Chrome), please use the JSFiddle.
var timeoutId = 0;
$('#check').on('mousedown', function() {
$('#eye').removeClass( "glyphicon glyphicon-eye-close" );
$('#eye').addClass( "glyphicon glyphicon-eye-open" );
$('#password').attr('type', 'text');
timeoutId = setTimeout(1000);
}).on('mouseup mouseleave', function() {
$('#password').attr('type', 'password');
$('#eye').removeClass( "glyphicon glyphicon-eye-open" );
$('#eye').addClass( "glyphicon glyphicon-eye-close" );
clearTimeout(timeoutId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3>Show Password Example:</h3>
<div class="input-group">
<input type="password" id="password" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="check"><span id="eye" class="glyphicon glyphicon-eye-close" aria-hidden="true"></span></button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</div>
I'm using a Bootstrap collapsible panel.
Here's the Fidle for it
I'm trying to do the following :
I want to move both the buttons on the Panel header(at the extreme
right end) i.e. exactly opposite to the text "Panel"
But I only want the buttons to be visible when the panel is expanded. And
when the panel is hidden the buttons should be hidden too.
How can I achieve this. What would be the JS for it?
I tried to do the following in JS:
$(document).ready(function () {
$("#btnSearch").hide();
$(".panel-title").click(function () {
$("#btnSearch").show();
});
});
But with this the buttons won't hide when the panel is made to hide.
Try this. I moved your buttons to panel-heading itself and positioned them using position:absolute;.
It is very similar to this bootsnipp
$(".panel-success").on('show.bs.collapse', function() {
$('.buttonCon').addClass('vis');
}).on('hide.bs.collapse', function() {
$('.buttonCon').removeClass('vis');
})
.panel{
position:relative;
}
.buttonCon{
position:absolute;
top:5px;
right:10px;
display:none;
}
.buttonCon.vis{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-success">
<div class="buttonCon">
<button type="button" class="btn btn-primary" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
<button type="reset" class="btn btn-warning" id="clearAll" data-toggle="tooltip" title="btn2">
Buttonn2
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
<div class="form-group row" style="margin-left:auto;margin-right:auto;">
<div class="col-md-2 col-md-offset-5">
</div>
</div>
</div>
</div>
</div>
You can use bootstrap collapse events to achieve it.
$('#accordion').on('shown.bs.collapse', function() {
$(".buttons").show();
})
$('#accordion').on('hidden.bs.collapse', function() {
$(".buttons").hide();
})
Check this fiddle.
The following JsFiddle is another option compared to the answers already given.
Mainly, it prevents the use of position: absolute which can result in a mish-mash of bad things happening. The following jQuery (which is readily available since you are using bootstrap) will work:
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
Take note that there are events to track whether a panel is currently opening or closing (plus two others), which can be found here.
I would also suggest that you take the time to read some of the documentation/examples found on the bootstrap webpage, only because a lot of your css/html is pretty rough/unnecessarily complex.
Got it working by combining the answers provided by #kittyCat (the updated solution) and #BuddhistBeast .
Here's the Fiddle.
HTML code :
<div class="container">
<div class="panel panel-success" id="js-panel">
<div class="panelButtons">
<button type="reset" class="js-toggle-btn btn-warning pull-right btn-xs hide" id="clearAll" data-toggle="tooltip" title="btn2" style="margin-left:5px;">
Button2
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="js-toggle-btn btn btn-primary pull-right btn-xs hide" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
</div>
</div>
</div>
JS Code :
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!
You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/
I'm trying to get the key attribute of the <td> tag from the below HTML code.
<td class="xedit editable editable-click editable-open" id="3" key="details" data-original-title="" title="">Javascript library </td>
<div class="popover fade top in editable-container editable-popup" style="top: 289px; left: 534px; display: block;">
<div class="arrow"></div>
<div class="popover-content">
<div>
<div class="editableform-loading" style="display: none;"></div>
<form class="form-inline editableform" style="">
<div class="control-group form-group">
<div>
<div class="editable-input" style="position: relative;">
<input type="text" class="form-control input-sm" style="padding-right: 24px;">
<span class="editable-clear-x">
</span>
</div>
<div class="editable-buttons">
<button type="submit" class="btn btn-primary btn-sm editable-submit">
<i class="glyphicon glyphicon-ok">
</i>
</div>
</div>
</div>
</form>
</div>
jQuery used :
var x = $(this).closest('div').find('.editable-container').closest('td').attr('key'); //Doesn't work
var x = $(this).closest('td').attr('key'); //Doesn't work
Try to use:
var x = $(this).closest('.editable-container').prev().attr('key');