Creating a Simple Bookmarklet
In this quick video tutorial we'll show you what a bookmarklet is, and how you'd go about to create one.
What you'll Learn
- What a Bookmarklet is
- How to create a simple Bookmarklet
Hello and welcome to the Creating a Simple Bookmarklet screencast. In this quick screencast we'll show you what a bookmarklet is, and you how'd to create one.
What is a Bookmarklet?
Bookmarklets come in all shapes and sizes and perform a wide variety of functions, such as content manipulation, browser manipulation and even games.
Today we're going to create a bookmarklet to resize a browser window to a 1280 by 720 pixel resolution. We'll call it 720pify. We use something similar to resize our browser windows when capturing our screencasts. One click and the browser is re-sized, and ready for capturing.
Let's create an HTML file. It doesn't matter what the name is, it's just somewhere to put our link.
Within this, let's create a link with nothing for the
Let's do an alert saying
As you can see, an alert appears.
While we're not going to declare or use any variables in this tutorial, it's best to wrap our code in an anonymous function.
As you can see, the alert still appears.
Now for the 720pifying code. We need to call the
resizeTo method on our
window. It takes two parameters: width, and height. By the way, the
resizeTo method doesn't work in Chrome or Opera. But Firefox, Internet Explorer and Safari should all be fine.
Let's press this link and see what happens. Just as expected, it resizes our window!
Now, we can drag this link into our bookmarks bar.
When we visit another website and press the
And that's how to create a bookmarklet.
Bookmarklets with small amounts of code are easily managed in-line. However, you may want to write more complex code that would be better to write in an external file. So we plan on doing some follow-up bookmarklet screencasts, on creating more complex bookmarklets that incorporate external sources and jQuery. If there's anything you'd like to see covered in these follow-up screencasts, please let us know in the comments on Screencasts.org.
Thanks for watching! Subscribe to our RSS feed, follow us on Twitter, and please leave any questions, comments or suggestions for new screencasts in the comments below. If you like our videos, and think your friends, followers or colleagues would benefit from seeing them, please feel free share via any of the links below the video. We really appreciate your support.
Help support Screencasts.org by purchasing the Screencasts iPhone and iPad apps, available through the App Store and iTunes. You can also donate directly via PayPal in the side bar. Thanks in advance for helping us share this content.
See you next time!