Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firebug Inspect Element Feature using the .NET Framework and JavaScript

    Hello JavaScripters! I was hoping you could help me with an application I'm working on using C# and the .NET Framework that incorporates Javascript. I'm trying to do something similar to to the FireBug / Firefox Inspect Element feature:


    I came across http://www.selectorgadget.com/ which is exactly what I'm trying to do. It's in Javascript and after looking through the source code for the past 2 hours I still don't have a clue how to incorporate it into my program...

    From what I can tell it uses tokenizing and recursive analysis of DOM elements to figure out CSS selector paths: http://www.selectorgadget.com/stable/lib/dom.js.


    Here is what I have so far. The javascript code highlights HTML elements such as a <table> tag and changes the border and background color.


    Code:
      document.onmouseover = dohighlight;
      document.onmouseout = dohighlightoff;
    
      var BGCOLOR = "#444444";
      var BORDERCOLOR = "#FF0000";
    
    // Highlight <table> in grey 
      function dohighlight()
      {
        var elem = window.event.srcElement;
    
        while (elem!=null && elem.tagName!="TABLE")
            elem = elem.parentElement;
    
        if (elem==null) return;
    
        if (elem.border==0)
        {
            elem.border = 1;
    
            // store current values in custom tag attributes
            //
            elem.oldcolor = elem.style.backgroundColor; // store backgroundcolor
            elem.style.backgroundColor = BGCOLOR; // new background color
    
            elem.oldbordercolor = elem.style.borderColor; // same with bordercolor
            elem.style.borderColor = BORDERCOLOR;
    
            var rng = document.body.createTextRange();
            rng.moveToElementText(elem);
    
    // Make a red border around <table>
      function dohighlightoff()
      {
        var elem = window.event.srcElement;
    
        while (elem!=null && elem.tagName!="TABLE")
            elem = elem.parentElement;
    
        if (elem==null) return;
    
        if (elem.border==1)
        {
            elem.border = 0;
    
            // recover values from custom tag attribute values
            elem.style.backgroundColor = elem.oldcolor;
            elem.style.borderColor = elem.oldbordercolor;
        }
      }
    Any ideas on how to incorporate the Selectorgadget into my program would be greatly appreciated!

    Selectorgadget Source Code: https://github.com/iterationlabs/selectorgadget
    Last edited by winappdev; 03-01-2012 at 04:47 AM.

  • #2
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    delete
    Last edited by winappdev; 03-01-2012 at 04:47 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •