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>

Dropdown stops working after being placed in front using z-index

I've added an Opentable javascript reservation widget to my home page. The module has 3 dropdowns, a calendar, date selector and a time selector. The 2nd 2 dropdowns aren't responsive, even when I use z-index to move them forward to make visible.
I'm thinking I'm doing something wrong with css but can't seem to solve. Or maybe there is a conflict with js? Not sure. Any suggestions? Thanks -- The site is here on a dev server, http://aac.myftpupload.com/
screenshot of dropdown issue
I'm actually not even sure what code to put up here to share... the script it provided by opentable below, and it comes with a ton of css, which maybe conflicts with my site but I'm not sure:
</div><div class="wpb_column vc_column_container vc_col-sm-9"><div class="vc_column-inner wpex-clr"><div class="wpb_wrapper wpex-vc-column-wrapper wpex-clr " style="min-height:40px;">
<div class="wpb_raw_code wpb_raw_js">
<div class="wpb_wrapper">
<script src="https://secure.opentable.com/frontdoor/default.aspx?rid=82057&restref=6543&bgcolor=F6F6F3&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=https://secure.opentable.com/frontdoor/img/ot_btn_red.png&otlink=FFFFFF&icon=dark&mode=wide&hover=1" type="text/javascript"></script>
</div>
Some of the the css for the dropwown is:
element.style {
display: block;
}
#OT_timeList, #OT_partyList {
width: 108px;
max-height: 200px;
overflow: auto;
border-left: 2px solid #b8b4ac;
border-right: 2px solid #b8b4ac;
border-bottom: 2px solid #b8b4ac;
position: absolute;
top: 34px;
left: 39px;
display: none;
}
.entry ul, .entry ol {
margin: 0 0 10px 10px;
}
.entry ul {
list-style: disc;
}
.entry ul, .entry ol {
margin: 0 0 20px 30px;
}
.OT_navList {
list-style: none;
padding: 0;
margin: 0;
float: left;
width: 142px;
position: absolute;
background-color: #fff;
z-index: 200;
top: 35px;
left: 0;
}

In the div "rev_slider_6_1_wrapper" I set position: relative; z-index: -1;. This allowed the drop downs to be visible in front of the image and text.
So the div will look like this:
<div id="rev_slider_6_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin: 0px auto; padding: 0px; max-width: 1000px; height: 400px; overflow: visible; position: relative; z-index: -1;">
I'm not sure if this will negatively affect any of your onload effects, but if nothing else it should get you started in the right direction.

There was some strange code that I guess my template was inserting which caused the dropdowns to fall behind the slider and not function, once I removed this, it worked.
css_animation="appear"

Reset div to its original position after click

I have this application that shows small windows after clicking a button
JsFiddle
$('.modules').draggable();
$('.glyphicon').click(function() {
$(this).next('.modules').slideToggle();
});
.glyphicon {
font-size: 2em;
color: #A70000;
position:absolute;
z-index: 10;
display: block;
}
.glyphicon:hover {
cursor: pointer;
color: #000;
}
.modules{
position: absolute;
width: 30%;
box-shadow: 5px 5px 15px #000;
z-index: 5;
display: none;
overflow: hidden;
}
.modules_box {
color: white;
background-color: rgba(159,159,159,0.8)
}
.module img{
padding: 5px;
}
#module1 {
left: 10%;
top: 7%;
}
#button_module1 {
left: 10%;
top: 7%;
}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="button_module1" class="glyphicon glyphicon-info-sign"></span>
<div class="modules" id="module1" draggable="true">
<img src="http://www.touronline.ag/Portals/0/Products/alle_module.jpg" alt=""/>
<div class="modules_box">
<h5>DANE:</h5>
<ul>
<li>Parametr 1: 500</li>
<li>Parametr 2: 700</li>
<li>Parametr 3: 1500 cm</li>
</ul>
</div>
</div>
Windows are draggable so a user can move them around. What I want to achieve is to reset the window position after it's hidden so it always shows at its origin. I would like the universal solution that doesn't require writing separate code for every window. There will be many windows placed at different spots using absolute position. Any suggestions how this could be achieved?

Resetting the 'style' attribute on toggle will ensure the module always reverts to it's original position in the stylesheet.
if(!$this.is(":visible")){
$this.attr('style','');
}
http://jsfiddle.net/vrww6fcm/3/

Jquery & CSS - Overlapping divs

I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});

Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}

I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.

How do I align form inputs nicely on top of a picture?

I have a main div. Inside the div, I have an image. I want to place a text field and a button at a specific position on top of the image. Both of them should be transparent so that the users feels that they are writing on top of the image.
My question is how is this best solvable? Is it to make a div that contains those two and place the div in correct position using CSS? Or is there some kind of javascript I could use?
Also, when I hover over the button, I want it to replace the image with a new image.
I made a Fiddle on how it looks like. Here is the code from that fiddle.
HTML:
<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
<div id="apDiv2">
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input name="textfield" type="text" class="formcodeaktiv" id="textfield" style="width: 153px; color: black; background-color: transparent;" />
<input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
</form>
</div>
</div>
CSS:
#apDiv1 {
position:absolute;
left:79px;
top:22px;
width:354px;
height:655px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:147px;
top:472px;
width:216px;
height:26px;
z-index:2;
}
.aktiverabut {
color: #FFF;
background: transparent;
position: absolute;
left: 165px;
}
.formcodeaktiv {
left: 5px;
position: absolute;
}

This is my solution, but please, read #Chandranshu advices:
HTML
<form>
<div class="iphone">
<div>
<input type="text"/>
<button></button>
</div>
</div>
</form>
CSS
html {
font-family: Arial, Helvetica, sans-serif;
}
div.iphone {
position: relative;
width: 317px;
height: 595px;
background: transparent url(http://s24.postimg.org/4vpzx68yt/test1.png) no-repeat 0 0;
}
div.iphone div {
position: absolute;
bottom: 122px;
left: 71px;
}
div.iphone div > * {
display: block;
float: left;
padding: 0;
margin: 0;
border: none;
background: transparent;
appearance: none;
border-radius: 10px;
outline: 0;
}
div.iphone input {
line-height: 10px;
width: 148px;
height: 10px;
padding: 5px;
background: #fff;
}
div.iphone button {
margin-left: 5px;
width: 50px;
height: 20px;
cursor: pointer;
}
http://jsfiddle.net/coma/jXCS3/
I've just updated my jsfiddle to show you the benefits of using position relative on the container and absolute on its children (try resizing the textarea):
http://jsfiddle.net/coma/jXCS3/4/

I have updated your jsfiddle to 'almost' solve your problem. Here is the updated code:
HTML:
<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
<div id="apDiv2">
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input name="textfield" type="text" class="formcodeaktiv" id="textfield" placeholder="Skriv in aktiveringskoden"/>
<input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
</form>
</div>
</div>
CSS:
#apDiv1 {
position:absolute;
left:79px;
top:22px;
width:354px;
height:655px;
z-index:1;
}
#apDiv2 {
position:absolute;
top:451px;
width:216px;
height:26px;
z-index:2;
}
.aktiverabut {
color: #FFF;
background: transparent;
border: 0;
outline: none;
position: absolute;
left: 233px;
}
.formcodeaktiv, .formcodeaktiv:focus, .formcodeaktiv:active {
left: 72px;
position: absolute;
padding-left: 5px;
border: 0;
outline: none;
width: 153px;
color: black;
background-color: transparent;
}
Significant changes:
Your absolute positions were not right. Just correcting the positions positioned the inputs on top of the image.
Then you need to add border: 0 and outline: none to get rid of their borders.
Make sure that you also include the :focus and :active pseudoclasses because otherwise the borders will show up when the user starts typing.
Move the styles from your HTML to the CSS file. It's annoying to have inline styles.
Add a placeholder attribute to the text field. That way when the user starts typing, the placeholder text will disappear. If you keep the text in the image, user typed text will appear on top of the grey hint text.
Since you've also asked about the best way to solve this, let me answer that as well. If you can edit the image, just white out the area where the text field and the button are supposed to be and then use a pure CSS solution to render the them as you want. You can get the rounded corners using border-radius and use an image sprite for different states of the button.