Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Bookmarklets / Favelets / JavaScript Tools

Browser Enhancements

Bookmarklets / Favelets / JavaScript Tools

by  adam0101  Posted    (Edited  )
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.

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

Code: 
javascript:window.external.AddFavorite('javascript:void(t=document.getElementsByTagName("table"));for(j=0;j<t.length;i++){void(t[j].border="1")}','Borders On')

Dictionary
Description: Looks up the selected word on dictionary.com.

Code: 
javascript:window.external.AddFavorite('javascript:void(window.open("http://dictionary.reference.com/search?q="+document.selection.createRange().text))','Dictionary')

DOM Browser
Description: Explore the Document Object Model of any web page.

Code: 
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: Toggles the contenteditable attribute on or off so you can edit the page

Code: 
javascript:window.external.AddFavorite('javascript:void(document.body.contentEditable=(document.body.contentEditable=="true" ? false : 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.

Code: 
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.

Code: 
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

Code: 
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.

Code: 
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)">640x480<option value="self.resizeTo(800,600)">800x600<option value="self.resizeTo(1024,768)">1024x768</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.

Code: 
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.

Code: 
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)

Code: 
javascript:window.external.AddFavorite('javascript:void(window.open("javascript:document.open(\\\"text/plain\\\");document.write(opener.document.body.parentNode.outerHTML)"))','Show Derived Code')

For even more bookmarklets, search on [link http://www.google.com/search?hl=en&ie=UTF-8&q=bookmarklets]Google[/link].

Good luck!

Adam
http://adameslinger.blogspot.com//
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top