jquery

For a complex Drupal node form I've been working on for flocknote, I have a relatively complicated image switching functionality that lets people change an imagefield on the node (either when creating a new one or editing an existing node), and once the imagefield is changed, some custom jQuery code will grab that image and display it in the form, for a very WYSWIYG-like experience (the node looks almost exactly the same when editing/adding as it does once the user saves the node).

One problem is that images can be arbitrarily high (though they're resized to 600px wide), and I can't easily get the height of the image through any traditional means. If I were grabbing an already-saved imagefield image, I could throw the image height into the JS settings for the page. However, getting a dynamically-added image's height/width values is surprisingly tricky using JavaScript, at least if you take a look around the web and try using many people's suggestions (which work great if the image was already loaded with the page's content, but not if the image is dynamically added, or if the image hasn't yet loaded on the page.

On one Drupal site I'm developing, there is an 'embed code generator' in one of the site's forms. This embed code capability is similar to Twitter's embeddable timeline widget, in that a user can select some parameters (colors, mostly), then some code (usually an iframe with the contents provided by an external site) is printed in a textarea, which the user can select, and paste into his own site's HTML.

To help the user in the task of selecting the code, the entire contents of the textarea or textfield is highlighted when the user clicks any part, which ensures that the user will get every last bit of code without having to select and drag his mouse around the text box (sometimes I've seen people missing part of a tag, which makes the embed fail to load). That's what we want to do, inside our own Drupal form.

First, in the drupal form itself (or via an hook_form_alter()), we need to attach a javascript file in our custom module (in this example, I assume you have a module called custom.module, and a js file named 'custom.select-helper.js' in your custom module's directory, inside a 'js' folder):

I spent the greater part of two hours trying to debug an Internet Explorer bug today. Basically, I wanted to get an image that I uploaded to have a caption applied through jQuery. I used the Image Caption module for Drupal to do this, and set it to grab the 'alt' text in a <span> underneath the image, and wrap both the image and caption inside another <span>, which would grab the float/alignment for the image, and use that to float it left or right (or neither).

Well, in Internet Explorer 6 and 7, the image would appear on its own line, as a block-level element. I tried everything short of throwing my computer against a wall to get this to work, but was unsuccessful. I finally went for broke and tried some thing so dumb that it couldn't possibly work—but it did.

I changed the order of the inline css properties in the script so the float would be applied before the "display: block" value. Bingo, IE works great!

Some things that I have to do to get things to work in Explorer... I hate you, Microsoft!!