Archive for October, 2007

My brother sent me a "salary survey" with one question, "Are you happy with your current salary," where the "No" button ran away from the mouse. I thought it might be useful for gag sites, so I created a jquery plugin that mimics that effect, at http://bililite.nfshost.com/blog/blogfiles/keepaway.html. It's easy enough to use, just $(selector).keepaway(options) ,with options of
  • jump: the distance to jump away from the mouse, in pixels; default 500
  • speed: the speed to move (passed intact to the animate plugin); default 'fast'
  • home: time to return to the starting position if nothing happens, in ms; default 1000
 Have fun!

Posted by Danny on October 28, 2007 at 9:18 pm under jQuery.
Comment on this post.

Please note: the CSS parser is complete and documented in this post
I had an idea to write a CSS parser to allow custom jQuery attributes, since a lot of the jQuery I use is more presentation than behavior, and the redesign of the YI website allows for switching stylesheets, which may require different plugins to be applied. My idea would be to allow something like:

div {
-jquery-round: 5;
-jquery-gradient: {from: '#008800', to: '#000088'}
}

But I never did anything about until Andy Kent developed JSS which does something similar for CSS selectors that a browser can’t handle but that jQuery can. His code also includes a cache for selectors that implements partial selector caching (thus div span img would also search the cache for div and div span as well). I emailed him back and forth a few times, and made some suggestions; my best css parser and selector cache are available here (look at the code and use Firebug to look at the console). I still haven’t got the custom jQuery stuff together yet, but the pieces may be useful right now.
Please note: the CSS parser is complete and documented in this post

Posted by Danny on October 19, 2007 at 2:48 am under jQuery.
5 Comments.

As I mentioned before, I don't have access to a modern version of Safari and when I pass an Apple store, I try to play with it and the site. Something always pops up to bite me. This time it was an improved version of my Hebrew keyboard, that I made into a popup, absolutely-positioned <div> instead of a separate page, using sprites for the keyboard button rollovers. Nice and elegant, but it means loading the <style> element with all those a:hover {background: 0 -150px}'s via Ajax as well. Just putting a <style> element in the loaded <div> worked fine in IE and Firefox, but today Safari wouldn't show any styles. Turns out Safari is technically right; <style>'s go in the <head>, not the middle of the <body>. That's a rule that doesn't make any sense, any more than requiring <script> elements to be limited to the <head> would. But such are the rules. I looked up a few ways to include a <style> element, but realized there's an easier way; I split the style into its own stylesheet and added a line to Javascript: $('head').append('<link type="text/css" href="/css/kb.css" rel="stylesheet" >'); before the $('<div id="keyboard-holder">').insertAfter('#q').load('/inc/keyboard.html'); // load via Ajax and now the style loads dynamically and easily. Luckily, jQuery handles identifying and executing <script> elements in Ajax'ed code, so I don't have to pull that out.

Posted by Danny on October 2, 2007 at 12:42 am under Web Design.
Comment on this post.