Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


Browser Enhancements

Bookmarklets / Favelets / JavaScript Tools by adam0101
Posted: 24 Oct 03 (Edited 20 Sep 05)

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


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

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



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


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.


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')

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')

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)">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.


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')

For even more bookmarklets, search on Google.

Good luck!


Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close