Hence a JS bug was bringing all of IE7’s JS processing to a halt even on the initial page load.

A first step I recommend is temporarily deactivating any JS compressors you may have enabled as pathing problems can crop up from using them and cause issues for IE7.

Beyond that I discovered the major snag resulted in this error from Visual Studio:

Expected identifier, string or number

Unfortunately that doesn’t give too much information but I was discovering it in my callback functions within my jQuery. It turns out IE7 has a particular issue with the syntax of JSON:

$(".box").animate({
    height: "100%",
    opacity: "1.0",
  }, 600, function() {
    alert("test!");
});

While the above appears to be valid there is a deceptively simple issue that IE7 chokes on. The comma on the end of the third line. While most browsers recognise the empty slot after the opacity variable of the JSON array being passed into the animate function – IE7 gets really confused and starts complaining about the next semi-colon in your code (in this case part of the callback function).

Just an interesting issue that other browsers don’t care about but IE7 is really bamboozled by

Wherein ‘element’ is the html you wish to insert and ‘value’ is what the associated weight of the element I’m inserting. For now it compares the weight value to the DOM text within the other children.

$.fn.insertSort = function(element, value) {
  selector = this;
  if ($(selector).length > 0) {
    $(selector).attr("inserted", "false");
    $(selector).children().each(function() {
      if (parseInt($(this).text()) > parseInt(value)) {
        $(this).before(element);
        $(selector).attr("inserted", "true");
        return false;
      }
    });
    if ($(selector).attr("inserted") == "false") {
      $(selector).append(element);
    }
  } else {
    $(selector).append(element);
  }
  $(selector).removeAttr("inserted");
};

It should be noted that this is an insertion sort. It’d be good to extend the plugin to be able to sort an existing piece of html for any parent/child relationship. Possibly with the ability to specify a particular level of depth?

$("#checkbox").change(function() {

$("#areaToToggle").toggle();

});

Pretty sweet, obviously the div should be hidden to begin with. We could add another line after the change event:

$("#areaToToggle").hide();

Too easy

• Tutorial
• Demo
  

Basically you can achieve a right-click drop-down menu via the following jQuery code:

$("#selector").contextMenu({
menu: 'myMenu'
});

Where ‘myMenu’ is the id of the HTML you want to appear as the menu:

<ul id="myMenu" class="contextMenu">
<li class="first_option"> <a href="#first_option">Option #1</a></li>
<li class="second_option"> <a href="#second_option">Option #2</a></li>
</ul>

I may need to use this in my next version of Chalk

I recently fixed a problem with a website that was developed by someone using raw Javascript. Basically it failed to work in IE. The underlying problem was that IE doesn’t recognise the visual text of a drop down select box in the DOM of the page as the ‘value’ of the element in the drop down select box.

So if you selected “5pm” from the box, the Javascript can’t be:

foo = frm.select[bar].value;

It has to be:

foo = frm.select[bar].text;

If you want it to work across all the browsers. In jQuery, you would never even write code like the above. You’d be using the CSS selectors:

$("#date_select").text();

The above would find the element with id ‘date_select’ and extract its text. Why the dollar sign? It tells Javascript we’re dealing with the jQuery library.

So you see, jQuery just looks different to raw Javascript most of the time. For example, take a load of this raw Javascript:

document.getElementById("x20").style.display='none';
document.getElementById("x21").style.display='none';
document.getElementById("x22").style.display='none';

var d = frm.Dates;
var dval = d.options[d.selectedIndex].text;
var idx;

for (x=frm.Times.length;x>0;x=x-1)
{
        frm.Times.remove(x);
}

Ugh, messy. jQuery steps away from the ‘document’ rubbish by using the CSS selectors mentioned previously. And the for loop? jQuery provides you with functions to iterate throughout CSS selected elements:

$("#times_list li").each(function () {
  this.remove()
}

Where ‘this’ is one of the CSS selector’s matched elements, iterated by the ‘each’ function.