loonyblurb

I had an interesting issue where in ie7, the element that I was displaying using the jQuery slideToggle function, would seem to jump out of place once the animation had finished.

As I was displaying a list, I first assumed that in ie7 the element was adding in the default list margins and ignoring my css. However no amount of fiddling with adding css margins in the slideToggle callback function seemed to sort the problem.

Googling allowed me to find a solution here that worked, although I have no idea why it works.

Basically I needed to add a min-height of 0px on the parent element, and set the height of the ul that I was trying to display to 100%.

Problem sorted!

Current magento version – 1.3.2.4

jQuery is my favoured javascript library. It is the one I use most so it’s familiar and I can develop quickly with it. Magento however relies heavily on a mix of prototype, scriptalicious and their own varien scripts, none of which I’m familiar with or feel particularly confident about extending and adapting to my own needs.

So when I needed to add some custom javascript functionality to my magento site, I immediately thought “Wouldn’t it be great if I could use jQuery”. Now obviously this raises some issues. Firstly you’ll be adding in another javascript library to the mix, so the first thing to decide is “is this really necessary?”. You don’t want to add a whole load of extra code just for a really small bit of functionality as that doesn’t justify the performance hit or the extra bulk (if I can call it that). It is also well known that jQuery and prototype don’t really get on, so you’ll need to make sure that you can get them to play nicely together.

If you decide that it is worth it and you can justify adding the extra library, then here is what you need to do: (more…)

I recently had a problem where I was trying to insert some product information into a page, with the information shown changed depending on which product was selected from a drop down list.

Here is the select list and the div that I wanted the extra information to be displayed into:

<select name="product" id="product">
<option value="">Select product...</option>
<option value="Product 1">Product 1</option>
<option value="Product 2">Product 2</option>
<option value="Product 3">Product 3</option>
<option value="Product 4">Product 4</option>
</select>

<div id=”product_info”>
</div>

(more…)