Bookmarklets – how they can be useful
Bookmarklets are little snippets of code that enhance your browser by adding new functionality. Any of the code below can be applied to any web page you are currently viewing.
If you have additional snippets you’d like to share, please send them to me and I’ll post them here.
How to Use Bookmarklets
1. Add the Tool to your browser by copying any of the URLs below into your Internet Explorer address bar and hitting enter.
2. When on any web page, apply any of the scripts below to the web page by selecting the code from your favorites menu.
JavaScript Tools
Borders On
Description: Sets all table border widths on the page to “1” so you can easily see the page layout
javascript:window.external.AddFavorite(‘javascript:void(t=document.getElementsByTagName(“table”));for(i=0;i<t.length;i++){void(t[i].border=”1″)}’,’Borders On’)
DOM Browser
Description: Explore the Document Object Model of any web page.
javascript:external.AddFavorite(“javascript:void(m=window.open());m.document.write(“<script>function x(s){var o=eval(s),b=”;for(v in o){b+='<tr><td>’+(typeof o[v]==’object’ && o[v]!=null?'<A HREF=javascript:top.x(“‘+s+(isNaN(v)?’.’+v:'[‘+v+’]’)+'”)>’+v+'</A>’:v)+'</td><td>’+(typeof o[v]==’unknown’?’_’:'<xmp>’+o[v]+'</xmp>’)+'</td></tr>’}fd=frames[0].document;fd.write(‘<h3>’+s+'</h3><table border=1>’+b+'</table>’);fd.close();}</script><frameset><frame></frameset>”);m.x(‘opener’)”,”DOM Browser”)
Edit Content
Description: Sets the contenteditable attribute to true so you can edit the page
javascript:window.external.AddFavorite(‘javascript:void(document.body.contentEditable=true)’,’Edit Content’)
Insert Symbol
Description: Pops up a window where you can choose a symbol. Once selected, the symbol is placed on your clipboard so you can paste it where ever you need it.
javascript:window.external.AddFavorite(‘javascript:void(window.open(“javascript:document.write(“Click symbol to copy to clipboard<form name=f><input name=t style=position:absolute;left:-300px><br>”);for(z=160;z<255;z++){document.write(“<a href=javascript:void(document.f.t.value=String.fromCharCode(“+z+”));document.f.t.select();void(document.execCommand(\”COPY\”));window.close()>”+String.fromCharCode(z)+”</a> “)}”,””,”width=300,height=300″))’,’Insert Symbol’)
Measure
Description: Puts the mouse’s coordinates in the status bar so you can measure things.
javascript:window.external.AddFavorite(‘javascript:void(document.body.style.cursor=”crosshair”);void(document.onmousemove=new Function(“window.status=”X:”+(window.event.x+document.body.scrollLeft)+”, Y:”+(window.event.y+document.body.scrollTop);”))’,’Measure’)
No onunload
Description: Blocks a website’s ability to pop-up a window when navigating away from their page
javascript:window.external.AddFavorite(‘javascript:void(document.body.onunload=””)’,’No onunload’)
Resize
Description: Allows you to resize your browser to popular resolution sizes without actually changing your resolution. Good for testing how your web page will look at different resolutions.
javascript:external.AddFavorite(‘javascript:void(m=window.open(“”,”m”,”height=30,width=150″));m.focus();m.document.write(‘<form><select onchange=”opener.eval(this[this.selectedIndex].value)”><option value=””><option value=”self.resizeTo(640,480)”>640×480<option value=”self.resizeTo(800,600)”>800×600<option value=”self.resizeTo(1024,768)”>1024×768</select></form>’)’,’Resize’)
Run Code Entered
Description: Pops up a textbox where you can enter JavaScript code that will be run against the current web page. For example, if you’re debugging your code and want to know what the current value of a variable is, you can enter “alert(variableName)” in the box.
javascript:external.AddFavorite(“javascript:void(m=window.open(“”,”m”,”height=400,width=350″));m.focus();m.document.write(‘<form><textarea name=t style=”width:100%;height:350px”></textarea><br><input type=button onclick=”opener.eval(this.form.t.value)” value=”Run code” style=”width:100%”></form>’)”,”Run Code Entered”)
Run Code Selected
Description: When you see a code sample on a page, you can select the code and click this bookmark to automatically write the code into its own window and run it.
javascript:window.external.AddFavorite(‘javascript:void(window.open(“javascript:document.write(opener.document.selection.createRange().text);document.close()”))’,’Run Code Selected’)
Show Derived Code
Description: Shows the run-time code of a page. (Good for debugging)
javascript:window.external.AddFavorite(‘javascript:void(window.open(“javascript:document.open(“text/plain”);document.write(opener.document.body.parentNode.outerHTML)”))’,’Show Derived Code’)
