-
-
Save madrobby/934008 to your computer and use it in GitHub Desktop.
// tweet-sized, and does (approximately) the same thing | |
var t=document.all,l=t.length,w='-webkit-trans';while(l--)t[l].style.cssText+=w+'ition:all,20s;'+w+'form:rotate('+Math.random()+'rad)' |
i=-1,d=document.querySelectorAll('div'),w='-webkit-trans';
while(d[++i])d[i].style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
is my shortest. 145char. still just divs.
the all,
in transitions is optional, it turns out.
changing to doc.all and..
i=-1,d=document.all,w='-webkit-trans';while(d[++i])d[i].style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
// vs yours..
var t=document.all,l=t.length,w='-webkit-trans';while(l--)t[l].style.cssText+=w+'ition:all,20s;'+w+'form:rotate('+Math.random()+'rad)'
wooo
for posterity's sake.. here was the original code from thomas:
[].slice.call(document.getElementsByTagName('div')).forEach(function(e){e.style.cssText+='-webkit-transition:all,20s;-webkit-transform:rotate('+Math.random()+'rad)'})
@paulirish:
one char shorter:
i=-1,d=document.all,w='-webkit-trans';while(e=d[++i])e.style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
Nice! :) — I kind of consider removing the "var" bad style (so it can be wrapped), but in this case it's probably ok to do it.
And yes, WebKit only applies transformations to block-level elements, so the document.all is a pretty good shortcut.
@joside gosh i love assignments inside conditionals. nice. :)
One less char:
i=0,d=document.all,w='-webkit-trans';while(e=d[i++])e.style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
How about:
i=-1,w='-webkit-trans';while(e=document.all[++i])e.style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
@119 characters
i=0,w='-webkit-trans';while(e=document.all[i++])e.style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
for(i=0,s='-webkit-trans';;)document.getElementsByTagName('div')[i++].style.cssText+=s+'ition:20s;'+s+'form:rotate('+Math.random()+'rad)'
Only on div as the original. 137char !!! tweeted !!!! :-)
But I use error recovery from webkit... this will not work in other browsers... :-(
Does only divs as the original but has errors on length and item properties:
w='-webkit-trans';a=document.querySelectorAll("div");for(e in a)a[e].style.cssText+=w+'ition:all,20s;'+w+'form:rotate('+Math.random()+'rad)'
116 chars:
for(i=0,w='-webkit-trans';e=document.all[i++];)e.style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
Ooh, using 2ag's for loop but with querySelectorAll gives 134 chars and only divs (but still the error)
for(i=0,s='-webkit-trans';;)document.querySelectorAll("div")[i++].style.cssText+=s+'ition:20s;'+s+'form:rotate('+Math.random()+'rad)'
for(i=0,w='-webkit-trans';e=document.all[i++];)e.style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
Edit : oops, same idea as @jedisct1 :)
s='-webkit-trans';document.styleSheets[1].addRule('div',s+'ition:20s;'+s+'form:rotate('+Math.random()+'rad)')
Just an experiment with 109 chars, no errors for me but every div will rotate by the same value
Using thomas's last proposal + querySelectorAll from marcheilligers and we have 139 characters ! and no errors :-)
i=-1,w='-webkit-trans';while(e=document.querySelectorAll('div')[++i])e.style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
137 chars, only divs, no errors, based on @jedisct1 loop with querySelectorAll
If I could save one more char somewhere the var could go back in :-(
for(i=0,w='-webkit-trans';e=document.querySelectorAll("div")[i++];)e.style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
And starting i to 0 and i++ in place of ++i : 137 characters. Still no errors.
i=0,w='-webkit-trans';while(e=document.querySelectorAll('div')[i++])e.style.cssText+=w+'ition:20s;'+w+'form:rotate('+Math.random()+'rad)'
w="-webkit-trans";i=0;while(e=document.querySelectorAll("div")[i++])e.style.cssText+=w+"ition:20s;"+w+"form:rotate("+i/10+"rad)"
109: like @joside's but with *
instead of div
s='-webkit-trans';document.styleSheets[1].addRule('*',s+'ition:20s;'+s+'form:rotate('+Math.random()+'rad)')
Edit:
Not sure where the 20s came from but 9s looks just as good:
s='-webkit-trans';document.styleSheets[1].addRule('*',s+'ition:9s;'+s+'form:rotate('+Math.random()+'rad)')
I think @joside has won this game.
@marcheiligers : what if there is actually not any document.styleSheets ?
Should be able to get it to work in Opera with '-o-trans'
, which would shave 5 chars but I can't get it to work :-(. Means you loose 1% of browser market share though.
[].map.call(document.all,function(e,s){s='-webkit-trans';e.style.cssText+=s+'ition:20s;'+s+'form:rotate('+Math.random()+'rad)'})
Array.prototype.slice.call(document.all).forEach(function(e,s){s='-webkit-trans';e.style.cssText+=s+'ition:20s;'+s+'form:rotate('+Math.random()+'rad)'})
n=document.getElementsByTagName('div');m=n.length;o='-webkit-trans';while(--m)n[m].style.cssText+=o+'ition:all,20s;'+o+'form:rotate('+Math.random()+'rad)'
//hui, madrobby had nearly the same idea ;-)