pages: 1 2 1-24 of 44 entries in category 'bookmarklets'

Flickr view big bookmarklet 

I wrote this little bookmarklet to help me instantly grab the large/original version of any Flickr photo. Funnily enough, because of Flickr's consistent filenaming scheme, it also works for photos where the See different sizes option normally remains hidden:

view big (gets 1024px version; should work for most photos)

view original (gets full version as uploaded; works for photos pre-March 2007)

Drag the link above to your Bookmarks Toolbar (or right click, Add to Favorites), then click it when viewing a single Flickr photo page.

Here's the formatted source code, if you're into that sorta thing:

for (m in M=document.getElementsByTagName('img'))
{
  s = M[m].src;
  if (s && s.match(/static/) && !s.match(/_s|buddy/))
  {
    void(window.open(s.replace('.jpg','_o.jpg'),'_self'));
    break;
  }
}

1. posted by Ivan at 15:46 on October 28, 2005

wow very smrt and handy

2. posted by Nick at 16:19 on October 28, 2005

Thanks for sharing this!

3. posted by Ruben at 17:46 on October 28, 2005

You sneaky hacker! ;-)

4. posted by Konstantinos at 01:06 on November 08, 2005

Very nice! Can it be modified to work for PNGs as well?

5. posted by kwota.net,chris,chris at 02:29 on November 03, 2006

I call it Bigr. Awesome.

6. posted by hccnet.nl,r.j.m.vermeulen,r.j.m.vermeulen at 10:23 on January 18, 2007

hi MILO
I saw your photos
PaRob

7. posted by francis at 00:11 on February 06, 2007

this is really great i can use this on pc with windows
but with osx on my mackbook it dont work ;(.

8. posted by juice at 01:56 on March 07, 2007

Doesn't seem to work under FF2 in Windows :-(

9. posted by James at 14:13 on March 07, 2007

If you replace (s.replace('.jpg','_o.jpg') with (s.replace('.jpg','_b.jpg') rather than getting the original you can view the large version (1024x800).

Flickr have added a security feature to help protect the original.

10. posted by Milo at 14:28 on March 07, 2007

Good point James. For the time being I've just split the bookmarklet into two version: one for _o and one for _b.
add a comment
New bookmarklet: counters
(drag to Links-bar or right-click to Add to Favorites)

Tested in IE6 and Firefox. For every mouseclick, a small [1], [2], [3] incrementing counter will appear. Handy if you want to easily count the number of times something occurs on a page, such as the number of films you've seen of a specific IMDb actor/director (which prompted this idea in my case).
read more »

1. posted by Mathieu 'P01' HENRI at 10:01 on June 30, 2005

Aside drawing yellow moustaches on a page, what kind of use can you make of it ?

2. posted by Milo at 11:05 on June 30, 2005

Well, count stuff, obviously :)
Now I know I've seen 23 Susumu Terajima films... http://imdb.com/name/nm0855398/

3. posted by Milo at 11:07 on June 30, 2005

Also handy for finding out how many of the top 250 movies you have seen: http://imdb.com/chart/top

4. posted by Mathieu 'P01' HENRI at 15:37 on June 30, 2005

Lousy me, I thought of something slightly beyond simply counting stuffs :p

Like adding a note.

5. posted by Milo at 15:40 on June 30, 2005

Something like this? (Try the 'notes' link above)
I'd expand it with the option to edit and move current notes, but I'm sure somebody else has already built this...
:)

6. posted by Mathieu 'P01' HENRI at 18:15 on June 30, 2005

It'd be cool to have the numbers, and that the note appear on hover of them. Gosh, why am I at work while I could fiddle on the bookmarklet :p

But yeah, you are certainly re-inventing the wheel.

7. posted by Mathieu 'P01' HENRI at 15:04 on July 01, 2005

add a comment
Update 2007-02-05:
- since the activation of the new Metafilter url scheme, this bookmarklet is broken; I'm working on a new version :)


Bookmarklet:
- detect deleted Metafilter threads
(update 2006-01-15: now also works for Ask Metafilter)

Drag the link above to your browser's Links toolbar and click it while viewing the Metafilter front page (or one of the archived months); this will open up a new window with links to recently deleted threads (works by detecting the gaps in the sequence of thread ids). Tested in Firefox and IE6.

[Inspired by this MetaTalk thread]
read more »

1. posted by dab at 01:29 on August 06, 2004

Clever toy - thanks!

2. posted by Armoured-Ant at 19:09 on August 06, 2004

All I get is a popup with

Deleted threads:

in it.

3. posted by ericville at 03:37 on August 07, 2004

niiice! very clever, indeed ;)

Armoured-Ant: double check that you're executing the bookmarklet from the same browser window that you have MetaFilter pulled up on- i got the same thing when i tried it the first time.

4. posted by Dave at 17:56 on August 10, 2004

Don't all these show up in the RSS feed anyway?

5. posted by slart at 03:33 on August 11, 2004

works in safari too, thanks!

6. posted by Jeblis at 09:27 on July 27, 2006

Neat script. Thanks for the update!

7. posted by Captain Science at 22:35 on February 25, 2007

Can't wait for the new version!

8. posted by rider at 02:58 on May 02, 2007

Here's a hacked version that works with the new Url scheme (in firefox...not well tested...use at own risk)

javascript:void(A=document.getElementsByTagName('a'),N=[],M=[],f=''); for(i=0; i<A.length; i++){ void(h=A[i].href,k=h.match(/\d{5}/)); if(k > 10000 && h.indexOf('user') ==-1 && h.indexOf('#')==-1 && A[i].parentNode.tagName.toLowerCase()=='span'){ void(N[N.length]=k,M[k]=1)} } for (i=N[0]; i>N[N.length-1]; i--) { if (!M[i]) f += '<a target=_blank href=http://'+location.host+'/mefi/' +i+'>'+i+' </a>\n'; } void((W=window.open()).document.write('Deleted threads: ' + f)); void(W.document.close());
add a comment

bookmarklets voor webdesigners 

Naar Voren - bookmarklets voor webdesigners - my second Naar Voren article has been published! (the first one being de kunst van minimaal coderen, which coincided with the 5K contest last year.) Those of you that can't read Dutch might want to scroll down a couple of pages, where you'll find a big list of handy bookmarklets.

I quickly thought up a new bookmarklet to use as an example in the article; as it turns out, it's pretty handy:
count used tags (drag to Links-bar)

The other article in the current edition is Breng detail aan in je markup by Anne van Kesteren. Coincidentally we both refer to Simon Willison in our articles... :)

1. posted by Morg at 16:39 on November 03, 2003

Very Nice!

2. posted by low at 18:42 on November 03, 2003

Well done!

3. posted by P01 at 06:42 on November 04, 2003

I like your 'count used tags' favelet. I can't figure how it can be usefull unless it showed the number of opening & closing tags, but it's funny.

4. posted by Ruben at 08:05 on November 04, 2003

Mijn complimenten, Milo. Ik heb er ook een aantal collega's blij mee kunnen maken :-)

5. posted by milov at 10:45 on November 04, 2003

P01: I like using it for testing tag-soupiness of a page. And some numbers can be pretty surprising ('277 a-tags? wow!')

6. posted by JW at 10:52 on November 05, 2003

Added a few new bookmarklets to my bookmarklet bar, the others, I already had.

Good article though.

7. posted by Jim at 20:40 on December 27, 2003

nice article

8. posted by Jim at 20:41 on December 27, 2003

nice article
add a comment
New bookmarklet:
!grid (drag to Links-bar)

Click once to overlay the current page with a div containing a 50x50 grid pattern. Click again to hide. Should be handy for testing alignment, quick dimension estimates, etc. Tested in IE6 and Firebird 0.7.

(Suggestions for better grid patterns are welcome; grid9.gif looks OK here but looks a bit iffy on lighter backgrounds.)

Update: here's a new version using a different grid pattern, having alternating bright and dark pixels per P01's suggestion, and without the inner 10x10 lines:
!grid2

1. posted by Fidel at 23:51 on October 26, 2003

Thats tight.

2. posted by rj at 10:47 on October 27, 2003

I think I feel an article...

3. posted by JQN at 20:43 on October 27, 2003

This is great for measuring stuff! Up untill now I had a hand made paper tape measurer with 50px units... truly low tech, but handy nonetheless.

4. posted by P01 at 23:06 on October 27, 2003

Everyone should have a look at the Ruler favelet @ centricle ( http://centricle.com/tools/favelets/ )


milov: To enhance the visibily, you could alternate bright and dark pixels on the lines of the grid pattern.

JQN: wow, using a paper tape is so roots. I put some stickytape on the side the monitor of my Atari to see how much cpu time I had to remove to fill a full Vertical BLank. ^__^

5. posted by JQN at 23:40 on October 27, 2003

The Ruler's nice! I had no idea this could be done... I'm such a n00b.

6. posted by palla at 10:12 on October 28, 2003

cool...

7. posted by YUDHI PRSETYO at 07:11 on November 18, 2003

ITS JUST NOTES WHAT THERE'S A ANOUCEMENT TO INTRODUCE OF hOW WHEN i GET THE COSTEMER HAD INTERSTED
add a comment
Show Classes and IDs bookmarklet - loads a stylesheet that uses (non-IE-compatible) css attribute selector types and the :before pseudo type to add little coloured labels to each page element, indicating the class or id. [via webgraphics]

1. posted by Ruben at 20:00 on September 10, 2003

window.content.document is null or not an object -> it indeed doesn't work in IE (had to test :-))

2. posted by milov at 20:26 on September 10, 2003

The main reason it won't work is that IE doesn't understand element[attr=""] and :before css rules. See the stylesheet:
http://markl.f2o.org/utilities/show_class_id.css

It could possibly be made to work in IE by writing a loop that checks all the elements for id and class.

3. posted by bas at 22:32 on September 10, 2003

i dont like writing code for id's. why are there so little examples for classes...
This one doesn't show such code either...
add a comment
!top (drag to Links-bar)

A bookmarklet simulating how I would like the Home key to behave in browsers: press once to jump to top of page, then press again to jump back to where you were.

I've already found this to come in quite handy while reading various Metafilter threads, deciding halfway down the page I'd better check out the link people are talking about... :)

1. posted by paulmatthijs at 18:52 on May 25, 2003

too bad it won't work in opera7...

2. posted by Doug at 23:53 on June 24, 2003

That is so simple and useful. Thank you!

3. posted by HerbieHerb at 15:34 on December 04, 2003

It works great in Mozilla Firebird 0.6 & XP !! Thanx ...

4. posted by John at 20:49 on December 27, 2003

Thanks for the tool

5. posted by ACiDbaby at 00:32 on August 27, 2004

This bookmarklet is great and works in IE6 (WinXP SP1). Too bad it doesn't jump to previous in Maxthon (formerly MyIE2); a tabbed browser based on IE.

6. posted by therube at 04:56 on August 29, 2007

For whatever reason, I couldn't get it to work? It would go Home, but not back? Tried in SeaMonkey, Firefox, & IE7.

Anyhow, suggestion to add Bottom also.

So Top, Bottom, & [i]back[/i] in round-robin fashion.
add a comment
centricle : show specific elements - useful bookmarklet; prompts for an element name (such as A or DIV or whatever) and colour, then highlights each occurence of said element. [via web-graphics.com]

1. posted by Bill at 17:22 on March 27, 2003

What a great little bookmarklet! Thanks for pointing it out.
add a comment
Simon Willison: Image Drag bookmarklet - clever and fun to use! (but doesn't work in IE)
New bookmarklet: !usedcolors (drag to Links-bar)
This opens a new window with a listing of all hex colour values specified in the current webpage's source and in its stylesheets. Internet Explorer-only at the moment.

Remaining bugs:
- doesn't read stylesheets linked with "@import";
- mistakes entities like &#123; for colour values;
- doesn't detect colour values specified in words or in rgb() syntax;
- thinks #ffffff and #FFFFFF are two different colours.
read more »

1. posted by poi at 14:31 on January 08, 2003

that's an interresting bookmarklet you did. If all the bugs you mentionned could be fixed, it could be really helpful. It could be great to put the number of occurence of each color code

You might need to use some REGEX

Do you know of any size limit for a bookmarlet ? Whatever if there's small limitation, an IFRAME or a WINDOW.OPEN might do the trick to load some additionnal code ( as you did for your LINEDRAW bookmarklet )

2. posted by mados at 23:25 on January 08, 2003

Please replace the /href=".*"/ regex with /href="[^"]*"/ - that's a common error. Look for greedy/ungreedy in some manual. :-)

3. posted by Bob at 10:36 on January 09, 2003

Wow, very nice!

4. posted by kristoff at 20:27 on January 09, 2003

Not only nice, useful too!
Great work, Milo (yet again!)

5. posted by Nate at 23:04 on January 09, 2003

Hey, it even works in Safari!... at least for a second.. then it tries to load a page called "undefined", as if it were a page at the same site you used the bookmarklet on. If I knew anything about javascript or regex maybe I could have provided better feedback.

6. posted by Nate at 23:22 on January 09, 2003

There is probably a more direct workaround for Safari, but this one seems to work just fine:
Change:
window.open().document.write(w))
To:
window.open('','colors','height=200,width=200,left=80,top=80').document.write(w))

7. posted by Ben at 16:51 on January 10, 2003

This chunk of code:
(this.style.behavior = 'url(#default#homepage)
makes the bookmarklet think #DEFA is a color variable.

8. posted by Owentje at 22:50 on January 13, 2003

nice work..2 comments:

- it doesn't work on frames, maybe try searching one level deep into frames?
- it is case-sensitive, which means #ffffff and #FFFFFF are two different colours where they are not.

:)

9. posted by GTonini at 19:03 on May 26, 2003

I reworked the bookmarl - at least for IE/Mac. It nevigates thru each color element of the document, so it is very, very slow but accurate. Also built-in a name-to-hex color conversion (e.g. aqua=#00FFFF,...). It list also the position of the first occourrence of each color. All that withi 1kB code.

Here's the result on this page:
#000000 all[17] backgroundColor
#CCCCCC all[17] color
transparent all[18] backgroundColor
#888888 all[26] color
#AAAAAA all[27] color
#999999 all[42] color
#333333 all[532] backgroundColor
#FF6600 all[553] backgroundColor
#FFC8A4 all[553] borderBottomColor
#FFFFFF all[553] color
#666666 all[566] color

The code:javascript:
w='',j=0,C=new Array(),C['AQUA']='0FF',C['BLACK']='000',C['BLUE']='00F',C['FUCHSIA']='F0F',C['GRAY']='808080',C['GREEN']='008000',C['LIME']='0F0',C['MAROON']='800000',C['NAVY']='000080',C['OLIVE']='808000',C['PURPLE']='800080',C['RED']='F00',C['SILVER']='C0C0C0',C['TEAL']='008080',C['WHITE']='FFF',C['YELLOW']='FF0';
function g(n,m){
for(var i in n){
if(i.toLowerCase().indexOf('color')>=0&&n[i]!=''&&typeof(n[i])!='undefined'&&n[i].indexOf(' ')<0){
var V=n[i].toUpperCase(),W=(V.charAt(0)!='#'?('#'+C[V]):V),X=W.charAt(1),Y=W.charAt(2),Z=W.charAt(3);
W=(W=='#undefined'?n[i]:(W.length==4?'#'+X+X+Y+Y+Z+Z:W));
if(!C[W]&&W!='invert'){
w+=C[W]='<div style="border-left:20px solid '+W+'">&nbsp;'+W+' all['+m.sourceIndex+'] '+i+'</div>';
j++
}
}
}
}
function gC(m){
g(m,m);
g(m.currentStyle,m)
}
gC(document.body);
with(document.body){
for(i=0;i<all.length;i++){
if(all[i].nodeType!=3){
gC(all[i]);
}
}
}
if(j>0){
with(open('','iM','').document){
write('<body><h3>URL: '+this.location+'<br>Colors: '+j+'</h3><tt>'+w+'</tt></body>');
close()
}
}

10. posted by Bob at 09:08 on July 12, 2005

It finds unexisting colours, for example it finds #FF6600 just because someone mentioned it in the previous comment. Search the tags not the text...

11. posted by GTonini at 12:21 on December 19, 2006

Oh yes. I see the !usedcolors bookmarklet extracts colors from text! Bad idea. My bookmarklet above doesn't do that. The results posted upon running it in this page are no longer valid, since the CSS was changed after the test.
add a comment
Mados made a the5k.org Rank Finder bookmarklet.
SVG WhiteBoard - Armand of nokiko.com made an SVG bookmarklet similar to my vml-based !lineDraw bookmarklet.
Color Vision - by Cal Henderson - interesting, educational. [via 990000 and others]

Here's a bookmarklet solution if you quickly wanna see how dependant your design is on colour - works by applying the IE 'Gray' filter to the entire page body:

  !Gray (drag to Links-bar to easily apply it to any website)

1. posted by Kapp at 00:12 on March 12, 2002

black & white ;-)

2. posted by mados at 20:13 on March 12, 2002

I can see.

3. posted by scharf at 23:51 on January 06, 2006

very, very and lovely bookmarklet

cu scharf
add a comment
!oo - yep, more childish bookmarklets... click and see.
(IE-only)

1. posted by mrmessiah at 03:14 on January 29, 2002

too hoo hoo :)

2. posted by lombert.nl,paulmatthijs,paulmatthijs at 22:29 on January 29, 2002

tom, ok hob jo mos...?
add a comment
!forms (bookmarklet; drag to Links-bar)
This one loops thru and shows all form-actions and all input-names and values in the current page.
!classes (drag to Links-bar)

Clicking this bookmarklet shows a list of all class="..." params found in the current page, and indicates how often each class is used. Handy when cleaning stylesheets of unused .class definitions.

Update: fixed it to work in IE5 as well... ;-)

Update:
Here's a version that lists the classes in a new blank window, for easy selecting/copying to clipboard:
!classes in new win

1. posted by karma at 10:43 on January 17, 2002

thanks! (again)
add a comment
!cookies (drag to Links-bar; click to view list of cookies)

Wow, split() and join() are really quite useful - wish I'd discovered them sooner... Observe the simple source code of this bookmarklet:

javascript:void(alert(unescape(document.cookie.split('; ').join('\n\n'))));

1. posted by jeewee at 13:48 on January 16, 2002

kijk.. hier heb je wat aan!
add a comment
show comments bookmarklet - funky script that shows little exclamation marks to indicate html comments throughout the page. document.all.tags("!"), aha. [via scottandrew.com, who notes its cross-domain scripting potential]

1. posted by Jan! at 00:47 on August 28, 2002

All hail archive.org!

javascript:scBoolAddScript=true;for(i=0;i<document.scripts.length;i++){if(document.scripts[i].src.indexOf('showcomments')!=-1){scBoolAddScript=false;break;}}if(scBoolAddScript){scScript=document.createElement('script');scScript.src='http://web.archive.org/web/20010807033513/dbz.nu/x/showcomments/showcomments.txt';scScript.type='text/javascript';scScript.defer=true;void(document.getElementsByTagName('head')[0].appendChild(scScript))}else{scDoBookmarklet();}

2. posted by [unknown] at 17:21 on October 02, 2002

gj

3. posted by dfasdf at 08:04 on December 04, 2002

sdf
add a comment
Here we go, possibly the coolest bookmarklet ever(?):

  !lineDraw (drag to Links-bar)

An adaptation of Glen Murphy's clever js/vml linedraw at bodytag.org. The bookmarklet overlays a transparent iframe over the current page, pointing to milov.nl/code/linedraw.html, in which multiple lines can be drawn using the mouse. Handy for quick mockups and whatnot. Should also be helpful in preventing people from touching the screen during a presentation (beh, fingerprints).

IE6 required (maybe IE5.5 works too.)
Update: yep, also works in IE5.5.

1. posted by lok at 02:10 on November 20, 2001

ruling!

2. posted by kristoff at 13:08 on November 20, 2001

wat met equill dat er net de brui aan gegeven heeft, lijkt dit uitstekend!
work it, milo!

3. posted by 23JUL at 15:23 on November 20, 2001

Really Cool.
Waiting for the new comments system...;-)

4. posted by milov.nl,milo,milov at 15:31 on November 20, 2001

Well I am thinking about a script to quickly post hand-drawn entries; if our sysadmin gets the PHP GD module working, it should be possible to save the vml coordinates in a gif-image. Then I could do the same for the comments, but non-wacom users would be at a disadvantage of course.

5. posted by satis at 11:19 on November 21, 2001

ACE !!

6. posted by x at 19:45 on November 27, 2001

excellent.

7. posted by armand at 18:37 on March 26, 2002

Hey Milov, kon t niet laten hier is een svglinedraw bookmarklet
http://www.nokiko.com/svg/svg_whiteboard.htm

<a href="javascript:if(o=document.getElementById('ldf')){void(o.outerHTML='');}else{void(document.body.innerHTML+='
&lt;div id=&quot;sketch&quot; style=&quot;position:absolute; left:0px; top:0px; z-index:1; visibility:visible;&quot;&gt;&lt;embed wmode=&quot;transparant&quot;src=&quot;http://www.nokiko.com/svg/whiteboard.svg&quot; width=&quot;780&quot; height=&quot;1000&quot; type=&quot;image/svg+xml&quot;/&gt;&lt;/div&gt;
')}">SVG_WhiteBoard </a>
(drag to Links-bar)

8. posted by armand at 08:46 on March 28, 2002

hi Milov

try a different approach to make yer code faster

document.body.innerHTML = document.body.innerHTML + ...
which means the browser has to parse the complete document.body
again. Don't add to innerHTML, use
document.body.insertAdjacentHTML('beforeEnd', 'html here')
as that way the insertion is done much more efficiently.

Armand

PS: woking on a all browser version, think we should get that to work with Create Element

9. posted by bath.ac.uk,cs1spw,Simon at 00:06 on May 17, 2002

I'd kill for this in Mozilla. Also, how about a complementary bookmark for turning line drawing mode off? As it is I have to reload the page to get rid of the lines (and go back to being able to click on links) - a bookmark to get rid of the iframe and gpo back to standard navigation mode would be very useful.

10. posted by [unknown] at 12:53 on May 20, 2002

fdsfds

11. posted by interactiveguerrilla.com,handful,handful at 17:05 on May 21, 2002

Yeah, having a "GUI" to use like some 'draw' companion would be nice.
I have a 'Companion' bookmarklet done
Just gotta stick them together
=) I 'll post something soon!

12. posted by Carlos at 02:10 on May 23, 2002

This is one the greatest things I've ever seen. I don't know why I'm not saying the greatest at all. :-)

Simon, just click again on the !lineDraw button and the lines disappear.

Milov, how did you had such a great idea?

13. posted by tom at 15:09 on May 24, 2002

It seems to break Coolmenus 3.

14. posted by treaze at 10:30 on December 16, 2002

ohhhhhhhhhhh i love da sky

15. posted by x at 16:42 on January 29, 2003

I wonder if I can get it to print.

16. posted by yahoo.com,srturgut,Serdar at 11:00 on May 27, 2003

Great job, I'm also trying with VML and faced with some problems. I'm trying to draw lines between points collected by the mouse clicks. For this situation I'm using "line" element and the problem is that the points drawn does not seen at the position that I pointed with mouse. I use X=event.clientX and Y=event.clientY for the mouse position. Did you encounter this kind of problem? Thanks

17. posted by hotmail.com,black_energy69,lazy at 18:54 on October 18, 2005

hell yes

18. posted by Curious at 02:56 on March 23, 2009

Is there a way to use this locally? Without pointing to your website?

19. posted by DR at 20:06 on April 16, 2009

www.onemanga.com
add a comment

pages: 1 2  next »