Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's one simple way to add a box to the top left corner of the page. First, we need to create a <code>div</code> element to serve as the box. (Other HTML elements could work too, but <code>div</code> is a good choice since it has no special meaning, it's just a simple container.)</p> <pre class="lang-javascript prettyprint-override"><code>var box = document.createElement( 'div' ); </code></pre> <p>We'll give our box an ID, both so that we can find it later with <code>document.getElementsById()</code> and so that we can <a href="https://developer.mozilla.org/en-US/docs/CSS" rel="noreferrer">style it with CSS</a>:</p> <pre class="lang-javascript prettyprint-override"><code>box.id = 'myAlertBox'; </code></pre> <p>Now we need to style the box. Since we're using GreaseMonkey, we can use <a href="http://wiki.greasespot.net/GM_addStyle" rel="noreferrer"><code>GM_addStyle</code></a> to add CSS style rules to the document:</p> <pre class="lang-javascript prettyprint-override"><code>GM_addStyle( ' #myAlertBox { ' + ' background: white; ' + ' border: 2px solid red; ' + ' padding: 4px; ' + ' position: absolute; ' + ' top: 8px; left: 8px; ' + ' max-width: 400px; ' + ' } ' ); </code></pre> <p>Note the awkward syntax for including a <a href="http://wiki.greasespot.net/Multi_Line_Strings" rel="noreferrer">multi-line string</a> in JavaScript. (There are other ways to style the box, too, which will work also outside GreaseMonkey. I'll show some of the them below.)</p> <p>Looking at the CSS style rule itself, the first three lines just say that our box should have a white background and a two pixels wide red border, and that there should be four pixels of padding between the border and the content. All this just <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Boxes" rel="noreferrer">makes it look like</a> a typical simple alert box.</p> <p>The following line says that our box should be <a href="https://developer.mozilla.org/en-US/docs/CSS/position" rel="noreferrer">absolutely positioned</a> on the page &mdash; that is, always in a fixed position regardless of what else is on the page &mdash; and the one below that specifies the position we want to give it: here, four pixels from the top left corner of the page. The last line just says that the box should not stretch to be more than 400 pixels wide, no matter how much content we stuff into it.</p> <p>Speaking of which, of course we need to add some content too. We can either just use plain text:</p> <pre class="lang-javascript prettyprint-override"><code>box.textContent = "Here's some text! This is not HTML, so &lt;3 is not a tag."; </code></pre> <p>or we can use HTML:</p> <pre class="lang-javascript prettyprint-override"><code>box.innerHTML = "This &lt;i&gt;is&lt;/i&gt; HTML, so &amp;lt;3 needs to be escaped."; </code></pre> <p>Finally, we need to add the box to the page to make it show up:</p> <pre class="lang-javascript prettyprint-override"><code>document.body.appendChild( box ); </code></pre> <p>And there you go! A box on the page.</p> <hr> <p>OK, but how do we get rid of it? Well, the simplest way would be to just make it disappear when clicked:</p> <pre class="lang-javascript prettyprint-override"><code>box.addEventListener( 'click', function () { box.parentNode.removeChild( box ); }, true ); </code></pre> <p>Alternatively, we could create a separate close button for the box and set the click handler only for that:</p> <pre class="lang-javascript prettyprint-override"><code>var closeButton = document.createElement( 'div' ); closeButton.className = 'myCloseButton'; closeButton.textContent = 'X'; GM_addStyle( ' .myCloseButton { ' + ' background: #aaa; ' + ' border: 1px solid #777; ' + ' padding: 1px; ' + ' margin-left: 8px; ' + ' float: right; ' + ' cursor: pointer; ' + ' } ' ); box.insertBefore( closeButton, box.firstChild ); closeButton.addEventListener( 'click', function () { box.parentNode.removeChild( box ); }, true ); </code></pre> <p>Inserting the close button before any other content in the box, and giving it the style <code>float: right</code> makes it float to the top right corner and makes text flow around it. The <code>cursor: pointer</code> rule makes the mouse cursor look like a hand when over the button, showing that it's clickable.</p> <p>You can also add other buttons to the box (or elsewhere on the page) in the same way. I gave the button a class name instead of an ID so that, if you want, you can give all your buttons the same class and they'll be style the same way.</p> <p>It's also possible to just put the HTML code for the buttons in <code>box.innerHTML</code>, find the resulting elements e.g. with <code>box.getElementById()</code> and add the click handlers for them that way.</p> <hr> <p>I said I'd mention other ways of styling elements. One simple way is to just write the CSS rules directly into its <code>style</code> property:</p> <pre class="lang-javascript prettyprint-override"><code>box.style.cssText = ' background: white; ' + ' border: 2px solid red; ' + ' padding: 4px; ' + ' position: absolute; ' + ' top: 8px; left: 8px; ' + ' max-width: 400px; ' ; </code></pre> <p>(This way, we wouldn't even need to give the box an ID.) It's also possible to set (and read) the styles one at a time:</p> <pre class="lang-javascript prettyprint-override"><code>box.style.background = 'white'; box.style.border = '2px solid red'; box.style.padding = '4px'; box.style.position = 'absolute'; box.style.top = '8px'; box.style.left = '8px'; box.style.maxWidth = '400px'; </code></pre> <p>You'll note that some of the names are different; for example, <code>max-width</code> would not be a valid JavaScript property name, so it becomes <code>maxWidth</code> instead. The same rule works for other CSS property names with hyphens.</p> <p>Still, I prefer <code>GM_addStyle</code> because it's more flexible. For example, if you wanted to make all links inside your box red, you could just do:</p> <pre class="lang-javascript prettyprint-override"><code>GM_addStyle( ' #myAlertBox a { ' + ' color: red; ' + ' } ' ); </code></pre> <hr> <p>By the way, here's a neat trick: if you replace <code>position: absolute</code> with <code>position: fixed</code>, then the box will not scroll along with the page &mdash; instead it'll stay fixed to the corner of your browser even if you scroll down.</p> <p>Another tip: If you don't have <a href="http://getfirebug.com/" rel="noreferrer">Firebug</a> yet, install it. It will make examining page content and debugging JavaScript <em>so</em> much easier.</p>
    singulars
    1. This table or related slice is empty.
    1. POHow can I display the output of my userscript in a floating box on the side of the page?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USIlmari Karonen
    1. USIlmari Karonen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow can I display the output of my userscript in a floating box on the side of the page?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COGod, I love your answers! Very clear, very well explained, and plenty of reference links! Couple of questions... if I use `GM_addStyle` and leave certain values unset can I set them later in the script using the `box.style.**` format? I would assume yes, but coding rules don't always make sense. According to the multi line string page you sent me to, your method of combining strings has the worst performance, so with bigger scripts for sure I should use a different method... they aren't really clear whether the `.join` method or the trailing backslash is the most efficient though?
      singulars
      1. PO
      1. USKat Cox
    2. COI also just realized that I could probably use one of my webpage creation programs for this part if I wanted... but for something small like this it would probably be pointless. I used to have Firebug installed, but it did nasty things to my computer... firefox already hogs cpu and memory alot because of all my tab groups... they may have updated it since then so I might try it when I'm not stuck on dialup. I've just been using the web developer tools which seem to not be much use.
      singulars
      1. PO
      1. USKat Cox
    3. COIn your `GM_addStyle` you have `'` and on the greasepot wiki they use `"`. Is there a difference?
      singulars
      1. PO
      1. USKat Cox
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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