I am new to html and css. I have seen this question asked many times but I can't seems to get it working to fit my problem .
I have 3 div tags. when the user swipe the top div tag I want the the bottom div tag to increase its height and cause the web page to scroll. then move all the div tags align at the top.
The reason I am doing this is; this will cause webpage running on a mobile to go to full screen.
<div id="backExpander" style="height: 100%; display: inline-block; position: relative;">
</div>
<div id="canvasHolder" style="width: 100%; height: 100%;background-color: transparent;">
<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
</div>
<div id="swipeUpHolder" style="height: 100%; width: 100%; display:block;" >
</div>
The script I am using is;
document.getElementById("swipeUpHolder").addEventListener('touchmove', onTouchMove, {passive: false});
function onTouchMove(e)
{
e.preventDefault
document.getElementById("backExpander").style.height = "120%";
setTimeout((function() {
document.getElementById("swipeUpHolder").style.display = "none";
window.scrollTo(0, 0);
}
), 50);
}
As you can see I am increasing the height of background div but it does not do anything.
if I increase height of top div, this will work
document.getElementById("swipeUpHolder").style.height = "120%";
But I want to hide the top div. use the bottom div to push the page to go into scroll.
Can anyone provide some advice on how to fix this ?
This is your original code w/ background colors:
document.getElementById("swipeUpHolder").addEventListener('touchmove', onTouchMove, {
passive: false
});
function onTouchMove(e) {
e.preventDefault
document.getElementById("backExpander").style.height = "120%";
setTimeout((function() {
document.getElementById("swipeUpHolder").style.display = "none";
window.scrollTo(0, 0);
}), 50);
}<div id="backExpander" style="height: 100%; display: inline-block; position: relative; background: blue;">
</div>
<div id="canvasHolder" style="width: 100%; height: 100%;background-color: red;">
<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
</div>
<div id="swipeUpHolder" style="height: 100%; width: 100%; display:block;">
</div>This is when you use vh units for your dimension on #backExpander:
document.getElementById("swipeUpHolder").addEventListener('touchmove', onTouchMove, {
passive: false
});
function onTouchMove(e) {
e.preventDefault
document.getElementById("backExpander").style.height = "120%";
setTimeout((function() {
document.getElementById("swipeUpHolder").style.display = "none";
window.scrollTo(0, 0);
}), 50);
}<div id="backExpander" style="height: 100vh; position: relative; background: blue;">
</div>
<div id="canvasHolder" style="width: 100%; height: 100%; background-color: red;">
<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
</div>
<div id="swipeUpHolder" style="height: 100%; width: 100%; display:block;">
</div>