Windows Phone 7.5, Android 2.3 vertical position

[javizarza]

Hi fabien-d, amazing plugin :)

Just want to let you know it works nice on Blackberry 6 OS (Torch 9800) but there is a common problem on Windows Phone 7.5 and Android 2.3 for me.

It seems vertical position of the window is not properly tracked, so when you scroll and launch an alert it just appears on the top of the page, needing you to scroll upwards.

[fabien-d]

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!

[javizarza]

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.

[fabien-d]

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

[fabien-d]

@javizarza any update on the fix?

[javizarza]

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.

[javizarza]

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 :)

[fabien-d]

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

[kaansoral]

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?

[kaansoral]

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

[gregoryagu]

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