I'm implementing this codepen I found for a file upload function. It works fine on codepen, however when I actually put it into my own html/css/js setup the file does not upload. I get no file name showing after a file has been selected.
Here is the code from codepen:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="file-upload">
<div class="file-select">
<div class="file-select-button" id="fileName">Choose File</div>
<div class="file-select-name" id="noFile">No file chosen...</div>
<input type="file" name="chooseFile" id="chooseFile">
</div>
</div>
CSS
body
{
background-color: black;
}
.file-upload
{
width: 400px;
display: block;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
text-align: center;
}
.file-upload .file-select
{
background: #FFFFFF;
border: 2px solid #dce4ec;
color: #34495e;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
overflow: hidden;
position: relative;
text-align: left;
}
.file-upload .file-select .file-select-button
{
background: #dce4ec;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
.file-upload .file-select .file-select-name
{
display: inline-block;
line-height: 40px;
padding: 0 10px;
}
.file-upload .file-select:hover
{
border-color: #34495e;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload .file-select:hover .file-select-button
{
background: #34495e;
color: #FFFFFF;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload.active .file-select
{
border-color: #3fa46a;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload.active .file-select .file-select-button
{
background: #3fa46a;
color: #FFFFFF;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload .file-select input[type=file]
{
cursor: pointer;
filter: alpha(opacity=0);
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}
.file-upload .file-select.file-select-disabled
{
opacity: 0.65;
}
.file-upload .file-select.file-select-disabled:hover
{
background: #FFFFFF;
border: 2px solid #dce4ec;
color: #34495e;
cursor: default;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
margin-top: 5px;
overflow: hidden;
position: relative;
text-align: left;
}
.file-upload .file-select.file-select-disabled:hover .file-select-button
{
background: #dce4ec;
color: #666666;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
.file-upload .file-select.file-select-disabled:hover .file-select-name
{
display: inline-block;
line-height: 40px;
padding: 0 10px;
}
JS
$('#chooseFile').bind('change', function () {
var filename = $("#chooseFile").val();
if (/^\s*$/.test(filename)) {
$(".file-upload").removeClass('active');
$("#noFile").text("No file chosen...");
}
else {
$(".file-upload").addClass('active');
$("#noFile").text(filename.replace("C:\\fakepath\\", ""));
}
});
I've pasted the exact same code into my html and tried linking the javascript in both head and body. Also tried putting jquery cdn in both head and body. No success.
Any help would be much appreciated. Thanks.
******UPDATE******
Thanks for the suggestions guys. I actually tried the it with the CSS turned off and it works fine, which tells me it's nothing to do with the JS. So follow up question, what is it about this CSS that's stopping it from displaying the uploaded file?
You can open up the JavaScript tools in your browser and set a breakpoint on this line:
if (/^\s*$/.test(filename)) {
Then when the code runs you can see what value 'filename' has and figure out why the regular expression fails, and what it should be. The regexp you have there looks like it is checking for "a string that starts and ends with 0 or more spaces", so maybe you'll need to check for "filename.length == 0" or "filename === undefined".
You can debug the code in your destination website, but also within Codepen. It's a little tricky but can inspect your code running inside the pen to get a value for comparison.
If you still need help, please write back with the value of "filename" from your debugger sessions.
Debugging JS in Chrome tutorial.
Maybe it don't works in your html site, because the javascript will be executed too early. Wrap your js code into:
$(document).ready(function() {
// Put code here
});
This worked for me
$(document).ready(function () {
$("#chooseFile").change(function () {
//your code here
});
});
Related
Could someone tell me why isn't my text "Add Product" appearing inside of the button when the user hovers on the button?
Adding
display: flex
for the body seems to fix the issue but I don't wanna set the display of my body to flex. Is there some other way I could make it work?
.button {
background: #f6bc00 no-repeat -12px center;
border: 1px solid #f6bc00;
border-radius: 4px;
color: #fff;
display: inline;
font-size: 9px;
font-weight: 700;
overflow: hidden;
padding: 5px 8px 3px 8px;
text-decoration: none;
line-height: 8px;
text-transform: uppercase;
transition: padding .2s ease, background-position .2s ease, transform .5s ease;;
}
.button:span {
margin: 0;
padding: 0;
}
.button:hover {
transform: scale(1, 1);
padding-left: 88px;
padding-right: 5px;
background-position: 5px center;
}
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
.button:hover span:nth-child(1) {
bottom: 3px;
left: 20px;
}
/* PRESENTATION */
body {
background-color: black;
}
.button:nth-child(1) {
margin-right: 1em;
}
<a class="button" href="#" download="">
<span>Add Product</span>
<span>Add</span></a>
one way to do it is to hide the add product text.
i changed this..
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
to this..
.button span:nth-child(1) {
display:none;
transition: left .2s ease;
}
then on hover display inline
.button:hover span:nth-child(1) {
display:inline;
bottom: 3px;
}
checkout the codepen.
https://codepen.io/cartoonzzy/pen/PoGYowZ
Exclaimer, this is mostly snippet code, cause I didn't know how else to explain this. Please don't hate :3
The jQuery code is supposed to set the "max-height" property for "#dd.show". So can someone tell me why this doesn't work:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
var dv = document.getElementById("dd");
var item = dv.getElementsByTagName("A");
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px");
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
This is how it's supposed to look like. The only thing i changed was removing the .css JQuery and added "max-height" manually:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
top: 10px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
max-height: 225px;
}
#dd.show:hover {
border-radius: 37.5px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
jQuery works fine, you problem lies here: $("#dd.show"). At the point where you execute that code the selector #dd.show won't find anything as there exists no element like that. (You only add the show class on button click)
You will have to add that css when pressing the button. Also note that $.css adds in-line css. (like <div style="max-height:100px;"></div>)
at the time that this line executes:
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px")
you don't know for a fact that the div with id dd also has the show class. Since the show class is dynamically toggled, I'm guessing that this element
<div id="dd">...</div>
doesn't have the show class when your jquery code is running. That means that $("#dd.show") isn't returning anything which explains why your css method isn't working.
This is precisely the kind of thing that you should use plain css for if possible. If you can get the behavior you want by simply specifying
#dd.show {
max-height: 225px;
}
then I'd just do that.
If you want to test this to see if I'm right, then add the following line right before you try to set the max-height property with jQuery.
console.log($("#dd").hasClass('show'));
I found a solution to the sliding problem. I added an IF statement to check if the "show" class is active. If it is then toggle it and set "max-height" to 0px. If no, then toggle it and set "max-height" to the other long value :) Thanks for all the help guys. You helped me towards the finishline :3
Here is the final code for people that might come in later to see the solution :3
$("#btn").on("click", function() {
if(!$("#dd").hasClass("show")) {
$("#dd").toggleClass("show");
$("#dd.show").css("max-height", document.getElementById("dd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("dd").getElementsByTagName("A").length + "px");
} else {
$("#dd").toggleClass("show");
$("#dd").css("max-height", "0px");
}
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
I have a simple React component:
class FilterCheckBox extends React.Component {
clickCheckBox(e) {
console.log('clicked on checkbox');
}
render(){
return (
<div>
<a className="filter-checkbox" onClick={this.clickCheckBox.bind(this)}>
<span>{this.props.area.key}</span>
<span>{this.props.area.doc_count}</span>
</a>
</div>
)
}
}
With the className specified as above, the onClick handler is never called. However if I remove the className declaration, the onClick works fine.
The styles added by the class are:
.filter-checkbox,
.filter-checkbox:link,
.filter-checkbox:visited,
.filter-checkbox:focus {
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
color: #546e7a;
text-transform: uppercase;
text-decoration: none;
font: normal normal 700 0.875em/1.2em "Oxygen", sans-serif;
/*14px*/
outline: none;
position: relative;
display: block;
margin-bottom: 10px;
}
/* line 330, ../scss/partials/_reusables.scss */
.filter-checkbox:before,
.filter-checkbox:link:before,
.filter-checkbox:visited:before,
.filter-checkbox:focus:before {
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
content: '';
background: #ffffff;
border: 1px solid #cfd8dc;
color: #007cba;
clear: none;
cursor: pointer;
display: inline-block;
height: 15px;
line-height: 0;
width: 15px;
outline: none;
vertical-align: middle;
margin: -3px 10px 0 0;
}
/* line 347, ../scss/partials/_reusables.scss */
.filter-checkbox:after,
.filter-checkbox:link:after,
.filter-checkbox:visited:after,
.filter-checkbox:focus:after {
display: none;
content: '\f00c';
color: #ffffff;
font: normal normal 400 11px/11px FontAwesome;
position: absolute;
top: 2px;
left: 2px;
}
/* line 356, ../scss/partials/_reusables.scss */
.filter-checkbox:hover,
.filter-checkbox:link:hover,
.filter-checkbox:visited:hover,
.filter-checkbox:focus:hover {
color: #50d583;
text-decoration: none;
}
/* line 361, ../scss/partials/_reusables.scss */
.filter-checkbox.active:before,
.filter-checkbox:link.active:before,
.filter-checkbox:visited.active:before,
.filter-checkbox:focus.active:before {
border: 1px solid #50d583;
background: #50d583;
}
/* line 365, ../scss/partials/_reusables.scss */
.filter-checkbox.active:after,
.filter-checkbox:link.active:after,
.filter-checkbox:visited.active:after,
.filter-checkbox:focus.active:after {
display: block;
}
I can't see anything here that would stop the event from being propagated so there must be something I just don't understand properly..?
It turned out that this was caused by another script that was capturing the click event using jquery to target that specific class name.
Found through a process of elimination - first eliminating all scripts and restoring until the problem came back. Then inspecting the problem script until I found the offending line.
Thanks for your responses.
I can't figure out whats wrong with it.. it worked fine before, I don't now what I changed to make it break.. The jQuery should be correct and the cdn works as well..
check my pen: http://codepen.io/mathiasvanderbrempt/pen/oXMJRr
HTML:
<div class="header">
<p class="covertxt">INTERIEURINRICHTING <br> & SCHRIJNWERKERIJ</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
CSS:
.header {
background:#333;
z-index: 5;
margin: 0 auto;
width: 80%;
max-width: 500px;
top: 30vh;
/*absolute centering*/
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #fff;
}
.header img {
width:100%;
}
.header p {
font-size: 22px;
font-family: montserratlight;
letter-spacing: 0.4em;
line-height: 1.3em;
text-transform: capitalize!important;
cursor: default;
text-align: center;
-webkit-transition: all 1.25s ease-in-out;
-moz-transition: all 1.25s ease-in-out;
-ms-transition: all 1.25s ease-in-out;
-o-transition: all 1.25s ease-in-out;
transition: all 1.25s ease-in-out;
}
jQuery:
$(document).ready(function() {
var delay = 3000; //3 seconds
setTimeout(function() {
$('.header p').fadeOut(300, function() {
$(this).text("A LIFESTYLE FOR EVERYONE").fadeIn(300);
});
}, delay);
console.log("replaced");
});
I'm not entirely sure what you're trying to do but commenting out all the xxx-transition properties makes the text fade.
See corrected pen
I want to create a HUD display on the bottom of my game. To the right of the HUD bar will be a nested minimap.
When I hover over the HUD, it will increase opacity of the
When I click on the minimap (child of HUD), it will expand a larger map. When I click on the HUD (parent element), it will apply the opacity rule with toggleClass().
I don't want this opacity rule to be applied when I click on the child minimap though, only when I click on the parent HUD. Right now it's being applied when I click on parent and child.
See DEMO
HTML
<div id="HUD">
<div id="map"></div>
</div>
JS
$("#HUD").click(function(){
$(this).toggleClass("HUDactive");
});
CSS
#HUD {
position: absolute;
overflow: hidden;
height: 15%;
bottom: 0px;
width: 100%;
border-top: thin solid darkgray;
opacity: 0.3;
background-color: black;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#HUD:hover {
border-top: thin solid snow;
opacity: 0.8;
}
.HUDactive {
opacity: 0.8 !important;
}
#map {
color: red;
font-size: 18px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: gray;
height: 100%;
width: 15%;
float:right;
}
In Javascript a concept called "event bubbling" occurs. When you click on an element the events registered to that element occur first. Once they are completed, the event travels to the parent, and so on. You can use this to your advantage in this case, by stopping the event at the "#map" element.
Jquery has a handy way of doing this using stopPropagation.
Just add this code to your example:
$("#map").on('click', function(event){
event.stopPropagation();
});
You can check whether the click was happened in the #map element like
$("#HUD").click(function(e) {
//if #map don't have any descendants then
//if (!$(e.target).is('#map')) {
if (!$(e.target).closest('#map').length) {
$(this).toggleClass("HUDactive");
}
});
#HUD {
position: absolute;
overflow: hidden;
height: 15%;
bottom: 0px;
width: 100%;
border-top: thin solid darkgray;
opacity: 0.3;
background-color: black;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#HUD:hover {
border-top: thin solid snow;
opacity: 0.8;
}
.HUDactive {
opacity: 0.8 !important;
}
#map {
color: red;
font-size: 18px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: gray;
height: 100%;
width: 15%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="HUD">
<div id="map"></div>
</div>