Hiding the toolbars in iOS 7 using overlay hack - javascript

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.

Related

Hammerjs swipe locks the window.innerHeight on Chrome Android

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>

Scrollable Div appearing smaller in IE and Firefox

I have a scrollable div in td. It appears fine in Chrome however becomes really small in IE and Firefox but the height of the row stays the same. I have tried to change overflow:auto to overflow:hidden as suggested by some of the previous answers but nothing seem to work.
Additionally added <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to support browswer compatibility but still didn't work.
Height of the table row:
#inrm .quotelog {
height: 200px;
}
scrollable div
#inrm .scrollable {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
}
Inserting the div in HTML as
<tr class="quotelog">
<td>
<div class="scrollable"><%=rsOrderView("orderlog")%></div>
</td>
</tr>
Any suggestion or pointers would be appreciated.

Making a smooth, dynamic website

I am seeking to create a website with a very smooth layout, like it is all dynamic and not just BLAM, heres a website.
Let me elaborate:
I got this setup for now, just so you can figure what I am trying to get working.
What I mean by dynamic is, that I want when the page have been loaded I would the image to come sliding in (maybe the banner too, haven't decided all design yet, just throwing suggestions.). When image have slided in I would like it to be expanding and despanding slowly, like it's always in movement. When hovered over it should expand slightly more and stop it's movements while it is hovered.
This are the main needs I am searching for, and I am a little clueless on how it is done.
I was thinking javascript was obvious, but I've failed any guides I've found and therefore belive I need some direct help.
Highly appreciated, thanks!
I've tried making the image fade in and out with jquery, but doesn't seem to work, heres my code:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: url("images/BG.png") repeat;
}
.logo {
width: 640px;
height: 360px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 40%;
margin: auto;
text-align: center;
}
.middlebanner {
width: 100%;
height: 60%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 100%;
margin: auto;
text-align: center;
}
</style>
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<title>Electronic Future Copenhagen - Choose your game</title>
<img src="images/middlebanner.png" class="middlebanner" />
<img src="images/logo5.png" class="logo" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
jQuery
<script src="jquery.js"></script>"
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
$( document ).ready(function() {
$("#logo").animate({
left: "300"
}, {
duration: 2000
});
$( "#logo" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
});
</script>
</body>
</html>
here is a little fiddle to get you on your way...
Just animate divs and images etc to get the desired effect.
$(document).ready(function () {
$("#efclogo").animate({
left: "300"
}, {
duration: 2000
});
});
Added a hover over function so you can see how that works too.
$( "#efclogo" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
Updated fiddle
Here's a part of code that might help you:
//Above is pure JS(no jQuery) which does the loading part, aka pre-loader
$(document).ready(function() {
//Here is when loading is 100% completed, will trigger the function
$(window).load(function() {
loadComplete();
});
});
This is where you should get started when you decide to use jQuery library.
Slide down
https://api.jquery.com/slideDown/
Animate
https://api.jquery.com/animate/
Hover
http://api.jquery.com/hover/
Your idea might be a little confusing to site visitors. Think about a page you are looking at where everything is flowing around so you cant find anything.
The key is to have a "normal" page and let some eyecatching elements fly around.
The technical aspect depends on what you want to archieve. First you need to think about the browser performance (on mobile especially).
One way to archieve this would be jQuery animate, anotherone would be css3 animate/transition. The easiest example of jQuery animate is in the api: https://api.jquery.com/animate/. Apparently I dont have a css tutorial in mind.

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

Why doesn't 100% width/height work on iPhone?

If you have the chance to enter to http://toniweb.us/gm in your phone you will see that the dimensions are...wrong.
Acording to the css:
html, body{
position:relative;
height:100%;
width:100%;
overflow-y:hidden;
}
It should be using the whole of it.
And, I added:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=2.0" />
But I am not so sure what this affects.
In addition, the website is optimized to >= 1024 pixels. Is there a way to adapt iPhone to this? Perhaps by scaling somehow?
Any hint would be very helpful.
Tried:
html, body{
position:absolute;
top: 0;
left: 0;
right: 0;
overflow-y: hidden;
}
I guess that above code will do the job ;)
And I think your goal was to see only the grey sidebar on the iphone right?

Categories