Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Ok, here's some semi-random pointers.</p> <p><strong>1)</strong> Greasemonkey currently does not play nice with jQuery 1.4, so use jQuery 1.3.2. Incorporate it into your GM script by adding this line to the header:</p> <pre><code>// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js </code></pre> <p>.<br> .<br> <strong>2)</strong> Stuff like this:</p> <pre><code>document.getElementById("huhu").style.display = "none"; document.getElementById("field1_show").style.display = "inline"; document.getElementById("field1_hide").style.display = "none"; </code></pre> <p>.<br> Becomes this with jQuery:</p> <pre><code>$("#huhu").css ('display', 'none'); $("#field1_show").css ('display', 'inline'); $("#field1_hide").css ('display', 'none'); </code></pre> <p>The jQuery version will work much better across different browsers, too.</p> <p>.<br> .<br> <strong>3)</strong> A very handy jQuery reference is at: <a href="http://www.jqapi.com/" rel="nofollow noreferrer">http://www.jqapi.com/</a></p> <p>.<br> .<br> <strong>4)</strong> Here is a sample Greasemonkey script with your table-create, refactored the jQuery way. It works, as-is on the Google homepage. Adjust the header and <code>TargetNode</code> to match your target site. : (<strong>Warning:</strong> This sample script will create your table, but you can't bind the <code>onClick</code>s, etc., this way in a Greasemonkey script. See: <a href="http://commons.oreilly.com/wiki/index.php/Greasemonkey_Hacks/Getting_Started#Pitfall_.232:_Event_Handlers" rel="nofollow noreferrer">GM pitfalls</a>.)</p> <pre><code>// ==UserScript== // @name jQuery Test/Demo // @namespace Google // @include *.google.tld/ // @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js // ==/UserScript== /* Optional: window.addEventListener ("load", Greasemonkey_main, false); */ $(document).ready (Greasemonkey_main); function Greasemonkey_main () { /*--- Get the first node inside the id="main" span (Google.com) If that's not there, then get the first node of the html body. */ var TargetNode = $("#main *:first"); if (!TargetNode) TargetNode = $("body *:first"); $(TargetNode).after ( "&lt;table border='1' cellpadding='10' cellspacing='0'&gt;&lt;tbody&gt;" + "&lt;tr&gt;" + "&lt;td bgColor='#FFFFDD'&gt;" + "&lt;table border='0' cellpadding='0' cellspacing='2'&gt;&lt;tbody&gt;" + "&lt;tr&gt;" + "&lt;td&gt;" + "&lt;input type='text' id='field1' name='field_analysis' size='5' value='' onkeypress='return check(event)' onChange='replace(field1)'&gt;" + "&lt;a onClick='show()' id='field1_show'&gt;Text&lt;/a&gt;&lt;a 'onClick='hide()' id='field1_hide' style='display: none'&gt;Text&lt;/a&gt;&lt;br&gt;&lt;div id='huhu' style='display:none'&gt;HUHU&lt;/div&gt;" + "&lt;/td&gt;" + "&lt;/tr&gt;" + "&lt;tr&gt;" + "&lt;td&gt;" + "&lt;input type='text' id='field2' name='field_communication' size='5' value='' onkeypress='return check(event)' onChange='replace(field2)'&gt;" + "&lt;a onClick='expandCom()' id='field2_show'&gt;Text&lt;/a&gt;&lt;a onClick='clapCom()' id='field2_hide' style='display:none'&gt;Text&lt;/a&gt;&lt;br&gt;&lt;div id='huhu1' style='display:none'&gt;HUHU&lt;/div&gt;" + "&lt;/td&gt;" + "&lt;/tr&gt;" + "&lt;tr&gt;" + "&lt;td&gt;" + "&lt;input type='text' id='field3' name='field_outworking' size='5' value='' onkeypress='return check(event)' onChange='replace(field3)'&gt;" + "&lt;a onClick='expandOut()' id='field3_show'&gt;Text&lt;/a&gt;&lt;a onClick='clapOut()' id='field3_hide' style='display:none'&gt;Text&lt;/a&gt;&lt;br&gt;&lt;div id='field3div' style='display:none'&gt;HUHU&lt;/div&gt;" + "&lt;/td&gt;" + "&lt;/tr&gt;" + "&lt;tr&gt;" + "&lt;td&gt;" + "&lt;input type='text' id='field4' name='field_testing' size='5' value='' onkeypress='return check(event)' onChange='replace(field4)'&gt;" + "&lt;a onClick='expandTest()' id='field4_show'&gt;Text&lt;/a&gt;&lt;a onClick='clapTest()' id='field4_hide' style='display:none'&gt;Text&lt;/a&gt;&lt;br&gt;&lt;div id='field4div' style='display:none'&gt;HUHU&lt;/div&gt;" + "&lt;/td&gt;" + "&lt;/tr&gt;" + "&lt;tr&gt;" + "&lt;td&gt;" + "&lt;hr&gt;" + "&lt;input type='text' id='field5' name='field_effort'size='5' value='' OnFocus='calculate()' onkeypress='return check(event)' onChange='replace(field5)'&gt; " + "&lt;a onClick='expandEff()' id='field5_show'&gt;Text&lt;/a&gt;&lt;a onClick='clapEff()' id='field5_hide' style='display:none'&gt;Text&lt;/a&gt;&lt;br&gt;&lt;div id='field5div' style='display:none'&gt;HUHU&lt;/div&gt;" + "&lt;/td&gt;" + "&lt;/tr&gt;" + "&lt;/tbody&gt;&lt;/table&gt;" + "&lt;/td&gt;" + "&lt;/tr&gt;" + "&lt;/tbody&gt;&lt;/table&gt;" ); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload