StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If all you want is to show some html that you have on another page, you can do something like this:</p> <pre><code>var modal = document.createElement('iframe'); modal.setAttribute('src', 'http://codinghorror.com'); modal.setAttribute('scrolling', 'no'); // no scroll bars on the iframe please modal.className = 'modal'; document.body.appendChild(modal); </code></pre> <p>With some basic styles:</p> <pre><code>.modal { border:0; height:200px; position:fixed; right:20px; top:20px; width:200px; z-index:101; } </code></pre> <p>Of course, you should load these styles from a remote host:</p> <pre><code>var c = document.createElement('link'); c.type = 'text/css'; c.rel = 'stylesheet'; c.href = '//example.com/main.css'; document.body.appendChild(c); </code></pre> <p>So your bookmarklet looks like: <a href="http://jsfiddle.net/radu/mTKHQ/">http://jsfiddle.net/radu/mTKHQ/</a>. This is with the css hosted locally since I didn't bother uploading it anywhere. Now, this is very barebones and there is obviously a lot more you can do. First of all, you can write your own DOM instead of using an iFrame. You can add a close button, various events, etc. At that point, it would make sense to do what amazon did and use a script/stylesheet loader to load files from a remote host, like so:</p> <pre><code>(function (d) { var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//example.com/main.js'; d.body.appendChild(s); var c = d.createElement('link'); c.type = 'text/css'; c.rel = 'stylesheet'; c.href = '//example.com/main.css'; d.body.appendChild(c); }(document)); </code></pre> <p>Prepend this with <code>javascript:</code>, and you've got your new bookmarklet:</p> <pre><code>javascript:(function(d){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='//example.com/main.js';d.body.appendChild(s);var c=d.createElement('link');c.type='text/css';c.rel='stylesheet';c.href='//example.com/main.css';d.body.appendChild(c);}(document)); </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