Skip to content

{ Category Archives } jQuery

jQuery UI 1.8

Well, they released jQuery UI 1.8 two days ago, and now everything is broken. I understand why the changes were made, but it sure is inconvenient. Plugins and posts updated so far: timepickr widget tutorial extending widgets flexcal googlesearch and ajaxpopup textpopup and hebrewkeyboard And on top of that, chili stopped working with jQuery 1.4 [...]

Updating timepickr

Updated for jQuery UI 1.8 3/25/2010 I like Maxime Haineault's timepickr. But I found it was written for jQuery 1.2, and didn't trigger events correctly with the current jQuery. It also had more dependencies than I wanted, to the extent that the minified version is 49k large, and had some CSS quirks in Internet Explorer [...]

Copying jQuery UI styles and Detecting CSS Loading

So let's say I want to create elements that match a jQuery UI theme (in my case, I was using a <canvas> element and wanted to copy colors). I could try to parse the CSS file directly, but that runs afoul of the same-origin security problem (I use Google's CDN to get the jQuery UI [...]

Keyboard accesibility in flexcal

I added keyboard accessibility to flexcal, based on the AOL style guide. Tabbing into the trigger for a textpopup makes it pop. The focus remains on the input element and requires another tab to put the focus on the calendar (a bit awkward to require two tabs but I didn't want to have the input [...]

Getting flexcal to Work With the Theme Switcher

Just checking. No reason it shouldn't work with the jQuery UI themeswitcher. The slot machine animation has a white background, which looks off with some themes. The text color for the dates unfortunately is (by the CSS specificity rules) overridden by the blog's text color, so dark themes are near unreadable. $.ui.flexcal.subclass('ui.inlineflexcal', { _init: function() [...]

flexcal Slot Machine

Modified 2009-05-19 to use a simpler technique to make it inline. OK, one more flexcal transition, inspired by Stefan Petre's jQuery slot machine. I should have been balancing my checkbook, but my kids thought this was cooler. $('#slots').flexcal({ transition: function(o){ var pane = o.elements.eq(1-o.currSlide), origTable = pane.find('table'); o.elements.eq(o.currSlide).css({zIndex: 1}).animate({top: -o.$cont.height()}, 'normal', 'easeInBack'); pane.css({top: o.$cont.height(), zIndex: [...]

flexcal and cycle

Updated for jQuery UI 1.8 and cycle 2.81, but it doesn't work so well anymore The alert reader will notice that the parameters for the transition animation for my flexcal widget are the same as that used by Mike Alsup's cycle plugin. My hope was that I could use { transition: $.fn.cycle.next } and be [...]

Improving jQuery UI widget getters/setters

Right now UI widgets need to explicitly declare "getter" functions (methods that return information about the widget rather than manipulate it) with $.ui.widget.getter = 'gettermethod1 gettermethod2'. The reason is that most jQuery plugins are chainable: $(selector).widget('method').css('color','blue') executes method on each element matched, then css('color','blue') on each element. Some plugins and some uses of plugins instead [...]

New jQuery Widget: flexcal

Updated for jQuery 1.8 Just what the world needs—another date picker Download the code.

New Widgets: googleSearch and ajaxpopup

I made a jQuery UI widget (a subclass of textpopup) that hijaxes a Google search form to show the results in a popup box rather than on a new page. Google AJAX search returns only the top four results, so the popup box includes a link to the full search page. Download the code. Download [...]