Mats Lindh » jquery http://e-mats.org Where desperate is just another word for a regular day. Wed, 01 Feb 2012 14:42:48 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Complete Example of Tracking Start and End of Drag Operations with jQuery and Table Rows http://e-mats.org/2011/06/complete-example-of-tracking-start-and-end-of-drag-operations-with-jquery-and-table-rows/ http://e-mats.org/2011/06/complete-example-of-tracking-start-and-end-of-drag-operations-with-jquery-and-table-rows/#comments Wed, 15 Jun 2011 08:15:38 +0000 Mats http://e-mats.org/?p=887 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:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.         <title>jQuery UI Example Page</title>
  6.         <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
  7.         <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
  8.         <script type="text/javascript">
  9.             $(function(){
  10.                 $("tbody").sortable({
  11.                     start: function(event, ui) {
  12.                         ui.item.data('originIndex', ui.item.index());
  13.                         $("#draggingFrom").text("Index: " + ui.item.index());
  14.                     },
  15.                     change: function (event, ui) {
  16.                         var originIndex = ui.item.data('originIndex');
  17.                         var currentIndex = ui.placeholder.index();
  18.                        
  19.                         if (currentIndex > originIndex)
  20.                         {
  21.                             currentIndex -= 1;
  22.                         }
  23.                        
  24.                         $("#hoveringOver").text("Current Index: " + currentIndex);
  25.                     },
  26.                     stop: function (event, ui) {
  27.                         $("#draggingFrom, #hoveringOver").text("None");
  28.                     }
  29.                 });
  30.             });
  31.         </script>
  32.         <style type="text/css">
  33.             td
  34.             {
  35.                 border: 1px solid #888888;
  36.                 background: #eeeeee;
  37.                 padding: 4px;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <dl>
  43.             <dt>
  44.                 Dragging from index
  45.             </dt>
  46.             <dd id="draggingFrom">
  47.                 None
  48.             </dd>
  49.             <dt>
  50.                 Hovering index
  51.             </dt>
  52.             <dd id="hoveringOver">
  53.                 None
  54.             </dd>
  55.         </dl>
  56.    
  57.         <table>
  58.             <thead>
  59.                 <tr>
  60.                     <th>
  61.                         Keys
  62.                     </th>
  63.                     <th>
  64.                         Values
  65.                     </th>
  66.                 </tr>
  67.             </thead>
  68.             <tbody>
  69.                 <tr>
  70.                     <td>
  71.                         Key 1
  72.                     </td>
  73.                     <td>
  74.                         Value 1
  75.                     </td>
  76.                 </tr>
  77.                 <tr>
  78.                     <td>
  79.                         Key 2
  80.                     </td>
  81.                     <td>
  82.                         Value 2
  83.                     </td>
  84.                 </tr>
  85.                 <tr>
  86.                     <td>
  87.                         Key 3
  88.                     </td>
  89.                     <td>
  90.                         Value 3
  91.                     </td>
  92.                 </tr>
  93.                 <tr>
  94.                     <td>
  95.                         Key 4
  96.                     </td>
  97.                     <td>
  98.                         Value 4
  99.                     </td>
  100.                 </tr>
  101.                 <tr>
  102.                     <td>
  103.                         Key 5
  104.                     </td>
  105.                     <td>
  106.                         Value 5
  107.                     </td>
  108.                 </tr>
  109.                 <tr>
  110.                     <td>
  111.                         Key 6
  112.                     </td>
  113.                     <td>
  114.                         Value 6
  115.                     </td>
  116.                 </tr>
  117.             </tbody>
  118.         </table>    
  119.     </body>
  120. </html>
]]> http://e-mats.org/2011/06/complete-example-of-tracking-start-and-end-of-drag-operations-with-jquery-and-table-rows/feed/ 0 Keeping track of indexes while dragging in jQuery ui.sortable http://e-mats.org/2011/06/keeping-track-of-indexes-while-dragging-in-jquery-ui-sortable/ http://e-mats.org/2011/06/keeping-track-of-indexes-while-dragging-in-jquery-ui-sortable/#comments Sun, 05 Jun 2011 19:55:10 +0000 Mats http://e-mats.org/?p=880 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:

  1. start: function(event, ui) {
  2.     ui.item.data('originIndex', ui.item.index());
  3. },

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:

  1. change: function (event, ui) {
  2.     var originIndex = ui.item.data('originIndex');
  3.     var currentIndex = ui.placeholder.index();
  4.  
  5.     if (currentIndex > originIndex)
  6.     {
  7.         currentIndex -= 1;
  8.     }
  9.  
  10.     // do magic
  11. }
]]> http://e-mats.org/2011/06/keeping-track-of-indexes-while-dragging-in-jquery-ui-sortable/feed/ 4 An Update to jQDynamicFontSize http://e-mats.org/2009/04/an-update-to-jqdynamicfontsize/ http://e-mats.org/2009/04/an-update-to-jqdynamicfontsize/#comments Mon, 06 Apr 2009 10:05:13 +0000 Mats http://e-mats.org/?p=471 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:

  • limitWidth: Uses the width of the element to determine the size instead of the height. Defaults to false.
  • allowUpscaling: Allows the element to grow instead of shrink to fit the provided area. Only works when limitWidth is active currently. Defaults to false.

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!

]]> http://e-mats.org/2009/04/an-update-to-jqdynamicfontsize/feed/ 0 Introducing jQDynamicFontSize – A jQuery Plugin for Dynamic Font Size http://e-mats.org/2009/03/introducing-jqdynamicfontsize-a-jquery-plugin-for-dynamic-font-size/ http://e-mats.org/2009/03/introducing-jqdynamicfontsize-a-jquery-plugin-for-dynamic-font-size/#comments Fri, 27 Mar 2009 22:32:43 +0000 Mats http://e-mats.org/?p=466 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!

]]> http://e-mats.org/2009/03/introducing-jqdynamicfontsize-a-jquery-plugin-for-dynamic-font-size/feed/ 0