How can I display a custom alert at the top of the screen on a mobile browser?

Question

I am using alertify.js on a webpage to give user error warnings such as "invalid password" etc. But when using a mobile browser I want to show the alert at the top of their screen NOT the top of the page. Even just above an open keyboard is fine. In the CSS does anyone know what to do?

This is what I am using now. But this puts it 10px from the top of the page. The user cannot see it if they have scrolled down. And leaving them at the bottom, if they have the keyboard open, it is hidden behind that.

.alertify-logs {
    top: 10px;
    right: 10px;
}

Edited: The keyboard is actually moving the top of the page higher, so the address bar is hiding the alert. Adding fixed positioning in the CSS seems to be doing its job the the open keyboard is pushing it higher.

My Solution:

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 outputting 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 movement of the error message works because it stays on the screen for a few seconds before transitioning out of the page.

Answer 1

Fixed positioning in CSS?

position:fixed;

W3 Schools Article

Answer 2

First thing would be to find if the browser is mobile or now which you can accomplish with a css media query or slender javascript. Javascript is better. Setup a window resize event listener and use javascript innerWidth or innerHeight. I'm not sure how the rest of your page is laid out but give this a try for the bar thingy. <div id="bar">put content here</div>

Css:

#bar
{
Position:fixed;
Left:0;
Right:0;
Top:0;
Height:2em;
}

Tell me if this doesn't work and I will do some more work on it. Hope this helps.