When working with a web application after having installed it to 'home', it seems like a most recent update to iOS has caused the usual black status bar to go transparent and float above the web content below it.
Also, not pictured, is a horizontal bar at the footer of the app that pushes my fixed footer about 20px up.
I don't expect to always be serving this application via iPad (most clients would opt for the lesser expensive Android option), however it is very common for my associates to be demonstrating the application with their own iPads...
What options do I have here? Will I need to do some 'sniffing' and shift the application down just for this device/version? If so, what is the best way to do this without introducing more libraries? I'm currently using the latest Angular framework + .NET 4.5.1.
Thanks.
Well, since there was obviously a whole lot of interest in this question, I have since found an answer to the problems.
In the root of the application I created the test for modern iOS 8
var userAgent = navigator.userAgent;
$rootScope.isIOS = ( userAgent.match(/(iPad|iPhone|iPod)/g) && userAgent.match(/(OS 8_0_)/g) ? true : false );
In the primary wrapper before the navigation element I conditionally place a block
<div ng-if="isIOS" class="isIOS"> </div>
Then I have the sass class
.isIOS {
position: fixed;
z-index: 10000;
top:0;
width: 100%;
height: 23px;
background: $fooColor;
& + div {
margin-top: 25px;
}
}
and the TOP is taken care of...the status bar has a background that stays fixed and scrolling through any of the pages looks great.
The space I encountered at the bottom was a little different and required the following meta-data in the base layout.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
Anyways...all is good now. If you came here and found this and it helps, awesome. If you never came here it all then it really doesn't matter a whole bunch, now does it?
Related
I'm using Ionic sidemenu template: ionic start myApp sidemenu
It generates a sample project with some useful tools and default configuration.
What I'm trying to accomplish it to make header bar (ion-nav-bar) transparent.
Here is the plunker: https://plnkr.co/edit/qM3YsJ?p=preview
By default it uses (menu.html)
<ion-nav-bar class="bar-stable">
I asked this question a week ago on Ionic forum - https://forum.ionicframework.com/t/how-to-make-nav-bar-transparent/49250 - I even managed to find a workaround but it would be so much easier if I could just just make the header (navigation) bar transparent.
Here is codepen example that works: http://codepen.io/Samurais/pen/dPRMKL
The problem is - the moment I replace with 1.0.0-beta.1 with 1.2.4 it doesn't work anymore.
EDIT:
Many people are suggesting background-color: transparent !important - OBVIOUSLY - but it's not that trivial due to many underlying elements, positioning, translate3D, z-index... I mean that if it was that trivial I'd probably figure it out by now.
Many people are suggesting hiding the nav bar, that's exactly what I did:
I even managed to find a workaround
But it's a workaround as I'm recreating many default, native elements which is not cool.
Finally... It takes 10 seconds to edit the Plunker. It takes 20 seconds to fork it, grab the URL and reply with the actual working URL instead of some untested solution.
Thank you for teaching me how to become better communicator. I thought that statement "I would like to make nav-bar transparent" and the context (links, plunker, alternative solutions, my post on the forum) are making it clear, apparently I need to enhance my communication skills.
Updated plnkr: https://plnkr.co/edit/qM3YsJ?p=preview
ion-content.has-header {
top: 0;
}
.bar {
background-color: transparent;
}
.bar-header {
border-bottom-width: 0px;
}
(it would be cleaner to support transparent class by default)
This is within my css file for the navbar for a HTML website I have this code.
.navbar-inverse{
background-color:#202148;
border-color: #202148;
}
If you want to make the background colour transparent use:
background-color: transparent;
Edit
I found this tutorial that talks about ion-nav-bar.
http://pointdeveloper.com/ionic-change-side-menu-color/
Check it out.
Hope this helps :)
Although I want to use the default blue crystal theme but just want to hide the blue branding bar because I am using native navigation header and network indicator bar in mobile app.
The network indicator bar overlaps with this blue 4px high bar. Any help please?
/* Remove branding bar by changing its height to zero and page header top width to zero */
.sapMShellBrandingBar {
height: 0px;
}
.sapMPageHeader::before {
border-top-width: 0rem;
}
The bar is set with CSS, you can override it with
.sapMPageHeader::before {
border: none;
}
It's probably too late but still: here is a solution without using custom CSS →
in XML:
<Shell class="sapMBrandingBar-CTX">
or in JS:
new Shell({/*...*/}).addStyleClass("sapMBrandingBar-CTX");
or in index.html:
<body id="content" class="sapUiBody sapMBrandingBar-CTX">
Advantages
Simple: apply sapMBrandingBar-CTX to either Shell directly or to one of its parent elements. No custom CSS needed.
Compatibility: the availability of sapMBrandingBar-CTX is covered by the framework's Unit test so that there is no regression after migrating to future UI5 releases.
Classes with the suffix -CTX (context) are markers and can be used appropriately anywhere in your app. sapMBrandingBar-CTX is available as of v1.28 (commit:1a19dbc).
This "sapMBrandingBar-CTX" CSS class can be set by any container control that comes with its own branding bar, so any shell inside will not display its branding bar
Can anyone tell me how to tell Github, that I want to see code reviews on Pull Requests in full screen width. Code lines are often longer than the area provided by Github and there is a lot of unused screen real estate.
Is there a setting in Github or a Chrome extension or Tamper Monkey or something like that.
Use Stylebot chrome extension
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en
I use my own style for my favourite websites, I love it.
Plus point is that you can use the styles created by other peoples also. Someone might have already done the things you need there. Or else you can modify on your own.
I have few CSS rules for you,
.repository-with-sidebar .repository-content {
width: calc(100% - 50px);
}
.container {
width: 90%;
}
Github's CSS has changed, so the new styles should be:
.container-lg {
max-width: inherit;
}
You can create a shortcut in your browser to automatically apply this style:
javascript:(function(){var a=document.getElementsByClassName("container-lg")[0];a.style.max-width="inherit";})();
There's a class on the body called full-width for that, so all that's needed currently is:
document.body.classList.add('full-width');
This can also be added as a bookmarklet:
javascript:(function(){document.body.classList.add('full-width');})();
Don't know why the OP said it's not a problem anymore, if you're doing a code review of your own work you won't be comparing it against another in side-by-side view.
Fix for full screen:
Inspect element on the white space to the left of the code
You'll be brought to a tag, expand this
Click on the 3rd div child of 'main'
Scroll down through the css on the right hand side until you find ".container-xl"
Untick this and you'll get the code full screen
If you want to you can write a console script or use one of the plugins mentions above but I find this method the simplest to remember and apply on anyones machine.
This is no longer an issue after GitHub introduced side-by-side code review. That really works well.
It appears to me that if the map container is placed anywhere but the top left corner of the page, pinch zoom is no longer centered properly. I have encountered this problem on iPad 2 (Safari 5.1), iPhone 5 (Safari 7.0), Sony Xperia tablet Z (Chrome 34.0).
If i have missed something obvious as comes to forcing this thing into expected behavior, I would be delighted to have this pointed out to me. Otherwise I'm inclined to call this a Here bug.
This simple fiddle replicates the issue when used with a touch screen device
http://jsfiddle.net/Thernys/E97rn/
And since apparently code is required with a fiddle link, I replicate the relevant parts of the super simple example.
HTML
<body>
<!-- add a number of <br/> if you like -->
<div id='mapContainer'></div>
</body>
CSS
#mapContainer {
width: 200px;
height: 200px;
float: right;
}
JS
var nMap = new nokia.maps.map.Display(
document.getElementById('mapContainer'), {
zoomLevel: 10,
center: [52.51, 13.4],
components: [
new nokia.maps.map.component.panning.Drag(),
new nokia.maps.map.component.zoom.Gesture()
],
}
);
I've faced this exactly same issue. After some research I realized that it's occurring because the map container wasn't placed in the cartesian origin of the document (top: 0, left:0). I don't know if this is a bug of the API or if there's any configuration that fixes it.
The workaround I found out was to create the map inside an iframe element and make sure it occupies the entire width.
I have an issue where the screen goes white for a millisecond on a redirect when rendering the new page.
This causes the screen to flicker and annoys me so.
I have had a little scoot round the web and have found this IE solution which works on IE however it does not on chrome or FireFox.
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />
Plus I'm sure using this method will have some knock on effects on update panels and Ajax controls.
Is there a way of setting the server to render the full page before giving it the client so not to have this white millisecond that works for all browsers.
Any ideas will be welcomed.
Is there a way of setting the server to render the full page before giving it the client
short answer: no. that's how a web browser works.
even with the fastest possible servers (using statically cached pages as you describe them), you're only decreasing the average "white" time, not eliminating it all together. as you're seeing with IE, that default page transition is part of the browser code, not something the server-side gets control over. if you write your own browser, you can write it to wash black, wash white, or hold the transition until the entire page is loaded, like IE does.
as other people mention, getting your page size down will decrease the "white" time. this time is not only the time the server takes to generate the page, but also all the network travel time for the page, images, javascripts, css, etc. that's why you can never fully get rid of it - only hide it using browser tricks.
and i'm not talking about "client-side" anything. that won't work. the "client-side" code isn't even downloaded, much less running, when the browser decides to white-wash the canvas. it's kind of a standard part of "the internet" that everyone just gets used to; it wasn't designed to be a slide show viewer or a graphically perfect renderer. unfortunately, if you care about transitions that much, HTML is probably not the right medium for your work.
The MSDN examples recommends to set
Response.BufferOutput
before calling
Response.Redirect("http://www.mydomain.com/default.aspx");
You may also want to try to use
Server.Transfer("default.aspx", true);
What you're seeing is a normal occurrence. Here is what happens during a redirect:
The server sends a response to the browser (redirects are done on the client side).
The browser loads the response, sees that there is a redirect and stops the page load
The browser loads the new page
The meta tags you are using are IE only, and will not effect any other browser. The only things that will remove the flicker all together will be one of the following:
You said that the redirect occurs when the user clicks on a button or on a grid row or something. If this were to trigger a change to location.href instead of a post-back, then the user would not see the browser flicker.
Use Server.Transfer (this will result in the browser's address bar showing the old page instead of the new page (a redirect will change the address bar). This will only work if you are redirecting the user to a page on the same server.
Send an HTTP 301 response (Moved Permanently). Tis will remove the flicker, but use this method with caution. It has other effects (it may effect search engine rankings).
To do #3, use this code on the server.
Response.StatusCode = 301;
Response.StatusDescription = "Moved Permanently";
Response.AddHeader("Location", "NewLocation.aspx");
By default the server will buffer the complete response before sending it. The "white" will be a result of the content of the HTML possibly its size. Use a tool such as firebug or IE Developer Tools (my preference is Fiddler) to examine the generated content. At a guess you have some very large ViewState.
Sorry, am late at party! I have been grappling with this on my apps for long. The solution I have devised works for me. Very much like what #Pike65 suggested...
Create a holder for an overlay:
<div id="overlayContent" class="overlay">
<div id="loaderContent" class="loader">
Loading...
</div>
</div>
CSS for this holder:
.overlay {
position: fixed;
border: 0; margin: 0; padding: 0;
height: 100%; width: 100%;
top: 0; left: 0;
background-color: #272727;
text-align: center; vertical-align: middle;
z-index: 900; display: none;
-moz-opacity: 0.1; opacity: 0.1;
filter: alpha(opacity=10);
}
.overlay .loader {
position: relative;
width:40%;
margin: 20% auto;
padding: 10px;
background-color:black;
border: solid 1px gray;
color: #cccccc;
font-weight: bold;
}
Javascript (jQuery):
$('a, input[type=button]').live("click", function (e) {
$("#overlay").show().css({ opacity: 0.1 }).fadeTo(UxSpeed, 0.8);
});
That's it. You may modify the 'js' to your liking. It will cause a translucent overlay to appear whenever any link or button is cliked. By browser's nature, it will wait until it gets a response for the new page (headers). So it won't vanish the current page until at least something is returned for the new page. Once new page starts appearing, it will automatically remove the overlay!
Probably best to do it on the client side. For example, you could have a div that covers the entire page and fades out once the DOM has been fully put together. In jQuery, something like this:
$(document).ready(function() { $('#overlay').fadeOut(); });
From a UX perspective though it might be a little disconcerting. I actually prefer a little bit of flicker so I know things are happening.