Using colResizable Plugin to adjust the Size

Using colResizable Plugin to adjust the Size

Dear All,

I am trying to create a table with resizable column.So tried ColResizable plugin,and i can use this without any problem,But in the same table i want to provide the button to minimize maximize the table column.

This i achieved through normal javascript.Once i changed the width of the column using javascript.I am not able to use the functionlities of colresizeble plugin..

How can i achieve these two functions in a table..

Until i click the button to change the width of the column the colResize is working,once i click the button and the width i adjusted,but after this the draggable column resize function is not working..


Herewith i have attacched the source


<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.master.cs" Inherits="frameset.Site2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

    <script src="js/jquery.js"></script>

    <script src="js/colResizable-1.3.min.js"></script>


//ColResize

 $(function(){
         $("#sample2").colResizable();
        });





//Button event to maximize minimize the column width;

 <script type="text/javascript">
    var minmaxflag="M"
   
     function minimizemaximize()
     {
       
         var v = document.getElementById('col1').offsetWidth;
         if (minmaxflag == "M")
         {
                 document.getElementById('col1').style.width = "100%";
                document.getElementById('col2').style.width = "0";
                minmaxflag="X";

         }
         else
         {
                document.getElementById('col1').style.width = "30%";
                document.getElementById('col2').style.width = "70%";

                minmaxflag="M";
         }
       return false;
        
     }
   
      
    </script>

  
</head>
<body >
    <form id="form1" runat="server">
    <div class="style8">
        <table id="sample2" width="100%" align="center"  cellpadding="0" cellspacing="0"
            border="1">
           
            <tr class="style7">
                <td id="col1" align="right" class="style6">
                <%--<input type="button"  Width="26px" OnClick="minimizemaximize()" />--%>
                     <asp:Button ID="Button1" runat="server" Width="20px" OnClientClick="return  minimizemaximize()"
                        Style="margin-left: 0px" />  
                </td>
               <td id="col2" align="right" class="style6">
                   
                </td>
            </tr>
           
        </table>
    </div>
    </form>
</body>
</html>