jquery

This is going to be a quick mind-dump, and hopefully it's helpful to someone. I swear, I have plans to go back through this blog and make things sensible to the sensible reader some day, but I never take/find the time :-p

I needed a good way to automatically resize a Colorbox popup to the size of the loaded IFRAME content. Colorbox itself provides the callbacks and methods to make this possible, so it was just a problem of calculating the dimensions of the IFRAME's content. The following code assumes that the IFRAME content is on the same domain as your parent page… this code won't work across domains.

The BODY tag, being a block-level element, automatically becomes 100% the width of the IFRAME. If the content of the BODY tag is wider or narrower than the initial IFRAME width (which, since we're trying to auto-calculate the width, it's a safe assumption that the width is different) we'll need to make the BODY tag the correct width before measuring it. I do this in the following code by floating the BODY tag, then removing the float after the measurement is finished.

I had to set up a checkbox replacement for the site http://www.reallysimplesurvey.com/sign-up, so I first went looking for a good replacement. I found one that I'd used before, but it required jQuery UI. Since I hate adding jQuery UI for "simple" tasks, and since trying to get jQuery UI working sanely in Concrete5 can be a bit of a trick, I decided to write my own (people who know me know it doesn't take much to convince me to rewrite Javascript just for kicks and giggles…).

I had some trouble with race conditions in IE, and I didn't spend too much time troubleshooting why, so the code might be sloppier than usual. Also, the only comments in the code at the moment are IE gripes, so my apologies :-p The use of double-class selectors means IE6 won't show when the checkboxes have keyboard focus, but all else should work without problem.

Please take it for a test spin and let me know how it works. This is the first release, so YMMV and feedback is welcome.

I'm toying with some code to reproduce a SELECT dropdown using jQuery and some CSS3. The default SELECT element is notoriously difficult to style, but also amazingly difficult to program in a manner that works properly across browsers. I've seen many different projects along the lines of what I've done here, but I finally found one that I liked :-p The original code is from the blog Janko At Warp Speed. I will continue to clean up this code, but for now it is provided without warranty or promise of any kind, so YMMV. For the record, have not even tested in IE yet. Click below for the demo page.

Update (2011-02-23)

I finally got around to adding OPTGROUP support for a project I'm doing, and I added a few examples showing how the code can be used for site navigation (UL-LI-A dropdown navigation, instead of using a SELECT with an "onchange" handler). My next set of goals is to add keypress support, figure out the best way to make sure the dropdowns always show the same value as the SELECT (even after a page refresh), and maybe add a few more display styles.

Update (2011-05-23)

I'm still doing work on this project (amazingly). I finally organized the CSS, moving it and the Javascript out of the HTML and into their own files. I also added a download archive and slapped a license at the top of each file (I've been using this code frequently and the license links back to this site). I plan on adding SELECT MULTIPLE and keystroke functionality for a project. I'm hoping ARIA support is not far behind.

I wanted a nice, almost 100% CSS styled layout for my Javascript tabs. So with the help of the CSS Gradient Generator I set about doing that. All the gradients and rounded edges are CSS3-based, with the exception of the gradients used by IE (PNGs generated by the aforementioned website). Please check out the demo, let me know what you think. I have a feeling some fixes will be necessary for IE6, but I'm getting there…

I am also struggling to add CSS3 drop shadows to the tabs. I'm not sure if there's a simple way to do it so the tabs don't overlap onto the area below the tab. If someone wants to take a swing at it, please let me know.

Hey, I have a new calendar in the works. I have all the essential working pieces written, and now the code just needs cleaned (pretty badly...). It's based off of the layout and code of Stefano Verna's "iCal-like Calendars". I modified his Coda popup bubbles code to make sure the bubble always displayed inside of the viewable area. I also added code to generate a calendar for the current month, display next/previous month, and add events on-the-fly.

My sloppy demo is up at http://stuffs.gatherage.com/jCal/. Enjoy.

After using the jQuery "live" function for a few months, I realized it'd be nifty to use switch in the event handler. Yes, this could be handled by a huge "if" statement, but don't you think you deserve something a little more elegant? Here's an example that extends the jQuery object.

A demo is available here. And remember, always use an event context when possible.