Hammerjs swipe locks the window.innerHeight on Chrome Android - javascript

I've run into an issue with hammerjs on Chrome Android 66.
I have a side bar menu that's position:fixed, with top:0 and bottom:0. When the menu item opens, the layout is correct for when URL Bar at the top is visible and hidden. On Chrome device inspect, if I run "window.innerHeight" in the console, it will give me a height for when the URL Bar is visible and and a different height for when it's hidden. This is right because with the URL Bar hidden, the inner height should be more.
After I do a swipe, whichever state I'm in, "window.innerHeight" is locked to that height, with or without the URL Bar. This is breaking my layout because top:0 and bottom:0 is stuck to the state that where I've done my first swipe.
Has anyone come across this? Any possible solutions to make window.innerHeight (and window.outerHeight) adapt to what ever it should be again? This works fine on every other browser, only Chrome Android.
Here's a little piece of code I put together for testing. Thanks for any advice.
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<style>
#myElement {
background: silver;
height: 300px;
text-align: center;
font-size:30px;
}
.ex-height{
height: 400px;
border:solid 1px red;
}
</style>
</head>
<body>
<div class="ex-height">extra height for scrolling</div>
<div id="myElement"></div>
<div class="ex-height">extra height for scrolling</div>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<script>
var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);
mc.on("panleft panright tap press", function(ev) {
myElement.textContent = ev.type +" gesture detected.";
});</script>
</body>
</html>

Related

Different height issue with same font-size & line height in each browser - Safari, Chrome, FF? How to have all of them pixel perfect & same height?

Different height issue with same font-size & line height in each browser - Safari, Chrome, FF? How to have all of them pixel perfect & same height?
I have this simple code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span {
font-family: sans-serif;
line-height: 1;
font-size: 11pt;
margin: 0;
padding: 0;
width: fit-content;
height: fit-content;
display: block;
}
</style>
</head>
<body>
<span onclick="document.getElementById('output').innerHTML = getComputedStyle(this).height">CLICK ME!</span>
<span id="output"></span>
</body>
</html>
This gives me different heights in each browser:
Chrome: 14px
Safari: 15px
Firefox: 14.6667px
I have tried switching from span to div but the issue persists. I already have line-height:1 and padding, margin set to 0 too.
This height difference might not seem like much in this simple example but my actual use case has much larger height differences as I have lots of spans and divs and I need all of them to fit in a fixed sized container. I am designing a resume builder in browser and require all the content to fit in a fixed size container. This difference in heights causes things to overflow in Safari and a bit in Firefox. In each case, Chrome seems to squeeze things the most.
I can't use fixed height because my actual content will have multi-lined content.
You can test this JSFiddle:
https://jsfiddle.net/5s40jhyf/3/

Trying to create a 100% height div in a Wordpress site with Divi theme

I have a Wordpress site, that shows maps of fictional worlds. The maps are leaflet.js maps, that are displayed within a div called map. This div is not created with the divi frontend, but in a html file that gets included through a plugin shortcode. Basically the php plugin loads a bunch of map specific settings to provide to the leaflet map and shows some html.
Now I want this map div to be as high as possible without causing a scrollbar.
I've tried different things:
height: 100% - does not show anything at all, apperantly an issue with the parent elements
height: 100vh - way bigger than the screen and triggers a scrollbar
height: 74vh - fits on my 2.5k screen but not on others
setting height according to window.innerHeight is too large
setting height according to window.innerHeight and substracting the pixel count of the header and footer is too large too
Whatever I try, I either get a scrollbar or a white stripe below my blue footer. You can see it live here: https://fictionalmaps.com/audience-map/?creator=1&map=KisandraShowCase
My latest - not working - iteration of the code I include with php looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8" />
<!-- meta name="viewport" content="width=device-width, initial-scale=1.0" -->
<!-- some css files are loaded here needed for the leaflet map itself - none should interfere with the map div -->
<style>
html, body {
padding: 0;
margin: 0;
}
#map {
width: 100%;
max-width: 1024px;
height: 70vh;
max-height: 1024px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var tempHeight = window.innerHeight;
jQuery('#map').height(tempHeight);
</script>
<!-- some js files are loaded here needed for the leaflet map itself -->
</body>
</html>
This produces a scrollbar. If I try e.g. var tempHeight = window.innerHeight - 340; I can get it to fit nearly, but get a white stripe below the footer. Also it's not consistent across computers.
My CSS game is weak, I need some help! I'm stuck in an unsuccessful trial-and-error loop and running out of ideas what else to try.
Use position absolute and give it a top: 0; and bottom: 0; that way iot will use the entire screen height.
#fullscreen {
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="fullscreen"></div>
</body>

Touch is not working in PhoneGap app with 2 canvases

I am developing a space shooter in HTML5. I have two canvases as below. The one with id 'bg' is for the scrolling background(which is a randomly generated star field) and the other one 'fld' is used to draw the game objects.
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1,maximum-scale=1,user-scalable=0">
<link href="css/styles.css" rel="stylesheet">
<script src="js/f-shoot.js"></script>
</head>
<body onload='test()'>
<canvas id="fld"></canvas>
<canvas id="bg"></canvas>
</body>
</html>
My issue is that the touch events I have binded to 'fld' does not work in the Phone Gap app. But it works perfectly in my android mobile's Chrome browser. I removed the bg canvas and tried another build and it worked perfectly. But I want multiple canvases in my game.
These are the styles (styles.css file) that I use to align the canvases one on top of another
*{
margin:0;
padding:0;
}
html,body
{
width:100%;
height:100%;
}
canvas {
position:absolute;
left:0;
top:0;
display:block;
}
#bg {
background-color:rgb(0,0,20);
z-index:1;
}
#fld{
z-index:10;
}
I am attaching my events as below
var space = document.getElementById('fld');
space.ontouchstart = function(event) {
....
};
space.ontouchend = function(event) {
....
};
space.ontouchmove = function(event) {
....
};
I have no issues with the binding of events when I am using a single canvas. But when I include the background canvas and run the Phone Gap app, it does not respond to touch events.
What am I doing wrong here?
It worked after I added the following eventListener to document.body.
document.body.addEventListener('touchstart',function(event) {
event.preventDefault();
});

Hiding the toolbars in iOS 7 using overlay hack

I've been reading around Stack Overflow and searching on Google for a reliable way to hide the toolbars on iOS 7 as the old scroll trick no longer works.
Based on this: http://mihhaillapushkin.wordpress.com/2014/01/20/stop-navigation-bars-from-appearing-in-iphone-ios7-safari/
I've tried the following:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style type="text/css">
*
{
padding: 0;
border: 0;
outline: 0;
margin: 0;
}
html,
body
{
width: 100%;
height: 100%;
overflow: hidden;
}
div.content
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 320px;
height: 480px;
background: orange;
}
#scroller {
height: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
}
</style>
</head>
<body class="default">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
setInterval(function(){
if((window.orientation == 90 || window.orientation == -90) && window.innerHeight != window.outerHeight) {
$('#scroller').show();
} else {
$('#scroller').hide();
}
}, 1000);
</script>
<div class="content">
<div id="scroller" style="z-index: 100000;position: fixed;top:0;left:0;right:0;bottom:0;">
Scroll up!
</div>
</div>
</body>
</html>
But scrolling up never actually hides the scrollbars. The #scroller is hiding and showing if the toolbars are visible or not, so half of it works, but just not the hiding unless I bounce the content into the toolbar, but if I scroll then the toolbars appear again.
Have I misunderstood the implementation?
If you want to hide the Safari Address bar you need to add this meta tags
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
The status bar can be hidden in iOS 7.1 and above with this meta tag
<meta name="viewport" content="minimal-ui”>
Okay, here is an answer from the author.
I have not dived into your code block, but just to clarify what I've told about in that post.
Firstly, I have shown an example of a game that has adopted an overlay that forces the player to scroll up until the bars go away. After the game detects that bars are no longer visible it locks scrolling until the player triggers navigation bars again, forcing him to go through the loop again.
Secondly, I have revealed a trick that for some reason deactivates navigation bar triggering ONLY for the top part of the screen. The bottom still triggers them as usual, so the the overlay I mentioned earlier is still needed. Thus this is a half-solution for the problem, but it is still better than nothing.
IMHO, the combination of those 2 approaches yields a good-enough solution for games and other applications that need full-screen without the need for scrolling.

Slide content / page transition

I'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck

Categories