Page Position Bookmarklet

Hello!

Today I have a trio of related javascript bookmarklets for your browser. They allow you to save / restore / clear your position on any web page. It persists across sessions / reboots / page navigations too. It does this by saving the position in your local storage for each path at each domain. This means that you can save your place on multiple pages (even on the same domain!) and they will all be saved until you use the clear bookmark on each page you saved it on or clear your local storage.

I will probably come back and write an upgraded version of these later, but for now they only save one position per page. It would be neat if the saved positions acted like a stack, so you could save multiple positions on each page.

Link: Page Position System

Saving and Restoring <inputs />

I have made a pair of Javascript bookmarklets that allow you to save and load the contents of input boxes and textareas on any webpage.

To use them, simply drag the 2 links below to your bookmarks (bar), and click "Save Inputs" when you wish to save the contents of all the inputs, and click "Restore Inputs" and paste in the code you received from the "Save Inputs" bookmarklet to restore the contents of the input boxes on any given page.

Save Inputs

Restore Inputs

Source Code

The (pretty printed and decoded) source code for the two bookmarklets can be found below:

Save Inputs

(function () {
	var inputs = document.querySelectorAll("input, textarea"),
	savedata = [];
	
	for (var i = 0; i < inputs.length; i++)
	{
		savedata.push(inputs[i].value);
	}
	console.log(savedata);
	prompt("< input /  > and < textarea > savedata :", JSON.stringify(savedata));
})();

Restore Inputs

(function () {
	var savedata = JSON.parse(prompt("Savedata: ", "")),
	inputs = document.querySelectorAll("input, textarea");
	for (var i = 0; i < savedata.length; i++)
	{
		inputs[i].value = savedata[i];
	}
})();

Known Limitations

• The savedata code that the "Save Inputs" bookmarlet produces is not copied to the clipboard
• Strange things happen if you try to restore the contents of a set of input boxes from a savedata code from another page
• The script breaks if the input boxes on a page get changed

If you have a better version of these bookmarklets, please leave a comment below.

Found a spelling mistake? Got suggestion? Leave a comment below. Suggestions for improvement are always appreciated.

Lightsout and Syntax Highlighting

Hello!

I am releasing a javascript bookmarklet that allows you to select an element of any web page and put the rest of the page behind a screen.

To use it, simply drag the link below to your bookmarks bar and then click the bookmark when you want to use it. After it loads, you can then select the element of the page you want to focus, indicated by the blue border. You can also press 'A' to attempt to autoselect a flash object, while avoiding ads.

Lightsout

If you can't get the bookmarklet to load by dragging the link above to your bookmarks, copy and paste the following code into a new bookmark:

javascript: (function () { var lightsoutloading = document.createElement('div');lightsoutloading.id='SBRLlightsoutloadingmessagecontainer'; lightsoutloading.innerHTML = '<div id=\'SBRLlightsoutloadingmessage\' style=\'width:300px;height:auto;position:fixed;top:0;left:0;background:rgba(200, 200, 200, 0.8);border-radius:5px;z-index:2147483647;transition:all 0.5s;margin:10px;padding:10px;border:none;opacity:1.0;text-transform:none;min-height:0;min-width:0;font-faamily:sans-serif;bottom:auto;right:auto;font-size:12px;text-indent:0;line-height:normal;color: black;text-decoration:none;clip:auto;font-style:normal;font-variant:normal;font-weight:normal;max-height:none;max-width:none;direction:ltr;word-spacing:normal;visibility:visible;text-shadow:none;\'>Loading lightsout...</div>'; document.body.appendChild(lightsoutloading); var jsCode = document.createElement('script');jsCode.setAttribute('src', 'https://starbeamrainbowlabs.com/bookmarklets/lightsout/lightsout.js');document.body.appendChild(jsCode);}()););

Since this is a javascript bookmarklet, there are probably websites that this doesn't work with. If you stumble across one of these websites, leave a comment below and I will look into it.

I am also trialing a new syntax highlighter along with this post! It is possible that the site may not work as expected during this trial period.

Edit: Testing complete! This blog now has code syntax highlighting enabled thanks to PrismJS.