Windows Phone 7.5, Android 2.3 vertical position about alertify.js HOT 10 OPEN

I'm assuming (don't have the device to test) that it's a position: fixed support issue. I'll keep this on the radar and look for a valid fallback!

from alertify.js.

It is :)

I've written a quick & dirty js based fix.

If you want to check it and improve it, please let me know.

On Mon, Dec 10, 2012 at 9:29 PM, Fabien Doiron [email protected]:

I'm assuming (don't have the device to test) that it's a position: fixedsupport issue. I'll keep this on the radar and look for a valid fallback!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/42#issuecomment-11215994.

from alertify.js.

Sure - that would be great. Feel free to open a PR and we can start a discussion in there.

from alertify.js.

@javizarza any update on the fix?

from alertify.js.

Hey!

I've been away from the real world this days.

Let me check how can I contribute with that.

On Fri, Dec 21, 2012 at 5:10 PM, Fabien Doiron [email protected]:

@javizarza https://github.com/javizarza any update on the fix?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/42#issuecomment-11618228.

from alertify.js.

I don't know how to open a PR so I let you know what I did.

Line 23, I added:

/* */
var browser = navigator.userAgent.toLowerCase();
var needfix = new Array("windows phone os 7","android 2.1","android 2.2","android 2.3","iphone os 3","iphone os 4");
Array.prototype.hasIn = function(obj) {
var i = this.length;
while (i--) {
if (obj.search(this[i])>-1) { return true; }
}
return false;
}

/* */

Just the "detection"

And then in line 163 into the timeout to focus the dialog, just after the "else btnOK.focus();"

/* */
if (needfix.hasIn(browser)) {
var top = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
top = top + 50;
bottom = 60 - top;
var x = document.styleSheets[0];
if (browser.search("windows phone os 7")>-1) {
x.addRule('.alertify', 'position:absolute; top:'+top+'px;',x.cssRules.length);
x.addRule('.alertify-logs', 'position:absolute; bottom:'+bottom+'px;',x.cssRules.length);
} else {
x.insertRule('.alertify {position:absolute; top:'+top+'px;}',x.cssRules.length);
x.insertRule('.alertify-logs {position:absolute; bottom:'+bottom+'px;}',x.cssRules.length);
}

/* */

I rewrite the css before it's applied calculating the right vertical position. The case of WP7 is because it doesn't support addRule and you have to use insertRule.

I hope it can help.

Regards :)

from alertify.js.

You're in the right direction - the two main issues I have with this approach are:

1. Agent detection instead of feature detection (I'd rather test against position fixed versus trying to determine all agent that don't support it)
2. It's adding quite a bit of bloat calculating the position and adding inline styles

I'm leaning towards checking what the modernizr test for position fixed is and see if that's a small enough test to add to the library. Then if the current device doesn't support position fixed, fallback to the default browser dialogs.

my 2 cents

from alertify.js.

Hi fabien-d, indeed amazing plugin :)

I've been using alertify a lot lately, and enjoying it, today I tested it on my example phonegap project, using Android 2.3 because that's where all the bugs are and I can't even see any result. There are no errors etc.

There are almost no bug reports related to alertify on internet, and couldn't come up with anything adding android to the mix, only this thread. There are no exceptions, I've tried dialogs and log,success's, none of them show anything.
Any suggestions for a solution?

from alertify.js.

Sorry about the last comment, turns out it was just a case of missing css files, it works great tho, the last stable version.

from alertify.js.

I am using Alertify, and it works great on the desktop, but on my Android, the Alert Shows at the top of the page, even if the top of the page is not visible.

I tried the fix above, but it is not working for me. Perhaps I don't have the code in the right place. For the second code, I put it in the after:

   else if (!hasCancel || self.buttonReverse) {
                    btnOK.focus();
                    //Added Code Here:
                    if(needfix.hasIn(browser))........

But it isn't clear where the first code should go.

If you could incorporate this code into alertify.js or specify more exactly how to implement this fix, that would be great.

Greg

from alertify.js.