Tag: jQuery

jQuery UI Sortable slow in FireFox

This is just a note for other developers searching on the same issue, as I didn’t find anything online when I was looking for ideas.

jQuery UI Sortable is a great way to work with drag and drop web interfaces but I found it was running painfully slow in Firefox. It was snappy in Chrome, and surprisingly responsive in IE, but Firefox was lagging.

As the official Sortable demo ran fine in Firefox it was easy enough to work out that it was something in my own code causing the problem. After cutting out items and returning them one by one it seems that having too much CSS3-niceness within the draggable elements was the culprit.

Each item I was dragging included a set of mini buttons styled with the lovely Bootstrap effects (gradients, rounded corners, shadows etc.) and although Chrome wasn’t phased by this it seems to knockout Firefox.

Valuing responsiveness more than prettiness, my solution was to cut back on the styling of these items and I’m happy with the results.

Hopefully this is useful to you too.

Help save the Arctic with Greenpeace

It’s been a real pleasure to help Greenpeace out in a small way for this important Arctic fundraising campaign that’s currently running on their homepage.

I built the fundraising thermometer widget (marked with the red border in the screenshot above) by extending Dave Cranwell’s jQuery E-activist Social Proof Plugins (source code available on GitHub).

Please make a donation today if you can.

 

Loading a new version of jQuery without breaking an old version

Sometimes you’re working on a website that already uses an old version of jQuery and upgrading is not an option at that moment in time; if for example the jQuery library is bundled with a version of Drupal and works with a set of existing plugins.

The following code will allow you to load in a newer version of jQuery and still leave the $ variable assigned to the old version…

The code:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'> 
//<![CDATA[
google.load('jquery', '1.7.1'); 
//]]> 
</script>
<script type="text/javascript"> 
// save the new version of jquery to a variable and revert $ to the existing version on the page
var jQuery_1_7_1 = $.noConflict(false); 
</script>

The same code with console logging for testing:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
// outputs jquery version to Firebug/chrome console to test
console.log("$=" + $().jquery);
//<![CDATA[
google.load('jquery', '1.7.1');
//]]>
</script>
<script type="text/javascript">
console.log("$=" + $().jquery);
// save the new version of jquery to a variable and revert $ to the existing version on the page
var jQuery_1_7_1 = $.noConflict(false);
console.log("$=" + $().jquery);
console.log("jQuery_1_7_1=" + jQuery_1_7_1().jquery);
</script>

After that, you can use jQuery_1_7_1 in place of $ in your newer code.

Hat-tip to the following helpful articles: