jquery ui selectable lost area zoom animate

The grid works regularly when using the select at normal view, 100%, however if changing the size to a smaller or the zoom, the select does not work properly. On the other hand, the option check works perfectly at any views

example http://jsfiddle.net/mutesex/czxgg/2/

$("#slider").slider({
  value: 1,
  min: 0.1,
  max: 2,
  step: 0.1,
  slide: function (event, ui) {
    $("#amount").html("" + parseInt((ui.value) * 100) + "%");
    $('#<%= GridView1.ClientID%>').animate({ zoom: ui.value }, 1);
      //selectable___();
  }
});

$("#amount").html("100%");

function selectable___() {
  $(document).ready(function () {
    $("#<%= GridView1.ClientID%>").selectable({
     filter: "td[free='yes']",

     stop: function () {
     var result = $("#select-result").empty();
     $(".ui-selected", this).each(function () {
       var dia__ = $(this).attr("infodia");
       if (!ExisteItem(dia__)) {
         result.append(" #" + dia__);
         diasSeleccion.push({ infodia: dia__ });
       }
     });
   },
   unselected: function (event, ui) { var e = $(ui.unselected); removeItem(e.attr("infodia")); },
   unselecting: function (event, ui) { var e = $(ui.unselecting); removeItem(e.attr("infodia")); }
   });  
  }); 
};

Answers


Do not use zoom, selectable widget ignores it. Instead set height and width on slider change.

Remove !important from following widths and heights in your css

    .cell
    {
        ...
        width: 200px;
        ...
    }
    .cellcalday
    {
        ...
        height: 100px;
        ...
    }
    .cellcalfds
    {
        ...
        height: 100px;
        ...
    }

Change your script like this

            $("#slider").slider({
            value: 1,
            min: 0.1,
            max: 2,
            step: 0.1,
            slide: function (event, ui) {

                $("#amount").html("" + parseInt((ui.value) * 100) + "%");
                //$('#ctl00_container_GridView1').animate({ zoom: ui.value }, 1);
                $("table#ctl00_container_GridView1 tr td.cell").css('width', Math.round(200 * ui.value));
                $("table#ctl00_container_GridView1 tr th.cell").css('width', Math.round(200 * ui.value));
                $("table#ctl00_container_GridView1 tr td.cellcalday").css('height', Math.round(100 * ui.value));
                $("table#ctl00_container_GridView1 tr td.cellcalfds").css('height', Math.round(100 * ui.value));

            }
        });

jsFiddle here: http://jsfiddle.net/Ten4u/


Need Your Help

SQLLite Update query Parameter not accepting System String value

asp.net vb.net sqlite

I am having some issues with a parameterized SQL Lite query. I can't seem to get the SQL Lite Parameter to accept the String value

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.