I need to open/close a div container that will always appear at the top left corner no matter where I am on a page that has page scrolling. Position fixed would be acceptable in a desktop environment but in a mobile environment I need the user to be able to pull up or move down the div container so they can get to other input fields. If I use position absolute the div container could appear out of view if you are scrolled down at the bottom of the page.
Example problem using fixed... The mobile device popup keyboard will cover the lower input field. If you change position to absolute then you can see the out of view issue. https://jsfiddle.net/r71vb73u/15/
#workarea {
width: 160px;
padding: 5px;
height: 400px;
position: fixed;
background: #cccccc;
}
.input1 {
height: 90%;
}
.input2 {
height: 10%;
}
.blah {
float: left;
}
.buttons {
float: right;
}
.filler {
clear: both;
height: 800px;
}
function workarea(action) {
if (action == 'open') {
document.getElementById('workarea').style.display = '';
} else {
document.getElementById('workarea').style.display = 'none';
}
}
<body>
<div id="workarea">
<div class="input1">
<input type="text" value="hello">
</div>
<div class="input2">
<input type="text" value="world">
</div>
</div>
<div class="blah">blah blah ...</div>
<div class="buttons">
<input type="button" value="Open" onMouseDown="workarea('open');">
<input type="button" value="Close" onMouseDown="workarea('close');">
</div>
<div class="filler"></div>
<div class="blah">blah blah ...</div>
<div class="buttons">
<input type="button" value="Open" onMouseDown="workarea('open');">
<input type="button" value="Close" onMouseDown="workarea('close');">
</div>
</body>
Looks like I can add the following to the javascript action open:
document.getElementById('workarea').style.top = document.body.scrollTop + 10 + 'px';
This places the workarea at current top using position absolute.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments