We Keep Coding

How to change the position of the div after file upload?

I want to reposition my browse button when the user uploaded a file. This is the sample of how it should really look before and after uploading the file:
Before:
After:
I change the content of my button "Browse file" to "Replace File"
This is my html code.
<div id="uploadModal" class="upload-modal">
<div class="modal-content">
<h2 style="font-size: 24px;">Choose file</h2>
<p>
Choose the csv file containing the data you want to create a forecast for.
</p>
<div class="browse-file">
<div id="filename"></div>
<input type="file" id="file-upload" multiple required />
<label for="file-upload">Browse file</label>
</div>
<div class="options">
<button class="cancel"><h4>Cancel</h4></button>
<button class="proceed"><h4>Proceed</h4></button>
</div>
</div>
</div>
Here is my CSS
.upload-modal {
display: none;
position: fixed;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 34, 2, 0.3);
}
input[type="file"] {
position: absolute;
opacity: 0;
z-index: -1;
}
input + label {
padding: 10px 24px;
background: #D4E8CF;
border-radius: 100px;
position: static;
width: 119px;
height: 40px;
border: none;
cursor: pointer;
z-index: 1;
}
#filename{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
justify-content: left;
align-items: flex-start;
}
What's happening here is that my button moves according to the length of the file so I added max-width but no luck. Thanks!
EDIT: I added css for upload-modal

I'm not sure you need to use absolute positioning for what you want.
You could set div#upload-modal or div.modal-content to position: relative;
and then position the button element with left: or right: or use float: right;
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/float

This alternate version uses CSS's Flexbox and JavaScript's Event Listeners.
It probably doesn't do precisely what you want but should come close enough that reading through the comments a few times and playing around with the code should make clear how you can get to where you want to go using just a few lines of JavaScript to grab the file name and show it on the screen.
MDN (linked above) is a great place to get more clarity about any particular front-end feature that you're interested in using. Happy coding!
// Unnamed function runs as soon as the DOM elements are ready
window.addEventListener('DOMContentLoaded', () => {
// Identifies some of the DOM elements
const
filenameSpan = document.getElementById("filename-span"),
fileInput = document.getElementById("file-input"),
chooseBtn = document.getElementById("choose-btn");
// When the input changes (when a file is chosen), calls `updateDisplay`
fileInput.addEventListener("change", updateDisplay);
// Defines `updateDisplay`
function updateDisplay(){
// Puts first fiename in span and "unhides" it
const filename = fileInput.files[0]?.name;
filenameSpan.textContent = filename || "(choose file)";
filenameSpan.classList.remove("hidden");
};
});
*{
margin: 0;
}
#container{
width: 18rem; /* "rem" unit is the base character height */
padding: 2rem;
border-radius: 1.5rem;
background-color: lightgrey;
}
#header{
margin-bottom: 2rem;
}
#chooser{
/* flex w/ space-around makes choose-btn shift right when filename appears */
display: flex;
justify-content: space-around;
margin-bottom: 4rem;
}
#options{
text-align: right;
}
#filename-span{
padding: 1rem 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 6rem;
}
button{ /* the "options" buttons */
border: none;
font-weight: bold;
color: darkgreen;
background-color: lightgrey;
}
#choose-btn{
/* Not a true "button" element -- the "label" for file-input */
padding: 1rem 1.5rem;
background-color: darkseagreen;
border-radius: 2rem;
border: none;
font-weight: bold;
}
.hidden{ /* Uses a class so all styling happens thru CSS */
display: none;
}
<div id="container">
<div id="header">
<h2>Choose file</h2>
<p> Choose the csv file containing the data you want to create a forecast for</p>
</div>
<div id="chooser">
<!-- The span and input elements are initially "hidden" via CSS -->
<span id="filename-span" class="hidden"></span>
<label id="choose-btn">
<!-- input element is inside its stylable & clickable label -->
Browse File
<input id="file-input" type="file" class="hidden" />
</label>
</div>
<div id="options">
<button id="cancel-btn">Cancel</button>
<button id="proceed-btn">Proceed</button>
</div>
</div>

How to get the clear 'X' button inside the input field?

I created a search field where the user can type some text. Next to the search field, is an 'X' button which is there to clear of search inputs. The problem I notice is that, on my phone, the 'X' button is just outside of the input search box: Here is the example. How can I get the 'X' to be inside the search box?
HTML:
<input id="myInput" type="text" placeholder="Search Text...">
<button class="clear">X</button>
CSS:
#myInput{
width: 40%;
height: 33px;
border: 1px solid #000;
font-family: 'arial';
font-size: 19px;
}
.clear {
position: relative;
z-index: 1;
margin-left: -29px;
background: transparent;
border: 0px none;
font-size: 19px;
font-weight: bold;
vertical-align: middle;
}

The easiest way to solve this is to wrap the input and button in an element with position: relative + width: min-content. Then you only need to apply position: absolute + right: value to the button
.wrapper {
position: relative;
width: min-content;
}
.clear {
position: absolute;
right: 0px;
}
<div class="wrapper">
<input id="myInput" type="text" placeholder="Search Text...">
<button class="clear">X</button>
</div>

<input type="search" />
Works in Chromium-based browsers at least. It does have some undocumented side effects though, like ESC will clear the input.
If you're intent on using your own custom clear button, adapt this idea by putting both elements into a shared parent element. Have the input take up the entire size of the parent element, and then use position: absolute; on the Clear button.

Animate increase size of div with JQuery/CSS

I have a simple site with two sections. Ideally the section at the top would load at a particular size, but then with the click of a button located at the bottom of this section, the section would increase size to fit screen. If clicked again the section would go back to its original size.
Functionality should be exactly as the one on this site:
http://www.urbandisplacement.org/map/la
I have a couple of questions:
What is the best way to accomplish this effect through JQuery/CSS?
How do I make sure the button stays fixed at the bottom of the growing/shrinking div and moves as the div does?
I've tried resetting the height of the top div when the button is clicked, using JQuery, but this neither animates nor keeps the button at the bottom of the div when it's used.
Thank you!

Here's a simple CSS only version:
https://jsfiddle.net/otenf0fy/
body,#wrapper {
height: 100%;
}
#expand {
display: none;
}
#top {
background: black;
color: white;
padding: 1em;
position: relative;
}
label {
background: blue;
color: white;
border-radius: .5em;
padding: 1em;
display: block;
width: 5em;
text-align: center;
cursor: pointer;
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-2.5em,0);
}
#expand:checked ~ #top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="wrapper">
<input id="expand" type="checkbox">
<div id="top">
<p>
This is just a test
</p>
<label for="expand">Expand</label>
</div>
</div>
</body>

Prevent mouse interaction with transparent element background

I have a base html element and I have an overlay element that contains some buttons.
I want the mouse to be able to interact both with the base element as well as with the buttons in the overlay.
The problem is that the overlay captures the mouse events of the base element.
Is there a way that I can disable the mouse interactions for the transparent background of the overlay (like IE seems to do), while keeping the mouse interactions for the buttons inside the overlay ? Or do I need to change the structure of my code ?
Fiddle

Here's one approach.
With an overlay element:
http://jsfiddle.net/XC95u/11/
Without an overlay element:
http://jsfiddle.net/XC95u/3/

I modified the html structure and use z-index to control the positions of the divs.
HTML:
<div class="main">
<div class="base"></div>
<div class="overlay">
</div>
<div class="button left"></div>
<div class="button right"></div>
</div>
CSS：
.main {
width: 350px;
height: 150px;
position: relative;
}
.base {
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.button {
background-color: #707070;
width: 30px;
height: 30px;
position: absolute;
top: 60px;
z-index: 99;
}
.right {
right: 0;
}​

Google plus trigger button file input

Does any know how Google plus trigger a button to then open a file input field?
Could they be using an iframe for legacy browsers, or is it a HTML 5 thing???
Any help would be greatly appreciated, as I am needing to make firefox 3.6 trigger an input file via a button. I have read around not possible, but some how google plus can do it.

I can only test with current firefox and chrom version. If it works in IE, you need at least IE 9 (I can't test in IE9).
HTML:
<div class="button_wrapper">
<div class="button_visible" role="button">button description</div>
<div class="button_invisible">
<input type="file" class="button_input" tabindex="-1" multiple="" />
</div>
</div>
CSS:
.button_wrapper {
display: inline-block;
position: relative;
}
.button_visible {
display: inline-block;
position: relative;
padding: 6px 6px;
background-color: #EEE;
border: 1px solid #CCC;
color: #666;
font-size: 12px;
font-weight: bold;
}
.button_invisible {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.button_input {
position: absolute;
top: -10px;
left: -445px;
opacity: 0;
font: 40px arial,sans-serif;
cursor: pointer;
}
Because I didn't want to set the width and height in all css classes, I added this JS:
$('.button_invisible').each(function() {
$(this).width($(this).parent().width());
$(this).height($(this).parent().height());
});
Also see my jsfiddle.