| Andrew Cooke | Contents | Latest | RSS | Twitter | Previous | Next

C[omp]ute

Welcome to my blog, which was once a mailing list of the same name and is still generated by mail. Please reply via the "comment" links.

Always interested in offers/projects/new ideas. Eclectic experience in fields like: numerical computing; Python web; Java enterprise; functional languages; GPGPU; SQL databases; etc. Based in Santiago, Chile; telecommute worldwide. CV; email.

Personal Projects

Lepl parser for Python.

Colorless Green.

Photography around Santiago.

SVG experiment.

Professional Portfolio

Calibration of seismometers.

Data access via web services.

Cache rewrite.

Extending OpenSSH.

Last 100 entries

Flexible Muscle-Based Locomotion for Bipedal Creatures; SQL Performance Explained; The Little Manual of API Design; Multiple Word Sizes; CRC - Next Steps; FizzBuzz; Update on CRCs; Decent Links / Discussion Community; Automated Reasoning About LLVM Optimizations and Undefined Behavior; A Painless Guide To CRC Error Detection Algorithms; Tests in Julia; Dave Eggers: what's so funny about peace, love and Starship?; Cello - High Level C Programming; autoreconf needs tar; Will Self Goes To Heathrow; Top 5 BioInformatics Papers; Vasovagal Response; Good Food in Vina; Chilean Drug Criminals Use Subsitution Cipher; Adrenaline; Stiglitz on the Impact of Technology; Why Not; How I Am 5; Lenovo X240 OpenSuse 13.1; NSA and GCHQ - Psychological Trolls; Finite Fields in Julia (Defining Your Own Number Type); Julian Assange; Starting Qemu on OpenSuse; Noisy GAs/TMs; Venezuela; Reinstalling GRUB with EFI; Instructions For Disabling KDE Indexing; Evolving Speakers; Changing Salt Size in Simple Crypt 3.0.0; Logarithmic Map (Moved); More Info; Words Found in Voynich Manuscript; An Inventory Of 3D Space-Filling Curves; Foxes Using Magnetic Fields To Hunt; 5 Rounds RC5 No Rotation; JP Morgan and Madoff; Ori - Secure, Distributed File System; Physical Unclonable Functions (PUFs); Prejudice on Reddit; Recursion OK; Optimizing Julia Code; Cash Handouts in Brazil; Couple Nice Music Videos; It Also Works!; Adaptive Plaintext; It Works!; RC5 Without Rotation (2); 8 Years...; Attack Against Encrypted Linux Disks; Pushing Back On NSA At IETF; Summary of Experimental Ethics; Very Good Talk On Security, Snowden; Locusts are Grasshoppers!; Vagrant (OpenSuse and IDEs); Interesting Take On Mandela's Context; Haskell Cabal O(n^2) / O(n) Fix; How I Am 4; Chilean Charity Supporting Women; Doing SSH right; Festival of Urban Intervention; Neat Idea - Wormholes Provide Entanglement; And a Link....; Simple Encryption for Python 2.7; OpenSuse 13.1 Is Better!; Little Gain...; More Details on Technofull Damage; Palmrest Cracked Too....; Tecnofull (Lenovo Support) Is Fucking Useless; The Neuroscientist Who Discovered He Was a Psychopath; Interpolating Polynomials; Bottlehead Crack as Pre-amp; Ooops K702!; Bottlehead Crack, AKG K701; Breaking RC5 Without Rotation; Great post thank you; Big Balls of Mud; Phabricator - Tools for working together; Amazing Julia RC5 Code Parameterized By Word Size; Chi-Square Can Be Two-Sided; Why Do Brits Accept Surveillance?; Statistics Done Wrong; Mesas Trape from Bravo; European Report on Crypto Primitives and Protocols; Interesting Omissions; Oryx And Crake (Margaret Atwood); Music and Theory; My Arduino Programs; Elliptic Curve Crypto; Re: Licensing Interpreted Code; Licensing Interpreted Code; ASUS 1015E-DS03 OpenSuse 12.3 SSD; translating lettuce feature files into stub steps files; Re: translating lettuce feature files into stub steps files; A Tale of Two Psychiatrists; The Real Reason the Poor Go Without Bank Accounts; The Rational Choices of Crack Addicts

© 2006-2013 Andrew Cooke (site) / post authors (content).

Easy Slide-in Menus using YUI 3

From: andrew cooke <andrew@...>

Date: Mon, 26 Jul 2010 00:40:07 -0400

YUI 3 is amazing.  It looks terrifyingly complex, but once you get into it,
you can do complex things trivially.  I use jQuery at work, and in comparison,
YUI 3 feels like it was written by software engineers rather than people
hacking web pages.

For example, here's how to make a menu that shows as a tab on the right-hand
side of the page that "zooms in" (to the left) when you mouse-over.


First, place the menu in a div in the HTML:

  <div class="menu" id="menu-1">
  <img src="menu-icon-small.png"/>
  <ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Foo</li>
  <li>Bar</li>
  </ul>
  </div>


Next, add some CSS (probably ina separate stylsheet) so that the icon is on
the left, and will be visible, but the rest of the div is off the page to the
right:

ul {
  margin: 10px;
  margin-left: 40px;
}
li {
  list-style-type: none;
  list-style-position: outside;
  margin-top: 4px;
  margin-bottom: 4px;
}
div.menu {
  position: fixed;
  right: -278px;
  width: 300px;
  border: 1px solid #c0c0c0;
  border-right: none;
  -moz-border-radius: 4px;
  background: white;
}
div#menu-1 {
  top: 50px;
}
div.menu img {
  margin: 1px;
  float: left;
}


Import the YUI magic (in the HTML header).

  <script type="text/javascript"
  src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js"></script>

and define the animation:

  <script type="text/javascript">
  YUI().use('event-mouseenter', 'console', 'anim', function(Y) {
      /* new Y.Console().render(); */
      var open = new Y.Anim({node: '#menu-1', to: {right: 0},
			     easing: Y.Easing.easeOut});
      var close = new Y.Anim({node: '#menu-1', to: {right: -278},
			     easing: Y.Easing.easeIn});
      Y.on("mouseenter", function (e) {open.run();}, "#menu-1");
      Y.on("mouseleave", function (e) {close.run();}, "#menu-1");
  });
  </script>

and that's it!


The script above sets up the events and defines animations for the div so that
it moves into and out of sight.  The "Easing" part even makes it move in a
"natural" manner (it slows down as it extends fully).

Andrew

Comment on this post