We Keep Coding

how to make the events work for the list inside the fieldset which is disabled

**
How to make the 'li' tag work with the javascript events which is inside the fieldset(disabled). I don't know why it is not working please help with this.
**
const enabledButton = document.querySelector('.file-download');
enabledButton.addEventListener('click', () => alert("ok"));
.file-displayer {
padding-left: 5px;
max-height: 50px;
overflow-y: scroll;
overflow-x: auto;
}
.file-download {
display: block;
cursor: pointer;
color: blue;
font-size: 12px;
}
[role="button"] {
-webkit-appearance: button;
appearance: button;
cursor: default;
font-style: normal;
-webkit-user-select: none;
user-select: none;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<fieldset disabled>
<label id="77"> Supporting documents</label><br id="78"><button id="79" type="button" class="w3-button w3-indigo w3-border w3-round-large" style="margin-top: 3px;"> Attach</button><input id="80" name="supdoc" type="file" required="true" accept="*"
style="display: none;">
<ul id="81" name="supdoc_displayer" class="file-displayer" style="width: 100%;"><span><i class="fa fa-minus-square w3-left" title="delete" aria-hidden="true" style="color: red; cursor: pointer;"> </i><span class="sr-only">delete</span>
<li class="file-download" role="button" tabindex="0" title="download">roles.PNG</li>
</span>
</ul>
</fieldset>
</body>

If you add pointer-events:auto!important;to .file-download class will work. if you use dev console without add pointer event you will see is disabled how parent.
const enabledButton = document.querySelector('.file-download');
enabledButton.addEventListener('click', () => alert("ok"));
.file-displayer {
padding-left: 5px;
max-height: 50px;
overflow-y: scroll;
overflow-x: auto;
}
.file-download {
display: block;
cursor: pointer;
color: blue;
font-size: 12px;
pointer-events:auto!important;
}
[role="button"] {
-webkit-appearance: button;
appearance: button;
cursor: default;
font-style: normal;
-webkit-user-select: none;
user-select: none;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset disabled>
<label id="77"> Supporting documents</label><br id="78"><button id="79" type="button" class="w3-button w3-indigo w3-border w3-round-large" style="margin-top: 3px;"> Attach</button>
<input id="80" name="supdoc" type="file" required="true" accept="*" style="display: none;">
<ul id="81" name="supdoc_displayer" class="file-displayer" style="width: 100%;"><span><i class="fa fa-minus-square w3-left" title="delete" aria-hidden="true" style="color: red; cursor: pointer;"> </i><span class="sr-only">delete</span><li class="file-download" role="button"
tabindex="0" title="download">roles.PNG</li></span></ul>
</fieldset>
</body>

To suggest an alternative answer...
Get rid of the disabled tag and disable it via Javascript. Assign an ID to the fieldset and the list you wish to keep enabled. Then in JS on page load or similar event, disable the fieldset and then enable the list.
I think this is an easier and more effective solution. As it's specifically only the li. The - for removing the entry is still independant and disabled.
So you can click it and nothing happens. (Currently)
Rather than clicking it and getting the alert as if it's part of the list!
See the below Snippet:
$(document).ready(function () {
$('#form :input').prop('disabled', true);
$("#btn1").prop('disabled', false);
})
const enabledButton = document.querySelector('.file-download');
enabledButton.addEventListener('click', () => alert("ok"));
.file-displayer {
padding-left: 5px;
max-height: 50px;
overflow-y: scroll;
overflow-x: auto;
}
.file-download {
display: block;
cursor: pointer;
color: blue;
font-size: 12px;
}
[role="button"] {
-webkit-appearance: button;
appearance: button;
cursor: default;
font-style: normal;
-webkit-user-select: none;
user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<fieldset id="form">
<label id="77"> Supporting documents</label><br id="78"><button id="79" type="button" class="w3-button w3-indigo w3-border w3-round-large" style="margin-top: 3px;"> Attach</button>
<input id="80" name="supdoc" type="file" required="true" accept="*" style="display: none;">
<ul id="81" name="supdoc_displayer" class="file-displayer" style="width: 100%;">
<span><i class="fa fa-minus-square w3-left" title="delete" aria-hidden="true" style="color: red; cursor: pointer;"> </i><span class="sr-only">delete</span>
<li id="btn1" class="file-download" role="button" tabindex="0" title="download">roles.PNG</li>
</span>
</ul>
</fieldset>
</body>

HTML file upload

I'm trying to get file upload working for 3 different div ids (each with their own respective preview), I had come close to it working but the first div replaces the other two divs content.
I'm not sure what I'm doing wrong with the Javascript (not very well versed in js), any help would be extremely appreciated!
function readURL(input, target) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var image_target = $(target);
reader.onload = function (e) {
image_target.attr('src', e.target.result).show();
};
reader.readAsDataURL(input.files[0]);
}
}
$("#pic1").live("change",function(){
readURL(this, "#preview1");
});
$("#pic2").live("change",function(){
readURL(this, "#preview2");
});
$("#pic3").live("change",function(){
readURL(this, "#preview3");
});
.input-file-row-1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.input-file-row-1{
display: inline;
margin-top: 25px;
position: relative;
}
#preview_image {
display: inline;
width: 90px;
height: 90px;
margin: 2px 0px 0px 5px;
border-radius: 10px;
}
.upload-file-container {
position: relative;
width: 100px;
height: 137px;
overflow: hidden;
background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
float: left;
margin-left: 23px;
}
.upload-file-container-text{
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #719d2b;
line-height: 17px;
text-align: center;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100px;
height: 35px;
}
.upload-file-container-text > span{
border-bottom: 1px solid #719d2b;
cursor: pointer;
}
.one_opacity_0 {
opacity: 0;
height: 0;
width: 1px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview1" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="pic1" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview2" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="pic2" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview3" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="pic3" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>

the "live" method is deprecated, instead change the code to:
$("#pic1").on("change",function(){
readURL(this, "#preview1");
});
$("#pic2").on("change",function(){
readURL(this, "#preview2");
});
$("#pic3").on("change",function(){
readURL(this, "#preview3");
});

Title attribute not working in IE11

Hi I just want to ask what's wrong with my program. Im doing this program where I have to choose a file. But the button is an image and I would like to add a tooltip that this image is for selecting a file. This block of codes is perfectly working in chrome. But when I run it in IE11 the title "Select File"is not showing in IE11. I didn't know that IE has a lot of restriction. Unlike in chrome.
.image-upload>input {
visibility: hidden;
width: 0px;
height: 0px;
margin: -10%;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 250px;
img {
width: 90px;
height: 50px;
}
.caption {
display: block;
color: white;
}
div.space {
margin-top: -15px;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size = "5"><b>&nbsp&nbsp&nbspSelect File&nbsp&nbsp&nbsp </b><span style="cursor:pointer" alt="Select File" title="Select File">
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p></label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>

You need to remove the inline style of pointer-events:none from the image tag if you want to be able to hover it.
By setting it to none, it means your mouse can't interact with the element and therefore it cannot hover it to show the title.
Try this:
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
Example fiddle showing with and without pointer events
More information about pointer events
Also please note the following errors with your code:
the font tag is obsolete and should not be used - use css instead
&nbsp should have a semi colon after it:
there is an extra end label and I don't think you are allowed p tags inside - use a validator to check your code
<div class="image-upload">
<p align="left"><label for="file-input"><b> Select File </b>
</label></p>
<span style="cursor:pointer; display:inline-block;" alt="Select File" title="Select File"><label for="file-input"><img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
</label></span>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>

you could add another span ( for example ), give it position absolute, and on hover on the image, show it .
you can also you javascript ( jquery ) to show it in the same position your cursor is, but that's a bit more complicated.
See below if this is what you want
.title {
transition: 0.3s ease-out;
opacity: 0;
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
font-size: 15px;
background: #fff;
}
.wrapper {
display: inline-block;
position: relative;
}
.wrapper:hover .title {
opacity: 1;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size="5"><b>&nbsp&nbsp&nbspSelect File&nbsp&nbsp&nbsp </b> <span class="wrapper" style="cursor:pointer" alt="Select File" title="Select File">
<span class="title">Select File</span>
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p>
</label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>

Angular JS : show text box relatively based on click on radio button and change background color of div

image
I am new to angularjs. as shown in the image , by default linkedin radio button is selected.
but when i select on facebook radio button then two textboxes appears for 1 sec and hide the linked in textbox.
when i click on linkedin button then linked in textbox should appear and other textbox should get disappear and when i click on facebook radio button then facebook textbox should appear.
here is JSFiddle
Thank You.
.social_icon_radio_toggle {
float: left;
margin-right: 20px;
}
label {
float: left;
width: 35px;
height: 35px;
overflow: hidden;
cursor: pointer !important;
margin-right: 5px;
}
span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
input {
position: absolute;
}
//wheather radio button is checked or not
input:checked + span {
background-color: $linked_in_bg_color;
color: #fff;
min-height: 100%;
width: 35px;
line-height: 33px;
}
input:not(:checked + span) {
background-color: #edf1f2;
color: #58666e;
}
.linkedin {
background-color: #edf1f2;
color: #58666e;
border: thin #a8a8a8 solid;
color: #a8a8a8;
line-height: 33px;
}
.facebook {
background-color: #edf1f2;
color: #58666e;
border: thin #ced9db solid;
line-height: 35px;
}
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section">
<div class="social_icon_radio_toggle">
<label class="linkedin">
<input type="radio" name="registration_options" checked="checked" ng-click="option='linkedin'" ng-init="option='linkedin'">
<span><i class="fa fa-linkedin"></i> </span></label>
<label class="facebook">
<input type="radio" name="registration_options" ng-click="option='facebook'">
<span><i class="fa fa-facebook"></i> </span></label>
</div>
<div>
<input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="option == 'linkedin'" ng-hide="option == 'facebook'">
</div>
<input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="option == 'facebook'" ng-hide="option == 'linkedin'">
</div>

.social_icon_radio_toggle{
float: left; margin-right: 20px;
}
label {
float:left;width:35px; height:35px;overflow:hidden;cursor: pointer !important; margin-right: 5px;}
span {text-align:center;font-size: 15px;margin:auto;display: block;}
input {position:absolute;}
//wheather radio button is checked or not
input:checked + span {background-color:$linked_in_bg_color;color:#fff; min-height: 100%; width: 35px; line-height: 33px;}
input:not(:checked + span) {background-color:#edf1f2;color:#58666e;}
.linkedin {background-color:#edf1f2;color: #58666e; border: thin #a8a8a8 solid; color: #a8a8a8;line-height: 33px;}
.facebook {background-color:#edf1f2;color: #58666e;border: thin #ced9db solid; line-height: 35px;}
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section">
<div class="social_icon_radio_toggle">
<label class="linkedin">
<input type="radio" name="registration_options" checked="checked" ng-click="option='linkedin'" ng-init="option='linkedin'">
<span><i class="fa fa-linkedin"></i> </span></label>
<label class="facebook" >
<input type="radio" name="registration_options" ng-click="option='facebook'">
<span><i class="fa fa-facebook"></i> </span></label>
</div>
<div type="text" ng-show="option === 'linkedin'" >
<input class="form-control " placeholder="www.linkedin.com/example" >
</div>
<div ng-show="option === 'facebook'">
<input class="form-control " placeholder="www.facebook.com/example" type="text" >
</div>
</div>
Here is updated JSFiddle
Hope this helps.

You should use the directive ng-model to track the value of your 'option' property. Then set per every radio button the corresponding ng-value.
And take into account, that ng-show and ng-hide works in similar ways. It is not necessary to use both at the same time.
ng-hide = hide the element if the expression = true
ng-show = show the element if the expression = true
<label class="linkedin" >
<input type="radio" name="registration_options" ng-model="option" ng-value="'linkedin'">
<span><i class="fa fa-linkedin"></i> </span></label>
<label class="facebook" >
<input type="radio" name="registration_options" ng-value="'facebook'" ng-model="option">
<span><i class="fa fa-facebook"></i> </span></label>
<input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="option == 'linkedin'">
<input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="option == 'facebook'">
Working Sample:
https://plnkr.co/edit/ezDAwU41vYKrw7DwWJAB

Reduce upload button size in CSS

I created a button to upload a file with an icon in order to mask the input text box and have just one button. The problem is that my button takes all the width of the div. I would like the two button are side by side. But, when I modify the .btn-file, the select dialog is broken and so, It doesn't appears.
This is the div :
<div id="mydiv">
A text <br>
An other text
<form id="test">
<span class="btn btn-block btn-file">
<i class="glyphicon glyphicon-export"></i>
<input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit">
</span>
</form>
<span class="glyphicon glyphicon-envelope"></span>
</div>
This it the CSS :
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
font-size: 100px;
text-align: left;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
}
Can you help me to align the two buttons and reduce the size of the upload button ? Thanks.

You just need to make inline to the span that contains file upload button.
I modified your demo here - https://plnkr.co/edit/cYpho3SPeRV4NqqGOuHw?p=preview
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
font-size: 100px;
text-align: left;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="mydiv">
A text <br>
An other text
<form id="test">
<span class="btn btn-block btn-file" style="display:inline">
<i class="glyphicon glyphicon-export"></i>
<input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit">
</span>
<span class="glyphicon glyphicon-envelope"></span>
</form>
</div>
</body>
</html>

You've got the class btn-block on the outer span -- which is making it display in block mode, hence why it's taking up all the width available. Remove that class if you don't want this behaviour.