Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML
Tip/Trick

Highlighting the Elements in Web Browser Control and Getting the HTML XML Path of the Element Clicked

Rate me:
Please Sign up or sign in to vote.
4.50/5 (2 votes)
29 Jul 2014CPOL3 min read 20.5K   560   2   4
This is a small tip regarding highlighting items and getting the element XML path that is clicked in the Web Browser control.

Introduction

This is a small tip regarding highlighting items and getting the element XML path that is clicked in the Web Browser control. I had this query of how to highlight the elements more like the way when we use the debugger (Ref Dia1). I thought I could share how this can be implemented in the control.

Image 1

This tip focuses on the following things:

  1. Highlighting the elements during the mouse movement
  2. Getting the HTML XML path of the element that is clicked
  3. Forward and Backward functionality in Web Browser

Background

References needed:

  • Microsoft.mshtml

This assembly will be in almost all the Windows machines. You could find the assembly in the following path:

C:\Windows\assembly\GAC\Microsoft.mshtml\7……. \Microsoft.mshtml.dll

Basics of the Project

Before moving into the explanation of how this is done, I would describe the functionalities of the button that I use in this application.

  • Image 2Move back to the previous website
  • Image 3Move forward to the next website (visited)
  • Image 4To highlight the items in the current page
  • Image 5To go to Google home page
  • Image 6Refresh/ Navigate to the website that is in the URL text box

Highlighting the Elements and Getting the HTML XML Path of the Element (Clicked)

I implemented this functionality using the jQuery. To understand the following article, the user has to know the basics of the jQuery at-least. (To know about the jQuery basics, please read the following article: http://www.w3schools.com/jQuery/).

To highlight the element, I used the mouse over/mouseout function in jQuery. When the mouse is over the element, the element will be assigned to red color border with increased width. Event stopPropogation is used to stop the event at the current element rather (instead of continuing to its parents).

JavaScript
$('div').mouseover( 
function(event){event.stopPropagation(); $(this).css('border-color','red'); 
$(this).css('border-width','4px'); $(this).css('border-style','solid'); })

When the mouse is out of the element, it gets back the old default shape and color.

JavaScript
.mouseout(function (event) { event.stopPropagation();$(this).css('border-color',''); 
$(this).css('border-width','');$(this).css('border-style','');}) 

Once the element is clicked, it gives the HTML XML path by using the following function:

JavaScript
$('div').click(function(event){event.stopPropagation();alert(getElementPath(this));})}

function getElementPath(element){ 
return'//'+ $(element).parents().andSelf().map(
function(){ 
var $this=$(this);var tagName=this.nodeName;
if($this.siblings(tagName).length>0){ tagName +='['+$this.prevAll(tagName).length+']';}
return tagName;}).get().join('/').toUpperCase();
}}

This function gets the current element and all its parents tag name and form the XML path.

To see how it works in the application, click and play around with the cursor. You could see the elements are getting highlighted (Only div elements will be highlighted based on my programming. If you want other particular elements to be highlighted, then replace the div tag in mouse over function in jquery and execute in your application).

Image 7

Then click the element, which displays the XML path in the alert box.

Image 8

Forward and Backward Functionality

We can use browser.GoBack() or browser.GoForward() in our control. But this is quite a problem in WebBrowser, because at times some websites will be loaded too many times because of the images/Ajax controls, etc. which makes the control difficult to track backward and forward. So in order to achieve the best way we can use Stacks for this. The moment it got loaded successfully, it can be put in backward Stack, then while moving back, the first URL (which is the current page) will be moved to the Forward Stack and the next URL in backward stack can be displayed. I have given the example of the backward button event in the following:

JavaScript
if (backWardStack.Count>0)
                {
                //Get the current URL from backward
                string url = backWardStack.Pop();
                ForwardStack.Push(url);
                if (backWardStack.Count > 0)
                {
                    webBrowser1.Navigate(backWardStack.Pop());
                }
               }

Conclusion

I hope you understand the above clearly. This is my first tip, I welcome both your positive and negative reviews. Your reviews/comments would help me grow. Thank you guys. I will see you soon in my next post.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Singapore Singapore
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionPlease provide the whole project Pin
JaideepChandra16-Mar-15 17:31
JaideepChandra16-Mar-15 17:31 
AnswerRe: Please provide the whole project Pin
Prasaad SJ17-Mar-15 22:58
Prasaad SJ17-Mar-15 22:58 
GeneralRe: Please provide the whole project Pin
JaideepChandra18-Mar-15 1:43
JaideepChandra18-Mar-15 1:43 
Thank you for the instructions. I can see the highlight now. Smile | :)
I have some questions..
Can you please tell me, is there a way to highlight the textbox, button, any link or any other control elements present in the webpage along with the webelements that you have shown.
GeneralRe: Please provide the whole project Pin
Prasaad SJ19-Mar-15 21:43
Prasaad SJ19-Mar-15 21:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.