How can I display a custom alert at the top of the screen in a mobile browser?
I am using alertify.js on a webpage to trigger user error warnings like "invalid password" etc. But when using a mobile browser, I want to show a warning at the top of the screen NOT at the top of the page. Even above the open keyboard, everything is fine. In CSS, does anyone know what to do?
This is what I am using now. But that makes it 10px from the top of the page. The user cannot see this if they scroll down. And leaving them at the bottom, if they open the keyboard, they are hidden behind that.
.alertify-logs {
top: 10px;
right: 10px;
}
Edited: The keyboard actually moves the top of the page up, so the address bar hides the warning. Adding fixed positioning to the CSS seems to do the job, the open keyboard pushes it higher.
My decision:
var isMobile = false;
//test for mobile device/browser
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
isMobile = true;
}
When displaying some error message:
if(isMobile){
//get top of viewable screen y-coordinate
var scrollY = window.pageYOffset;
//output error
alertify.error("Password is incorrect.");
//adjust error placement
$(".alertify-logs").css("top", scrollY+"px");
}
This error message motion works because it stays on the screen for a few seconds before navigating off the page.
source to share
First of all, you need to find if the browser is mobile or you can now accomplish with a css media query or thin javascript. Javascript is better. Set up a window to listen for the window resize event and use javascript innerWidth or innerHeight. I'm not sure how the rest of your page is laid out, but let's try a bar.<div id="bar">put content here</div>
Css:
#bar
{
Position:fixed;
Left:0;
Right:0;
Top:0;
Height:2em;
}
Tell me if it doesn't work and I'll do some more work on it. Hope this helps.
source to share