setting columns to a max size for sortables

[Asa Carter]

I am trying to set the height of columns when an item has been sorted
to the height of the biggest column.
It works for the first sort but then is fixed at that.

I think I need to get the height of the contents of the column rather
than the column itself but not much luck so far.


        $('div.column').sortable({
                items:$('div.widget'),
                                connectWith: ["#col1", "#col2",
"#col3"],
                handle:'.menubar',
                placeholder:'sort_placeholder',
                helper:function (el){
                     return $
('.helper').clone().appendTo('body').css('display','block');
                },
                update:function(e,ui) {
                                                var col1 = $
("#col1").height();
                        var col2 = $("#col2").height();
                        var col3 = $("#col3").height();
                        var newHeight = Math.max(col1,col2,col3);
                        $("#col1").height(newHeight);
                        $("#col2").height(newHeight);
                        $("#col3").height(newHeight);
                },
                start:function(e,ui) {
                        ui.helper.addClass('ontop');
                },
                stop:function(e,ui) {}
        });
});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[tinimi]

Try to use tables :)
Like:
<table>
<tr>
    <td><ul="col1"></ul></td>
    <td><ul="col2"></ul></td>
    <td><ul="col3"></ul></td>
</tr>
</table>
with fixed width for td and ul height 100%.

On 28 июн, 22:41, Asa Carter <asa_car...@...> wrote:

> I am trying to set the height of columns when an item has been sorted
> to the height of the biggest column.
> It works for the first sort but then is fixed at that.
>
> I think I need to get the height of the contents of the column rather
> than the column itself but not much luck so far.
>
>         $('div.column').sortable({
>                 items:$('div.widget'),
>                                 connectWith: ["#col1", "#col2",
> "#col3"],
>                 handle:'.menubar',
>                 placeholder:'sort_placeholder',
>                 helper:function (el){
>                      return $
> ('.helper').clone().appendTo('body').css('display','block');
>                 },
>                 update:function(e,ui) {
>                                                 var col1 = $
> ("#col1").height();
>                         var col2 = $("#col2").height();
>                         var col3 = $("#col3").height();
>                         var newHeight = Math.max(col1,col2,col3);
>                         $("#col1").height(newHeight);
>                         $("#col2").height(newHeight);
>                         $("#col3").height(newHeight);
>                 },
>                 start:function(e,ui) {
>                         ui.helper.addClass('ontop');
>                 },
>                 stop:function(e,ui) {}
>         });
>
> });

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Asa Carter]

I would rather not use tables if I can help it.

On Jun 28, 10:03 pm, tinimi <tin...@...> wrote:

> Try to use tables :)
> Like:
> <table>
> <tr>
>     <td><ul="col1"></ul></td>
>     <td><ul="col2"></ul></td>
>     <td><ul="col3"></ul></td>
> </tr>
> </table>
> with fixed width for td and ul height 100%.
>
> On 28 июн, 22:41, Asa Carter <asa_car...@...> wrote:
>
>
>
> > I am trying to set the height of columns when an item has been sorted
> > to the height of the biggest column.
> > It works for the first sort but then is fixed at that.
>
> > I think I need to get the height of the contents of the column rather
> > than the column itself but not much luck so far.
>
> >         $('div.column').sortable({
> >                 items:$('div.widget'),
> >                                 connectWith: ["#col1", "#col2",
> > "#col3"],
> >                 handle:'.menubar',
> >                 placeholder:'sort_placeholder',
> >                 helper:function (el){
> >                      return $
> > ('.helper').clone().appendTo('body').css('display','block');
> >                 },
> >                 update:function(e,ui) {
> >                                                 var col1 = $
> > ("#col1").height();
> >                         var col2 = $("#col2").height();
> >                         var col3 = $("#col3").height();
> >                         var newHeight = Math.max(col1,col2,col3);
> >                         $("#col1").height(newHeight);
> >                         $("#col2").height(newHeight);
> >                         $("#col3").height(newHeight);
> >                 },
> >                 start:function(e,ui) {
> >                         ui.helper.addClass('ontop');
> >                 },
> >                 stop:function(e,ui) {}
> >         });
>
> > });- Hide quoted text -
>
> - Show quoted text -

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Asa Carter]

Seems to work by setting the height of a container. Only tested in ie7
and ff3 though.

On Jun 28, 10:49 pm, Asa Carter <asa_car...@...> wrote:

> I would rather not use tables if I can help it.
>
> On Jun 28, 10:03 pm, tinimi <tin...@...> wrote:
>
>
>
> > Try to use tables :)
> > Like:
> > <table>
> > <tr>
> >     <td><ul="col1"></ul></td>
> >     <td><ul="col2"></ul></td>
> >     <td><ul="col3"></ul></td>
> > </tr>
> > </table>
> > with fixed width for td and ul height 100%.
>
> > On 28 июн, 22:41, Asa Carter <asa_car...@...> wrote:
>
> > > I am trying to set the height of columns when an item has been sorted
> > > to the height of the biggest column.
> > > It works for the first sort but then is fixed at that.
>
> > > I think I need to get the height of the contents of the column rather
> > > than the column itself but not much luck so far.
>
> > >         $('div.column').sortable({
> > >                 items:$('div.widget'),
> > >                                 connectWith: ["#col1", "#col2",
> > > "#col3"],
> > >                 handle:'.menubar',
> > >                 placeholder:'sort_placeholder',
> > >                 helper:function (el){
> > >                      return $
> > > ('.helper').clone().appendTo('body').css('display','block');
> > >                 },
> > >                 update:function(e,ui) {
> > >                                                 var col1 = $
> > > ("#col1").height();
> > >                         var col2 = $("#col2").height();
> > >                         var col3 = $("#col3").height();
> > >                         var newHeight = Math.max(col1,col2,col3);
> > >                         $("#col1").height(newHeight);
> > >                         $("#col2").height(newHeight);
> > >                         $("#col3").height(newHeight);
> > >                 },
> > >                 start:function(e,ui) {
> > >                         ui.helper.addClass('ontop');
> > >                 },
> > >                 stop:function(e,ui) {}
> > >         });
>
> > > });- Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Kevvoid]

Hi there,

I don't know if it helps, but I've just created a small function to
resize floating columns according to the highest - basically it sets
all column heights to auto, works out the largest height and then sets
all column heights to this value. Here's the code - tested in ie6, ie7
and ff2.

<script src="/libraries/scripts/jquery/jquery-1.2.6.pack.js"></script>
<script src="/libraries/scripts/jquery/jquery-ui-
personalized-1.5.1.packed.js"></script>
<script type="text/javascript">
var updateColumnHeights = function (e, ui) { //function calculates
tallest column and sets height of all columns to that value
        var intMaxHeight = 0;
        $(".column").height("auto") //sets all columns to auto-height for the
purpose of finding the longest one
        $(".column").each(function(){
                if ($(this).height() > intMaxHeight) {
                        intMaxHeight = $(this).height()
                }
        });
        $(".column").height(intMaxHeight)
}

  $(document).ready(function(){
    var arrPanelItemHolders = ['.column']; //array
        $(".column").sortable({
                connectWith: arrPanelItemHolders,
                start: function(e,ui) { //this sorts any problem with fluid widths
for the panels
                                ui.helper.css("width", ui.item.width());
                },
                change:updateColumnHeights,
                placeholder: 'clone',
                zIndex: 5,
                opacity: 0.8,
                appendTo: 'body'

        });
  });
</script>
<style>
.column {width:33%;float:left;}
.panel {margin:10px 2%;width:96%;background-color:#F0F0F0;height:
120px;}
</style>
<div class="column" style="background-color:blue">
        <div class="panel">Panel Content</div>
        <div class="panel">Panel Content</div>
        <div class="panel">Panel Content</div>
</div>
<div class="column" style="background-color:white">
        <div class="panel">Panel Content</div>
</div>
<div class="column" style="background-color:red">
        <div class="panel">Panel Content</div>
</div>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Louis-34]

Sent from my BlackBerry device on the Rogers Wireless Network

-----Original Message-----
From: Kevvoid <kevvoid@...>

Date: Fri, 4 Jul 2008 08:51:09
To: jQuery UI<jquery-ui@...>
Subject: [jquery-ui] Re: setting columns to a max size for sortables



Hi there,

I don't know if it helps, but I've just created a small function to
resize floating columns according to the highest - basically it sets
all column heights to auto, works out the largest height and then sets
all column heights to this value. Here's the code - tested in ie6, ie7
and ff2.

<script src="/libraries/scripts/jquery/jquery-1.2.6.pack.js"></script>
<script src="/libraries/scripts/jquery/jquery-ui-
personalized-1.5.1.packed.js"></script>
<script type="text/javascript">
var updateColumnHeights = function (e, ui) { //function calculates
tallest column and sets height of all columns to that value
        var intMaxHeight = 0;
        $(".column").height("auto") //sets all columns to auto-height for the
purpose of finding the longest one
        $(".column").each(function(){
                if ($(this).height() > intMaxHeight) {
                        intMaxHeight = $(this).height()
                }
        });
        $(".column").height(intMaxHeight)
}

  $(document).ready(function(){
    var arrPanelItemHolders = ['.column']; //array
        $(".column").sortable({
                connectWith: arrPanelItemHolders,
                start: function(e,ui) { //this sorts any problem with fluid widths
for the panels
                                ui.helper.css("width", ui.item.width());
                },
                change:updateColumnHeights,
                placeholder: 'clone',
                zIndex: 5,
                opacity: 0.8,
                appendTo: 'body'

        });
  });
</script>
<style>
.column {width:33%;float:left;}
.panel {margin:10px 2%;width:96%;background-color:#F0F0F0;height:
120px;}
</style>
<div class="column" style="background-color:blue">
        <div class="panel">Panel Content</div>
        <div class="panel">Panel Content</div>
        <div class="panel">Panel Content</div>
</div>
<div class="column" style="background-color:white">
        <div class="panel">Panel Content</div>
</div>
<div class="column" style="background-color:red">
        <div class="panel">Panel Content</div>
</div>



--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---