Changing the style of an object from inside adxiehtmlDocEvents_OnMouseEnter()

Add-in Express™ Support Service
That's what is more important than anything else

Changing the style of an object from inside adxiehtmlDocEvents_OnMouseEnter()
 
SilverStr




Posts: 28
 Joined: 2013-03-31
While I am waiting to hear back about my other question, I thought I would pose another one in an entirely different area that I am thinking about.

The concept I have is wanting to be able to detect page elements and create a border of them as I hover. This would be similar to the developer mode F12 in IE that puts a blue border around the items so you can walk the elements and detect the name/id of the element by simply hovering/clicking on them.

I am assuming I would need to use the OnMouseEnter() handler and intercept the event as it enters. How would I go about changing the style dynamically though? As an example, lets say I am watching for divs. Imagine this code block: 


private void adxiehtmlDocEvents_OnMouseEnter(object sender, object eventObject)
{
     mshtml.HTMLDivElement divElement = null;
     mshtml.IHTMLEventObj2 source = eventObject as mshtml.IHTMLEventObj2;
     
     divElement = (mshtml.HTMLDivElement)source.srcElement;
     if( divElement != null )
     {
         divElement.style.border = "2px;";
         divElement.style.borderColor = "#0000FF";
     }
}


I would of course have to reset that style in OnMouseLeave(). In any case, it doesn't actually apply that style.

So what is the correct way to apply a style dynamically based on what I am trying to do?
Posted 03 Apr, 2013 18:32:27 Top
SilverStr




Posts: 28
 Joined: 2013-03-31
Just learned you have to force a border style to get the border to show. The problem I am seeing though is that it shows a border around all elements. So if I am inside a div that is in a div, it shows both borders. I only want it to show on the current topmost div (the most inner one)

Ideas?
Posted 03 Apr, 2013 19:18:48 Top
Sergey Grischenko


Add-in Express team


Posts: 7233
 Joined: 2004-07-05
Hi Dana,

Please try to use the 'GetHTMLElementByPoint' method of the 'ADXIEHelper' class to get the HTML element that is the current topmost element. 

        private void adxiehtmlDocEvents1_OnMouseEnter(object sender, object eventObject)
        {
            mshtml.IHTMLEventObj2 eventObj = eventObject as mshtml.IHTMLEventObj2;
            if (eventObj != null && eventObj.srcElement != null)
            {
                if ((!String.IsNullOrEmpty(eventObj.srcElement.tagName)) && eventObj.srcElement.tagName.ToLower().Equals("div"))
                {
                    object targetElem = 
                        ADXIEHelper.GetHTMLElementByPoint(HTMLDocument, eventObj.screenX, eventObj.screenY);
                    if (targetElem != null)
                    {
                    }
                }
            }
        }
Posted 05 Apr, 2013 05:53:40 Top
SilverStr




Posts: 28
 Joined: 2013-03-31
Hmmm... that's an interesting approach.

Is there a way to determine what type of element I need to cast to for targetElem if I want to find all visible elements, and not just div? ie: To mimic the behavior of what IE's F12 feature does, I want to put a blue border around the object that GetHTMLElementByPoint() returns. And I want to remove it from the previous element (which I think I can do on MouseLeave()?)

I can't use something like HTMLBaseElement as it won' work with HTMLFormElement items. I need to get to the .style element and a generic object won't work; I need to cast it to something.
Posted 05 Apr, 2013 10:26:13 Top
Sergey Grischenko


Add-in Express team


Posts: 7233
 Joined: 2004-07-05
Hi Dana,

'targetElem' is the mshtml.IHTMLElement object. It has the 'tagName' property. You can use it to determine the type of the HTML element.
Posted 05 Apr, 2013 10:50:30 Top
SilverStr




Posts: 28
 Joined: 2013-03-31
So the easiest method in your experience is a big ass switch statement and casting appropriately? That's kind of ugly. Oh well, at least I know.

Thanks for the prompt responses!
Posted 05 Apr, 2013 11:23:06 Top
Sergey Grischenko


Add-in Express team


Posts: 7233
 Joined: 2004-07-05
Hi Dana,

Another way is to use the late binding (the InvokeMember method of the Type class) and call all methods and properties directly without casing. But in this case the code will work slower.
Posted 06 Apr, 2013 07:18:23 Top