INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

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!

*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.

Jobs

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

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 Google.

Good luck!

Adam
http://adameslinger.blogspot.com//

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

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