Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

more doc, webpage

  • Loading branch information...
commit ddeff03e1e6914f39addf3931fa3eaeed857761a 1 parent 0238cc0
Andrew Cantino cantino authored
4 README.markdown
View
@@ -1 +1,3 @@
-Docs would be nice.
+SelectorGadget is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze. Tools such as <a href="http://jquery.com/">jQuery</a>, <a href="http://code.whytheluckystiff.net/hpricot/">Hpricot</a>, and <a href="http://www.crummy.com/software/BeautifulSoup/">Beautiful Soup</a> use <a href="http://www.w3.org/TR/CSS2/selector.html">CSS selectors</a> to navigate, modify, and extract content from HTML and XHTML data. Just drag the bookmarklet to your bookmark bar, then go to any page and press it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector. Now click on a highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector. Through this process of selection and rejection, SelectorGadget helps you come up with the perfect CSS selector for your needs.
+
+Please see <a href="http://www.selectorgadget.com">http://www.selectorgadget.com</a>
22 bookmarklet.html
View
@@ -1,22 +0,0 @@
-<html>
- <head>
- <title>SelectorGadget Bookmarklet</title>
- </head>
- <body>
- <h1>SelectorGadget Bookmarklet</h1>
- <div>
- SelectorGadget is a tool to help you generate efficient CSS selectors. Just drag the bookmarklet to your bookmark bar, then go to any page and press it. You can then mouse over elements on the page to select them (green) and the tool will come up with a minimal CSS selector based on your choices. It shows everything matched by that selector in yellow. If you don't want any of that matches, click on them to reject them. The selector will be updated to reflect your changes. You can find the <a href="http://github.com/tectonic/selectorgadget/">current version on GitHub</a>, and please feel free to leave comments below.
- </div>
- <div style='margin-top:10px'>
- Created by <a href="http://andrewcantino.com">Andrew Cantino</a> and <a href="http://kylemaxwell.com">Kyle Maxwell</a>.
- </div>
- <div style="font-size:1.5em;margin:20px 0px">
- Drag this link to your bookmark bar: <a href="javascript:(function(){var%20s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','http://github.com/tectonic/selectorgadget/tree/0.22/lib/selectorgadget.js?raw=true');document.body.appendChild(s);})();" onclick="return false;">SelectorGadget</a>
- </div>
- <div>
- Or use edge if you're daring: <a href="javascript:(function(){var%20s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','http://github.com/tectonic/selectorgadget/tree/master%2Flib%2Fselectorgadget_edge.js?raw=true');document.body.appendChild(s);})();" onclick="return false;">SelectorGadget Edge</a>
- </div>
- <br />
- <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/selectorgadget/embed.js"></script><noscript><a href="http://selectorgadget.disqus.com/?url=ref">View the discussion thread.</a></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
- </body>
-</html>
11 bookmarklet_edge.html
View
@@ -1,11 +0,0 @@
-<html>
- <head>
- <title>SelectorGadget Bookmarklet</title>
- </head>
- <body>
- <h1>SelectorGadget Bookmarklet</h1>
- <div style="font-size:1.5em">
- Drag this link to your bookmark bar: <a href="javascript:(function(){var%20s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','http://github.com/tectonic/selectorgadget/tree/master%2Flib%2Fselectorgadget_edge.js?raw=true');document.body.appendChild(s);})();" onclick="return false;">SelectorGadget Edge</a>
- </div>
- </body>
-</html>
0  bookmarklet_local.html → doc/bookmarklet_local.html
View
File renamed without changes
77 doc/index.html
View
@@ -0,0 +1,77 @@
+<html>
+ <head>
+ <title>Introducing SelectorGadget: point and click CSS selectors</title>
+ <style>
+ body{
+ background-color:#888;
+ padding:0;
+ margin:0;
+ }
+
+ h1{
+ padding:0;
+ margin:0;
+ }
+ .container{
+ background-color:#FFF;
+ padding:15px;
+ width:700px;
+ margin:10px auto;
+ }
+ .block{
+ margin-top:20px;
+ }
+ .block ul{
+ margin:0px;
+ padding:5px 5px 5px 17px;
+ list-style-type: square;
+ }
+ .bookmarklet{
+ margin-top:20px;
+ font-size:1.5em;
+ }
+ .bookmarklet_edge{
+ margin-top:5px;
+ font-size:1.1em;
+ }
+ .comments{
+ margin-top:60px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container">
+ <h1>Introducing SelectorGadget: point and click CSS selectors</h1>
+ <div class='block'>
+ SelectorGadget is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze. Tools such as <a href="http://jquery.com/">jQuery</a>, <a href="http://code.whytheluckystiff.net/hpricot/">Hpricot</a>, and <a href="http://www.crummy.com/software/BeautifulSoup/">Beautiful Soup</a> use <a href="http://www.w3.org/TR/CSS2/selector.html">CSS selectors</a> to navigate, modify, and extract content from HTML and XHTML data. Just drag the bookmarklet to your bookmark bar, then go to any page and press it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector. Now click on a highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector. Through this process of selection and rejection, SelectorGadget helps you come up with the perfect CSS selector for your needs.
+ </div>
+
+ <div class='block'>
+ How could I use this?
+ <ul>
+ <li>for webpage scraping</li>
+ <li>to generate jQuery selectors for dynamic sites</li>
+ <li>as a tool to examine JavaScript-generated DOM structures</li>
+ <li>as a tool to help you style only particular elements on the page with your .css file</li>
+ </ul>
+ </div>
+
+ <div class='block created_by'>
+ Created by <a href="http://andrewcantino.com">Andrew Cantino</a> and <a href="http://kylemaxwell.com">Kyle Maxwell</a>. You can find the <a href="http://github.com/tectonic/selectorgadget/">current version on GitHub</a>, and please feel free to leave comments below.
+ </div>
+
+ <div class='bookmarklet'>
+ Drag this link to your bookmark bar: <a href="javascript:(function(){var%20s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','http://github.com/tectonic/selectorgadget/tree/master/lib/selectorgadget.js?raw=true');document.body.appendChild(s);})();">SelectorGadget</a>
+ </div>
+
+ <div class='bookmarklet_edge'>
+ Or use edge if you're daring: <a href="javascript:(function(){var%20s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','http://github.com/tectonic/selectorgadget/tree/master%2Flib%2Fselectorgadget_edge.js?raw=true');document.body.appendChild(s);})();">SelectorGadget Edge</a>
+ </div>
+
+ <div class='comments'>
+ <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/selectorgadget/embed.js"></script><noscript><a href="http://selectorgadget.disqus.com/?url=ref">View the discussion thread.</a></noscript><a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
+ </div>
+
+ </div>
+ </body>
+</html>
8 lib/selectorgadget.js
View
@@ -27,11 +27,11 @@ function importCSS(href, onload) {
}
(function(){
- importCSS('http://github.com/tectonic/selectorgadget/tree/0.22/lib/selectorgadget.css?raw=true');
+ importCSS('http://github.com/tectonic/selectorgadget/tree/0.3/lib/selectorgadget.css?raw=true');
importJS('http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js', function() { // Load everything else when it is done.
- importJS('http://github.com/tectonic/selectorgadget/tree/0.22/vendor/diff/diff_match_patch.js?raw=true');
- importJS('http://github.com/tectonic/selectorgadget/tree/0.22/lib/dom.js?raw=true', function() {
- importJS('http://github.com/tectonic/selectorgadget/tree/0.22/lib/interface.js?raw=true');
+ importJS('http://github.com/tectonic/selectorgadget/tree/0.3/vendor/diff/diff_match_patch.js?raw=true');
+ importJS('http://github.com/tectonic/selectorgadget/tree/0.3/lib/dom.js?raw=true', function() {
+ importJS('http://github.com/tectonic/selectorgadget/tree/0.3/lib/interface.js?raw=true');
});
});
})();
1  sites/README.txt
View
@@ -0,0 +1 @@
+This directory contains example HTML sites to test the local bookmarklet. Use the bookmarklet from ../doc/bookmarklet_local.html on any of the pages in this directory.
Please sign in to comment.
Something went wrong with that request. Please try again.