Thursday, May 8, 2008

Ajax getLocation Problem

When I developed a solution using ASPNET and ajax, I faced problem with AJAX
When I used any control used getLocation function and page is scrolled.
For example when I used popup extender and onmousehover popup extender appears shiffted. This problem is occured only in IE.
To Solve this problem I did these steps:
1. I Added ScriptReference to script manager to customize MicrosoftAjax.js
<asp:ScriptManager ID="ScriptManager1" runat="server"
ScriptMode="Release"
EnableScriptLocalization="false">
<Scripts>
<asp:ScriptReference Name="MicrosoftAjax.js"
Path="~/AjaxFramework/MicrosoftAjax.js" />
</Scripts>
</asp:ScriptManager>

2. Customized MicrosoftAjax.js
a. Added these functions to javascript file After line of code Function.__class=true;
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft,curtop];
}
function f_scrollLeft() {
return f_filterResults (
window.pageXOffset ? window.pageXOffset : 0,
document.documentElement ? document.documentElement.scrollLeft : 0,
document.body ? document.body.scrollLeft : 0
);
}
function f_scrollTop() {
return 0;
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result (n_result > n_body)) ? n_body : n_result;
}
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}

return [ scrOfX, scrOfY ];
}

b. search for (Sys.Browser.agent){case Sys.Browser.InternetExplorer:...break;
replace code in this switch case with Code Below:
case Sys.Browser.InternetExplorer:
Sys.UI.DomElement.getLocation = function(element) {
k = findPos(element);
if (Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7) { p = getScrollXY(); offsetX = k[0]+p[0]; offsetY = k[1]+p[1]; return new Sys.UI.Point(offsetX, offsetY); } offsetX = k[0]+f_scrollLeft(); offsetY = k[1]+f_scrollTop(); return new Sys.UI.Point(offsetX, offsetY); }
break;
Note: You can do this change using microsoftAjax.debug.js and use debug Mode (It is easier to edit), But You will find debug file size 250 KB, and 179 KB after you converted it to relase.
It is better to do this change direct to released file because it's size 89 KB.

No comments: