getting absolute position of HTML element in webbrowser control with C#

here is the solution I got so far:

// set the size of our web browser to be the same size as the image int width, height; width = webBrowser1.Document.Images[0].ClientRectangle.Width; height = webBrowser1.Document.Images[0].ClientRectangle.Height;

webBrowser1.Width = width;
webBrowser1.Height = height;

//scroll vertically to that element
webBrowser1.Document.Images[0].OffsetParent.ScrollIntoView(true);

//calculate x, y offset of the element
int x = webBrowser1.Document.Images[s].OffsetRectangle.Left + 
webBrowser1.Document.Images[s].OffsetParent.OffsetRectangle.Left + 
webBrowser1.Document.Images[s].OffsetParent.OffsetParent.OffsetRectangle.Left+
webBrowser1.Document.Images[s].OffsetParent.OffsetParent.OffsetParent.OffsetRectangle.Left+
webBrowser1.Document.Images[s].OffsetParent.OffsetParent.OffsetParent.OffsetParent.OffsetRectangle.Left;

int y = webBrowser1.Document.GetElementsByTagName("HTML")[0].ScrollTop;

//now scroll to that element
webBrowser1.Document.Window.ScrollTo(x, y);

now this code works perfectly.. but there is an issue with calculating the offsets. I need to calculate the offsetparent of the element then calculate the offsetparent of the offsetparent etc.. I need to do that dynamically not adding it one by one.. I don't know how to do that. any ideas?

EDIT: here is my last and final version and it works with any html element it will find the absolute position of any element I want..

   public int getXoffset(HtmlElement el)
     {
         //get element pos
         int xPos = el.OffsetRectangle.Left;

         //get the parents pos
         HtmlElement tempEl = el.OffsetParent;
         while (tempEl != null)
         {
             xPos += tempEl.OffsetRectangle.Left;
             tempEl = tempEl.OffsetParent;
         }

         return xPos; 
     }  

     public int getYoffset(HtmlElement el)
     {
         //get element pos
         int yPos = el.OffsetRectangle.Top;

         //get the parents pos
         HtmlElement tempEl = el.OffsetParent;
         while (tempEl != null)
         {
             yPos += tempEl.OffsetRectangle.Top;
             tempEl = tempEl.OffsetParent;
         }

         return yPos;
     }

then use the position with:

 //now scroll to that element
 webBrowser1.Document.Window.ScrollTo(x, y);

done!


I like previous answers but iterating through parent objects twice is not very effective. Remember - you're working with COM/ActiveX here. This works much faster:

public Point GetOffset(HtmlElement el)
{
    //get element pos
    Point pos = new Point(el.OffsetRectangle.Left, el.OffsetRectangle.Top);

    //get the parents pos
    HtmlElement tempEl = el.OffsetParent;
    while (tempEl != null)
    {
        pos.X += tempEl.OffsetRectangle.Left;
        pos.Y += tempEl.OffsetRectangle.Top;
        tempEl = tempEl.OffsetParent;
    }

    return pos;
}

and then

var point = GetOffset(element);
var x = point.X;
var y = point.Y;

Thank you, it works like a charm. I had to rewrite it as VB, and just want to share the solution:

Function GetXOffSet(ByVal elem As HtmlElement) As Integer
    Dim xPos As Integer = elem.OffsetRectangle.Left
    Dim tElm As HtmlElement = elem.OffsetParent
    Dim trig As Boolean = False
    While Not trig
        Try
            xPos += tElm.OffsetRectangle.Left
            tElm = tElm.OffsetParent
        Catch ex As Exception
            trig = True
        End Try
    End While
    Return xPos
End Function

Function GetYOffSet(ByVal elem As HtmlElement) As Integer
    Dim yPos As Integer = elem.OffsetRectangle.Top
    Dim tElm As HtmlElement = elem.OffsetParent
    Dim trig As Boolean = False
    While Not trig
        Try
            yPos += tElm.OffsetRectangle.Top
            tElm = tElm.OffsetParent
        Catch ex As Exception
            trig = True
        End Try
    End While
    Return yPos
End Function

Tags:

C#

Html

Position