To make this a bit more searcable on the magic intarwebs:
jQuery 1.6.x changed the behaviour of attr(‘checked’), as it is no longer used to manipulate the state of radio buttons (or other elements using the checked element). This is considered a property, not an attribute (the difference is subtle), so instead of:
$("#element").attr('checked', 'checked'); // or
$("#element").attr('checked', true);
The correct ™ way of doing this is:
$("#element").prop('checked', true);
After writing my previous post about “Keeping track of indexes while dragging in jQuery UI Sortable” I received a question about how this would work for sortable table rows. The code I included in the previous post should actually be enough to make everything work (.. as long as I understood the question correctly). I’ve created a minimal example as a complete implementation of the code from the previous post, and I’ve also included it as a live demo here.
This is based on jQuery 1.5.1 and jQuery UI 1.8.13. I’ve simply used the distribution versions of this example (you probably want to build your own UI bundle using the interface on the jQuery UI website).
Here’s a live demo that you can play with.
Inline javascript and WordPress could possibly be better friends.
The complete source for the minimal (but complete) example is included here:
jQuery UI Example Page
| Keys | Values |
|---|---|
| Key 1 | Value 1 |
| Key 2 | Value 2 |
| Key 3 | Value 3 |
| Key 4 | Value 4 |
| Key 5 | Value 5 |
| Key 6 | Value 6 |
While you’re handling a drag operation in the jQuery UI Sortable handler, there’s a few small issues that might almost drive you insane. These two solutions are based on information from various places on the net (such as a few discussions on Stack Overflow).
If you want to keep track of which location the item you’re dragging originated from, you can attach to the ‘start’ event in the Sortable configuration constructor. Use this event to attach the origin index as a data element:
start: function(event, ui) {
ui.item.data('originIndex', ui.item.index());
},
If you want to find out what index the user is currently hovering above (to change the numbering of a list instantly), you can use the same method on the placeholder element (available as ui.placeholder, so to fetch the current index the user is hovering over, call ui.placeholder.index()). There is however a gotcha’ here, as the original element is still present in the list – just allow to float freely around (the dragging action). We handle this by fetching the origin index and subtracting one if we’re after the location we started at.
You can handle these events in the ‘change’ event handler:
change: function (event, ui) {
var originIndex = ui.item.data('originIndex');
var currentIndex = ui.placeholder.index();
if (currentIndex > originIndex)
{
currentIndex -= 1;
}
// do magic
}
When we released jQDynamicFontSize a couple of weeks ago, we hoped that others would find the plugin useful and keep it around as one of the many tools in your toolbox. We also had a small hope that people would find it useful to extend and maybe submit a patch or two back to us.
And lo’ and behold, during the weekend the first patch arrived in my mailbox. Written by Vegard Andreas Larsen, we now also support scaling against the width of a container. I didn’t even have an idea around this, and suddenly we have working code. The power of open source!
This adds two new options when initializing jqDFS:
The original scale method should probably be rewritten to also use allowUpscaling, so if anyone feels slightly hackish tonight, just send the patch my way!
We’ve released the first version of jQDynamicFontSize – a jQuery Plugin for dynamically adjusting the font size of an element to fit a number of lines. The plugin was written to allow us to resize a headline to make the headline fit on one line, sacrificing text size to avoid breaking text into two lines.
To paraphrase from the INSTALL file:
In a production system, use jquery-dynamicfontsize.min.js. For debugging
or developing, use jquery-dynamicfontsize.js.
Usage:
Include a reference to the script after loading jQuery:
<script src="jquery-dynamicfontsize.min.js"></script>
Then call:
$("#idOfElement").dynamicFontSize();
This will attempt to scale the font size of the element down with 10% in
3 iterations, stopping when a value has been found that allows the element
to only use one text line.
$("h1").dynamicFontSize();
This will attempt to scale all h1 elements. Other jQuery selectors will also
work.
Options supported:
* squeezeFactor: A float value that will be used as the squeeze factor
for each step. 0.1 means that we'll attempt to scale the font-size down
10% for each iteration. Defaults to 0.1.
* lines: The number of lines we'll attempt to fit the text to. When the
text fits this (or a smaller) amount of lines, we'll stop scaling.
Defaults to 1.
* tries: The number of iterations we'll try before we give up and go with
the last result. Defaults to 3.
We do currently not care for the line-height of elements, so if you’re feeling slightly hackish tonight, feel free to add the required piece of javascript goodness. Any suitable patches are welcome!