Created
August 27, 2011 02:01
-
-
Save makevoid/1174855 to your computer and use it in GitHub Desktop.
JQuery DOM HighLighter (it's a basic "Inspect element" simple implementation to mimic what webkit inspector and firebug do)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| http://uploads.makevoid.com/jquery_dom_highlighter.html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <!-- <link href="/main.css" rel="stylesheet" /> --> | |
| <style> | |
| .dh_hover { | |
| opacity: 0.8; | |
| border: 1px solid #0990C5; | |
| position: relative; | |
| top: -1px; | |
| left: -1px; | |
| } | |
| #dialog { | |
| display: none; | |
| position: relative; | |
| top: 5px; | |
| left: 15px; | |
| font-size: 16px; | |
| font-weight: normal; | |
| background: #DDD; | |
| padding: 5px 10px; | |
| width: 300px; | |
| z-index: 3; | |
| border: 3px solid #999; | |
| } | |
| </style> | |
| <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> | |
| <script> | |
| $(function(){ | |
| var last_element = null | |
| $("body *").bind("click", function(){ | |
| var is_different_elem = $(this)[0] != $(last_element)[0] | |
| if (last_element == null || is_different_elem || $(".dialogs").length == 0) { | |
| $(".dialogs").remove() | |
| $(this).append("<div id='dialog' class='dialogs'></div>") | |
| var element = $(this).get(0).tagName.toLowerCase() | |
| var id = $(this).attr("id") | |
| if (id) | |
| id = "#"+id | |
| else | |
| id = "" | |
| var klass = $(this).attr("class") // TODO: multiple classes support | |
| if (klass) | |
| klass = "."+klass.replace(/\s*dh_hover/, '') | |
| else | |
| klass = "" | |
| var infos = "element: "+element+id+klass | |
| $("#dialog").html(infos).show() | |
| } else { | |
| $(".dialogs").remove() | |
| } | |
| last_element = this | |
| }) | |
| $("body *").hover(function(){ | |
| $(this).addClass("dh_hover") | |
| $(this).width($(this).width()-2).height($(this).height()-2) | |
| }, function(){ | |
| $(".dialogs").remove() | |
| $(this).removeClass("dh_hover") | |
| $(this).width($(this).width()+2).height($(this).height()+2) | |
| }) | |
| }) | |
| </script> | |
| <h1>hi!</h1> | |
| <p class='test'>This is an example Page</p> | |
| <div id='content' class='test'>end!</div> | |
| </body> | |
| </html> |
Thanks for the plugin
Hi, thanks for nice plugin. i need to use your plugin to do the same functionality but in Iframe mean external website loaded in through Iframe. can you help in this matter ?
Great, but I need to use it as Chimiste! Please,
Hi, thanks for nice plugin. i need to use your plugin to do the same functionality but in Iframe mean external website loaded in through Iframe. can you help in this matter ?
What a wonderful implementation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hosted example: http://uploads.makevoid.com/jquery_dom_highlighter.html