|
||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||
|
Announcements
Want a new Job?
Chapters
Services
Feature Zones
|
Note: This is an unedited contribution. If this article is inappropriate,
needs attention or copies someone else's work without reference then please
Report This Article
IntroductionThis article gives an idea to use the javascript to find the position of the control on the web page. you might face the situation like diplaying the Ajax UpdateProgress control while doing the partial post back. this problem I solved in the same type of area. Using the codeHere the code snippets provided as two base classes such as positioning the UpdateProgress control at the position of the control that caused the post back on the page, and the second one is postioning the UpdateProgress based on the postion of the Mouse(this might not be the accurate but, in our case we have huge HTML content on the page and the content positioned/visibled based on various conditions). <head> <script type="text/javascript"> asdffunction Point(x,y) { this.x = x; this.y = y; } mouseLocation = new Point(0,0); var IE = document.all?true:false; if (!IE) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = getMouseLoc; function getMouseLoc(e) { if (IE) { mouseLocation.x = event.clientX + document.body.scrollLeft; mouseLocation.y = event.clientY + document.body.scrollTop; } else { // grab the x-y pos.s if browser is NS mouseLocation.x = e.screenX ; //+ document.body.scrollLeft; mouseLocation.y = e.screenY - 100; //+ document.body.scrollTop; } // catch possible negative values if (mouseLocation.x < 0){mouseLocation.x = 0} if (mouseLocation.y < 0){mouseLocation.y = 0} return true; } /* source : client ID of the control that causes the event target : client ID of the targer UpdateProgress Control to display condition : 0/1 based on the need (0: position based on the Mouse positionn; 1: position based on the source Control position */ function positionDiv(source, target, condition) { var s=document.getElementById(source); var t=document.getElementById(target); if(condition) { if(s.offsetParent) { mouseLocation.x =s.offsetLeft + s.offsetWidth; mouseLocation.y =s.offsetTop; while(s=s.offsetParent) { mouseLocation.x +=s.offsetLeft; mouseLocation.y +=s.offsetTop; } } else { mouseLocation.x=s.offsetLeft; mouseLocation.y =s.offsetTop; } mouseLocation.x=mouseLocation.x - 180; mouseLocation.y=mouseLocation.y - 150; } else { mouseLocation.y = mouseLocation.y - 60; mouseLocation.x = mouseLocation.x - 400; } if(mouseLocation.y <0) mouseLocation.y = 0; if(mouseLocation.x <0) mouseLocation.x = 0; //alert('y :' + mouseLocation.y + ' x:' + mouseLocation.x); t.style.top = (mouseLocation.y) + "px"; t.style.left = (mouseLocation.x) +"px"; t.style.position = "absolute"; } <script> </head> The Javascript function positionDiv(...) will do everything for positioning the UpdateProgress Control. Not only the UpdateProgress control and also we can make use of this code for any control that you want to display relevant to the source control.
1)for control position string strValue = String.Format("positionDiv('{0}', '{1}', {2});", btnRefresh.ClientID.ToString(), uprHitList.ClientID.ToString(), 1); btnRefresh.Attributes.Add("onclick", strValue); 2)Mouse position string strValue = String.Format("positionDiv('{0}', '{1}', {2});", btnRefresh.ClientID.ToString(), uprHitList.ClientID.ToString(), 0); btnRefresh.Attributes.Add("onclick", strValue); in this second case there wont be any impact of the control that we passing as the source because we will consider the mouse position only. Raamas.
|
|||||||||||||||||||||||||||||||||||||||||||