Refactor
:my
=>
'code'
Codes
Refactorings
Popular
Best
Submit
Spam
Account
Logout
Login
JavaScript doesn't seem to be activated, expect things to be ugly and sloppy!
More Jobs
Recent
Cheap ruby block templating
Bindings on caller
Initial script execution very slow and skewing results
suppress ERB newlines
Keeping the database clean
Arrays, loops, strings...
Similar virtual attributes and their getters/setter
Check type is XML Serializable
Serena Collage slideshow
Shortest regular expression for matching a subdomain.
Popular
Caching Methods
How to find max, min of three numbers?
Similar virtual attributes and their getters/setter
Shortest regular expression for matching a subdomain.
Arrays, loops, strings...
Cheap ruby block templating
Check type is XML Serializable
Bindings on caller
Apache log file sorting
Tab-Switching in jQuery
Pastable version of
ImageFlow - something like CoverFlow in Javascript
<div style="overflow:auto;border:solid 1px #ccc;background:#000;color:#F8F8F8"> <div class="section"> <span style="margin:0;padding:4px 6px;font-size:12px;float:right;">Javascript</span> <pre style="float:left;margin:0 10px;border-right:0;color:#666;">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116</pre> <pre class="sunburst"> <span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">/*</span> Set some variables <span style="color:#AEAEAE;font-style:italic;">*/</span></span> <span style="color:#99CF50;">var</span> current <span style="color:#E28964;">=</span> <span style="color:#3387CC;">0</span>; <span style="color:#99CF50;">var</span> target <span style="color:#E28964;">=</span> <span style="color:#3387CC;">0</span>; <span style="color:#99CF50;">var</span> timer <span style="color:#E28964;">=</span> <span style="color:#3387CC;">0</span>; <span style="color:#99CF50;">var</span> captionId <span style="color:#E28964;">=</span> <span style="color:#65B042;"><span style="color:#65B042;">"</span>i1<span style="color:#65B042;">"</span></span>; <span style="color:#99CF50;">var</span> captionTarget <span style="color:#E28964;">=</span> <span style="color:#65B042;"><span style="color:#65B042;">"</span><span style="color:#65B042;">"</span></span>; <span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">/*</span> Get width of the images div container in px <span style="color:#AEAEAE;font-style:italic;">*/</span></span> <span style="color:#99CF50;">function</span> <span style="color:#89BDFF;">windowWidth</span>() { <span style="color:#99CF50;">var</span> width <span style="color:#E28964;">=</span> <span style="color:#9B859D;">document</span>.<span style="color:#DAD085;">getElementById</span>(<span style="color:#65B042;"><span style="color:#65B042;">"</span>images<span style="color:#65B042;">"</span></span>).offsetWidth; <span style="color:#E28964;">return</span> width; } <span style="color:#99CF50;">function</span> <span style="color:#89BDFF;">step</span>() { <span style="color:#E28964;">if</span> (target <span style="color:#E28964;"><</span> current<span style="color:#E28964;">-</span><span style="color:#3387CC;">1</span> <span style="color:#E28964;">||</span> target <span style="color:#E28964;">></span> current<span style="color:#E28964;">+</span><span style="color:#3387CC;">1</span>) { <span style="color:#DAD085;">moveTo</span>(current <span style="color:#E28964;">+</span> (target<span style="color:#E28964;">-</span>current)/<span style="color:#3387CC;">3</span>); <span style="color:#9B859D;">window</span>.<span style="color:#DAD085;">setTimeout</span>(step, <span style="color:#3387CC;">50</span>); timer <span style="color:#E28964;">=</span> <span style="color:#3387CC;">1</span>; } <span style="color:#E28964;">else</span> { timer <span style="color:#E28964;">=</span> <span style="color:#3387CC;">0</span>; } } <span style="color:#99CF50;">function</span> <span style="color:#89BDFF;">glideTo</span>(<span style="color:#3E87E3;">x, newCaptionId</span>) { target <span style="color:#E28964;">=</span> x; <span style="color:#E28964;">if</span> (timer <span style="color:#E28964;">==</span> <span style="color:#3387CC;">0</span>) { <span style="color:#9B859D;">window</span>.<span style="color:#DAD085;">setTimeout</span>(step, <span style="color:#3387CC;">50</span>); timer <span style="color:#E28964;">=</span> <span style="color:#3387CC;">1</span>; } captionId <span style="color:#E28964;">=</span> newCaptionId; <span style="color:#99CF50;">var</span> caption <span style="color:#E28964;">=</span> <span style="color:#9B859D;">document</span>.<span style="color:#DAD085;">getElementById</span>(captionId); captionTarget.innerHTML <span style="color:#E28964;">=</span> caption.innerHTML; } <span style="color:#99CF50;">function</span> <span style="color:#89BDFF;">moveTo</span>(<span style="color:#3E87E3;">x</span>) { current <span style="color:#E28964;">=</span> x; <span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">/*</span> do stuff with the images div <span style="color:#AEAEAE;font-style:italic;">*/</span></span> <span style="color:#99CF50;">var</span> padding_left <span style="color:#E28964;">=</span> <span style="color:#9B859D;">document</span>.<span style="color:#DAD085;">getElementById</span>(<span style="color:#65B042;"><span style="color:#65B042;">"</span>imageflow<span style="color:#65B042;">"</span></span>).offsetLeft; <span style="color:#99CF50;">var</span> div <span style="color:#E28964;">=</span> <span style="color:#9B859D;">document</span>.<span style="color:#DAD085;">getElementById</span>(<span style="color:#65B042;"><span style="color:#65B042;">"</span>images<span style="color:#65B042;">"</span></span>); <span style="color:#99CF50;">var</span> top <span style="color:#E28964;">=</span> div.offsetTop; <span style="color:#99CF50;">var</span> width <span style="color:#E28964;">=</span> windowWidth(); <span style="color:#99CF50;">var</span> size <span style="color:#E28964;">=</span> width <span style="color:#E28964;">*</span> <span style="color:#3387CC;">0.5</span>; <span style="color:#99CF50;">var</span> biggest <span style="color:#E28964;">=</span> width <span style="color:#E28964;">*</span> <span style="color:#3387CC;">0.5</span>; <span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">/*</span> zIndex is the z-index in css = order of the layers (here images) <span style="color:#AEAEAE;font-style:italic;">*/</span></span> <span style="color:#99CF50;">var</span> zIndex <span style="color:#E28964;">=</span> div.<span style="color:#CF6A4C;">childNodes</span>.<span style="color:#CF6A4C;">length</span>; <span style="color:#E28964;">for</span> (index <span style="color:#E28964;">=</span> <span style="color:#3387CC;">0</span>; index <span style="color:#E28964;"><</span> div.<span style="color:#CF6A4C;">childNodes</span>.<span style="color:#CF6A4C;">length</span>; index<span style="color:#E28964;">++</span>) { <span style="color:#99CF50;">var</span> image <span style="color:#E28964;">=</span> div.<span style="color:#CF6A4C;">childNodes</span>.<span style="color:#DAD085;">item</span>(index); <span style="color:#E28964;">if</span> (image.<span style="color:#CF6A4C;">nodeType</span> <span style="color:#E28964;">==</span> <span style="color:#3387CC;">1</span>) { <span style="color:#99CF50;">var</span> z <span style="color:#E28964;">=</span> <span style="color:#9B859D;">Math</span>.<span style="color:#DAD085;">sqrt</span>(<span style="color:#3387CC;">10000</span> <span style="color:#E28964;">+</span> x <span style="color:#E28964;">*</span> x)<span style="color:#E28964;">+</span><span style="color:#3387CC;">100</span>; <span style="color:#99CF50;">var</span> xs <span style="color:#E28964;">=</span> x / z <span style="color:#E28964;">*</span> size <span style="color:#E28964;">+</span> size; <span style="color:#99CF50;">var</span> gna <span style="color:#E28964;">=</span> <span style="color:#3387CC;">100</span> / z <span style="color:#E28964;">*</span> biggest; <span style="color:#E28964;">if</span>((image.<span style="color:#CF6A4C;">width</span>) <span style="color:#E28964;">></span> (image.<span style="color:#CF6A4C;">height</span>)) { image.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">left</span> <span style="color:#E28964;">=</span> xs <span style="color:#E28964;">-</span> <span style="color:#3387CC;">67</span> / z <span style="color:#E28964;">*</span> biggest <span style="color:#E28964;">+</span> padding_left <span style="color:#E28964;">+</span><span style="color:#65B042;"><span style="color:#65B042;">"</span>px<span style="color:#65B042;">"</span></span>; image.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">height</span> <span style="color:#E28964;">=</span> gna <span style="color:#E28964;">+</span> <span style="color:#65B042;"><span style="color:#65B042;">"</span>px<span style="color:#65B042;">"</span></span>; image.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">width</span> <span style="color:#E28964;">=</span> <span style="color:#65B042;"><span style="color:#65B042;">"</span><span style="color:#65B042;">"</span></span>; } <span style="color:#E28964;">else</span> { image.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">left</span> <span style="color:#E28964;">=</span> xs <span style="color:#E28964;">-</span> <span style="color:#3387CC;">50</span> / z <span style="color:#E28964;">*</span> biggest <span style="color:#E28964;">+</span> padding_left <span style="color:#E28964;">+</span> <span style="color:#65B042;"><span style="color:#65B042;">"</span>px<span style="color:#65B042;">"</span></span>; image.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">width</span> <span style="color:#E28964;">=</span> gna <span style="color:#E28964;">+</span> <span style="color:#65B042;"><span style="color:#65B042;">"</span>px<span style="color:#65B042;">"</span></span>; image.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">height</span> <span style="color:#E28964;">=</span> <span style="color:#65B042;"><span style="color:#65B042;">"</span><span style="color:#65B042;">"</span></span>; } image.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">top</span> <span style="color:#E28964;">=</span> (width <span style="color:#E28964;">*</span> <span style="color:#3387CC;">0.35</span> <span style="color:#E28964;">-</span> image.<span style="color:#CF6A4C;">height</span>) <span style="color:#E28964;">+</span> top <span style="color:#E28964;">+</span> <span style="color:#65B042;"><span style="color:#65B042;">"</span>px<span style="color:#65B042;">"</span></span>; image.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">zIndex</span> <span style="color:#E28964;">=</span> zIndex; <span style="color:#E28964;">if</span> ( x <span style="color:#E28964;"><</span> <span style="color:#3387CC;">0</span> ) { zIndex<span style="color:#E28964;">++</span>; } <span style="color:#E28964;">else</span> { zIndex <span style="color:#E28964;">=</span> zIndex <span style="color:#E28964;">-</span><span style="color:#3387CC;">1</span>; } x <span style="color:#E28964;">+</span><span style="color:#E28964;">=</span> <span style="color:#3387CC;">150</span>; } } } <span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">/*</span> Main Function <span style="color:#AEAEAE;font-style:italic;">*/</span></span> <span style="color:#99CF50;">function</span> <span style="color:#89BDFF;">refresh</span>() { <span style="color:#99CF50;">var</span> width <span style="color:#E28964;">=</span> windowWidth(); <span style="color:#99CF50;">var</span> height <span style="color:#E28964;">=</span> width <span style="color:#E28964;">*</span> <span style="color:#3387CC;">0.35</span>; <span style="color:#99CF50;">var</span> images <span style="color:#E28964;">=</span> <span style="color:#9B859D;">document</span>.<span style="color:#DAD085;">getElementById</span>(<span style="color:#65B042;"><span style="color:#65B042;">"</span>images<span style="color:#65B042;">"</span></span>); images.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">height</span> <span style="color:#E28964;">=</span> height <span style="color:#E28964;">+</span> <span style="color:#65B042;"><span style="color:#65B042;">"</span>px<span style="color:#65B042;">"</span></span>; <span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">/*</span> Text on top through zIndex <span style="color:#AEAEAE;font-style:italic;">*/</span></span> captionTarget <span style="color:#E28964;">=</span> <span style="color:#9B859D;">document</span>.<span style="color:#DAD085;">getElementById</span>(<span style="color:#65B042;"><span style="color:#65B042;">"</span>captionTarget<span style="color:#65B042;">"</span></span>); captionTarget.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">top</span> <span style="color:#E28964;">=</span> images.offsetTop <span style="color:#E28964;">+</span> height <span style="color:#E28964;">+</span> <span style="color:#65B042;"><span style="color:#65B042;">"</span>px<span style="color:#65B042;">"</span></span>; captionTarget.<span style="color:#CF6A4C;">style</span>.<span style="color:#CF6A4C;">zIndex</span> <span style="color:#E28964;">=</span> <span style="color:#3387CC;">100</span>; <span style="color:#99CF50;">var</span> caption <span style="color:#E28964;">=</span> <span style="color:#9B859D;">document</span>.<span style="color:#DAD085;">getElementById</span>(captionId); captionTarget.innerHTML <span style="color:#E28964;">=</span> caption.innerHTML; <span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">/*</span> Call subFunction <span style="color:#AEAEAE;font-style:italic;">*/</span></span> <span style="color:#DAD085;">moveTo</span>(current); } </pre> </div> </div> <a href="http://refactormycode.com/codes/108-test" style="color:#fff" title="As seen on RefactorMyCode.com"><img alt="Small_logo" src="http://refactormycode.com/images/small_logo.gif" style="border:0" /></a>