flipping typical - a way to explore the popular typefaces you have on your computer [via]
Interaction design • webdevelopment • web art • photography
117.milov.nl - a bit of fun with border-style: dashed;.
Exact rendering depends on browser model and window size. Warning: hypnotizing!
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:
){s=M[m].src; if(s && s.match(/static/) && !s.match(/_s|buddy/)){void(window.open(s.replace('.jpg','_b.jpg'),'_self')); break}}){kind=link}
){s=M[m].src; if(s && s.match(/static/) && !s.match(/_s|buddy/)){void(window.open(s.replace('.jpg','_o.jpg'),'_self')); break}}){kind=link}
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;
}
}
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).
There's been some talk (see Anne, CollyLogic) about it being possible to use the :visited pseudo-class and background-image urls to detect if a user has visited a particular link.
Luckily for Internet Explorer users, they are unaffected because IE doesn't support the [href=] selector. Unfortunately, there's another method that does work in IE and is even more dangerous...
A checklist of i.am/bald numbers I really should update since they don't work or no longer work in Mozilla Firebird (my default browser for over a year now):
10, 14, 20, 23, 25, 26, 28, 30, 31, 33, 34, 35, 36, 37, 39, 40, 42, 44, 45, 46, 49, 50, 51, 55, 56, 57, 62, 65, 66, 67, 69, 71, 72, 73, 74, 77, 79, 90, 92, 94, 95, 96, 97, 98, 99, 102, 108, 109, 112, 113.
Ben Nolan's non-link element hovering trick for Internet Explorer (that normally only allows :hover styles on links) is pretty handy, but what really impressed me about it is his way of integrating arbitrary Javascript functions into the stylesheet itself:
body {
background: url("
javascript:
document.body.onload = function(){
...custom js here...
}
");
}By specifying a rule like this in the browser's user stylesheet, it might even be possible to run a custom set of Javascript commands on opening of any visited website. (Although my brief attempt at making this work proved unsuccessful.) [via webgraphics]
The Javascript Raytracer has been expanded quite a bit since we last saw it... now you can even use it to build your own custom scenes (see the extensive Help-section).
svendtofte.com - max-width in Internet Explorer - using the IE expression() syntax to simulate the css max-width property, which works in Mozilla/Opera but not in IE.
DHTML Lemmings - Whaaa... Amazing entry for the GoT DHTML Contest. [via 2lmc spool]
Digital Web Magazine - Keep Javascript Simple - Peter-Paul Koch argues against external Javascript libraries, which often needlessly replace already quite compact-and-compatible DOM statements.
I could've probably moved a lot of iambald-code into a single DHTML library, but never really felt the need--more so after I gave up trying to support Netscape 4. Plus, I like the fact that visitors can simply View Source a page and see the whole code without having to go searching through separate .js files. [via paranoidfish.org]
ugly :(
document.myForm.myInput.value
document.someImage.src
pretty :)
document.forms['myForm'].elements['myInput'].value
document.images['someImage'].src
gamebutton arcade - tiny playable Javascript games contained within html form buttons! [via Boing Boing]
dhtml asciifire (IE4+) [by mados] - wow, check out the seemingly simple sourcecode. I like his trick for generating a custom array of characters:
char=' .:*sS#$'.split('');
instead of
char=new Array(' ','.',':','*','s','S','#','$');
I just added a little extra javascript for Internet Explorer users, to apply some handy filters to any photo featured on this page:
- Shift-click a photo: Rotate 90°, 180°, 270°;
- Ctrl-click a photo: Desaturate (remove colours);
- Alt-click a photo: Invert colours.
Try it with some of the photos below! You can even combine filters. All this by setting one global document.onclick event (no need to add specific tags to each <img>-tag). View Source to see how it's done.
How to extend the convenience of being able to shift-click links and open them in a new window to forms:
<form onsubmit="this.target=event.shiftKey?'_blank':'_self'">
Try it with the search-form (bottom of menu column): holding shift while submitting will open the search results in a new window.
Optimizing Javascript for speed - detailing some clever and interestingly named techniques: Loop Unrolling, Reverse Loop Counting, Loop Flipping and something called Duff's Device. [via scottandrew.com]
Wow, creating something interesting in under 256 bytes (for the 256b.htm compo) isn't easy... Here's one of the things I had to scrap: a random inkblot generator, way too big at 384 bytes... ;)
This one uses the XBM img src technique to generate a 2-bit image at run-time (example 1, 2). Could try rendering it with divs instead, but that'll probably cause quite the browser-freeze.
Another new thing: comments are now loaded by Javascript and appear inline in the current page. So you don't have to leave the page to read the comments for a particular entry (IE-only, right now).
Reference: PPK's Import XML Document tutorial.
Impressive self-sorting DHTML table by svendtofte.
Include the following at the top of your Javascript:
cookies = [];
for (c in C=document.cookie.split('; '))
{cookies[(cs=C[c].split('='))[0]]=unescape(cs[1]);}Now you can access your cookies like this:alert(cookies['myCookie']);
Please don't spawn popup-windows like this:
<a href="javascript:window.open('foo.html');">
or this:
<a href="#" onclick="window.open('foo.html');">
rather, use:
<a href="foo.html" onclick="window.open(this.href);return false;">
benefits:
- statusbar still indicates where you're going
- non-js users (and search-engines) still end up at the correct page
- current page doesn't jump to top (faux-anchor '#' evil)
- shift- and right-click options still open the correct page
Update:
Apparently using return false; in the href can mess up some browser's popup-blocking, so watch out if you care about that (haven't noticed it myself, but then again, I almost never use popups). [via]
Shortest syntax for preloading images in Javascript (in answer to a question by Wouterd yesterday):
for(i in ['larry.gif','moe.gif',
'curly.gif'])(new Image()).src=M[i];