StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'm not really sure what the question is - my interpretation is that you're asking for refactoring advice. If that's what you're looking for, here's the way I'd probably implement the same requirements:</p> <pre><code>jQuery('<div><ul></ul></div>') .appendTo("body") .css({ background: "white", left: 0, position: "absolute", textAlign: "left", top: '50%' }) .find('ul') .css({ listStyleType: 'none', margin: 0, padding: 0 }) .append('<li><a href="" class="sidebar-undo">Undo</a></li>') .find('.sidebar-undo') .click(function(e){ e.preventDefault(); // your 'undo' code }) .end() .append('<li><a href="" class="sidebar-redo">Redo</a></li>') .find('.sidebar-redo') .click(function(e){ e.preventDefault(); // your 'redo' code }) .end() .append('<li><a href="" class="sidebar-changeEmail">Change E-Mail</a></li>') .find('.sidebar-changeEmail') .click(function(e){ e.preventDefault(); // your 'changeEmail' code }) .end() .append('<li><a href="" class="sidebar-doReset">Reset All</a></li>') .find('.sidebar-doReset') .click(function(e){ e.preventDefault(); // your doReset code }) .end() .find('li') .css({ padding: '0.5em' }) .end() .find('a') .css({ background: "whatever", color: "etc" }); </code></pre> <p>Notes:</p> <ul> <li><code>e.preventDefault()</code> should generally be the first line of your handler, that way if an exception is thrown later, the anchor will still not navigate (easier to debug);</li> <li>you don't need to give any of your elements IDs, since you have direct DOM handles on everything already;</li> <li>your hrefs should ideally be useful, taking the user to a legitimate page if they right-click and do "open in new tab" (using "preventDefault" will keep them from navigating away on regular left-click);</li> <li>since it's a bookmarklet, don't worry too much about separating out your styles - you're using jQuery, so you can easily grab the elements you care about and apply CSS properties directly;</li> <li>the example above has no variables aside from the <code>e</code> event object - to me, this is a more elegant solution than creating a <code>self</code> reference and a bunch of collection objects (that's just my opinion).</li> </ul> <p>Hope this helps!</p>

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