Databases
StackOverflow2013
Postsdbo
POHow can I display the output of my userscript in a floating box on the side of the page?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I display the output of my userscript in a floating box on the side of the page?
    primarykey
    data
    text
    <p>I'm working on a userscript for <a href="http://unicreatures.com/" rel="nofollow">Unicreatures</a> that keeps track of events during exploration. It's working (well, it works but still needs some work lol) but I need a way to display the information I'm collecting that doesn't involve popup alerts for every step.</p> <h2>How can I create a box on the page and display stuff in it?</h2> <p>I'm looking to create a frame, window, whatever on the left side of the menu on this page, and write the values of various variables into it as my script runs. </p> <p>I'm collecting this data in localStorage, so my script will first update various localStorage properties and then display the results in this box somehow:</p> <pre><code>localStorage.steps = Number(localStorage.steps) + 1; displayValueInFloatingBox(localStorage.steps + ' in Sargasso' ); </code></pre> <p>I'd also like to add a button to this box to reset the values of these properties, so that I have a choice of keeping track forever or just for a session or two without having to edit the script every time (especially if I decide to share the script). I assume this would just set the variables to zero so I just need to know how to create the button and making it do something... This would probably use an eventListener somehow.</p> <p>Please stick to plain JavaScript, no jQuery... I'm still barely getting JavaScript at the moment. And please, explain answers so I understand how something works - I don't just want code snippets that leave me coming back with a similar question because I don't understand why a bit of code was used.</p> <h3>Appendix A: my current script</h3> <pre><code>// ==UserScript== // @name Unicreatures Egg pop-up // @namespace Unicreatures Egg pop-up // @description Unicreatures Egg pop-up // @include http://unicreatures.com/explore.php* // @include http://www.unicreatures.com/explore.php* // ==/UserScript== var regexp = /You find an? (Exalted )?(.*?) egg nearby/; var match = regexp.exec( document.body.innerHTML ); if ( match ) { if ( match[1] ) { alert( "Exalted egg found: " + match[2] ); } else { alert( "Normal egg found: " + match[2] ); } } var y = document.body.innerHTML; var links = document.getElementsByTagName( 'a' ); for ( var i = 0; i &lt; links.length; i++ ) { var link = links[i]; if ( /area=sea(?!\&amp;gather)/.test( link.href )) { link.addEventListener( 'click', function () { localStorage.steps=Number(localStorage.steps)+1 // alert(localStorage.steps + ' in Sargasso' ); }, true ); } } //document.addEventListener('click', function(){alert('page clicked')}, true); if(y.indexOf("You find a Noble")&gt; 0) { alert('Noble Egg Alert'); } if(y.indexOf("You find an Exalted")&gt; 0) { localStorage.exaltedEggCount=Number(localStorage.exaltedEggCount)+1; alert('Exalted Egg Alert '+localStorage.exaltedEggCount); } if(y.indexOf("egg nearby!")&gt; 0) { localStorage.eggCount=Number(localStorage.eggCount)+1; alert('Egg Alert '+localStorage.eggCount); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USShog9
    1. USKat Cox
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow can I display the output of my userscript in a floating box on the side of the page?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow can I display the output of my userscript in a floating box on the side of the page?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow can I display the output of my userscript in a floating box on the side of the page?
      1. This table or related slice is empty.
      1. VTDownMod
    1. CO90% of the things you are asking to do through GreaseMonkey (Or UserScript) are exactly the same as one would do if making normal Javascript program that runs on the page. Most of us here at StackOverflow don't mind helping someone who has made an effort, but we normally aren't willing to just hand over blocks of code. Come back with specific examples of what you have tried. I would *start* with just regular javascript on normal page. MUCH easier to test. Converting it to a UserScript after is _normally_ fairly easy.
      singulars
      1. POHow can I display the output of my userscript in a floating box on the side of the page?
      1. USJeremy J Starcher
    2. COIf you read my question better you would see I didn't just want a block of code. I was asking for help finding the answer, or if code was given I wanted to know what made it work so that I'd know how to do it elsewhere... and is it really that big of a block of code just to put a little sidebar on a page? And code for a button considering all I need is to know how to put the button on there basically and where in that code to put my instructions? I didn't realize that it would take that much code just to make an empty sidebar with 1 button and 1 checkbox so I could see how it was done
      singulars
      1. POHow can I display the output of my userscript in a floating box on the side of the page?
      1. USKat Cox
    3. COIt doesn't take that much code at all, actually -- but and a little research will find you lots of examples on how to manipulate the DOM, add `div` elements and add or add a `checkbox`. This question shows no attempt at basic research.
      singulars
      1. POHow can I display the output of my userscript in a floating box on the side of the page?
      1. USJeremy J Starcher
 

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