I am almost there... I set the height of each ul without a problem.
Now I seem to be having a problem with the selection of the parent-
child ul
html:
<div class="ec">
<ul>
<li>test 1test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
</ul>
<div class="control">hide/show</div>
</div>
JS:
$('.control').click(function(){
var me = $(this), ul = me.parent().children("ul"), ulh = ul.height(),
h = 0;
if( me.is('.closed') ) {
ul.children('li').each(function(i){
h += this.offsetHeight;
});
ul.animate({'height':(ul.height()>h?h:ulh)+'px'});
} else {
ul.children('li').each(function(i){
if(i===3){return false;}
h += this.offsetHeight;
});
ul.animate({'height':(ul.height()>h?h:ulh)+'px'});
}
return false;
});
Probably something stupid... is ul = me.parent().children("ul"),
correct?
On Mar 11, 4:53 pm, mkmanning <michaell...@gmail.com> wrote:
> You could add the padding to the calculation, but that's pretty ugly.
> Instead you could calculate the height differently, for each LI
> element (this would also take into account if any LI's wrapped due to
> content length):
>
> CSS:
> ul {
> width:100px;}
>
> li{
> padding:5px;
>
> }
>
> HTML:
> <a href="#" id="myList-toggle">Show the rest</a>
> <ul id="myList">
> <li>Item 1</li>
> <li>Item 2 and this is really long so it will wrap</li>
> <li>Item 3</li>
> <li>Item 4</li>
> <li>Item 5</li>
> <li>Item 6</li>
> <li>Item 7</li>
> <li>Item 8</li>
> <li>Item 9</li>
> <li>Item 10</li>
> </ul>
>
> JS:
> $(document).ready(function(){
> var ul = $('#myList'), ulh = ul.height(), h = 0;
> ul.children('li').each(function(i){
> if(i===5){return false;}
> h += this.offsetHeight;
> });
> ul.css({'height':h+'px','overflow':'hidden'});
> $('#myList-toggle').click(function(){
> ul.animate({'height':(ul.height()>h?h:ulh)+'px'});
> return false;
> });
>
> });
>
> On Mar 11, 12:49 pm, Brian <byano...@gmail.com> wrote:
>
> > Is there anyway to account for padding on the li of each list? I have
> > padding which seems to be throwing off the calculations.
>
> > On Mar 11, 3:36 pm, Brian <byano...@gmail.com> wrote:
>
> > > mkmanning,
>
> > > I want to thank you for your contribution. I was able to understand
> > > your example better (I just didn't get tres's version) and was able to
> > > come up with the following js/code combo:
>
> > > $(document).ready(function(){
>
> > > $('ul').each(function(i) {
> > > var ul = $(this), l = ul.children('li'), h =
> > > l.height();
> > > ul.css({'height':(h*3)+'px','overflow':'hidden'});
> > > $(this).siblings('.control').addClass('closed');
> > > $(this).siblings('.control').html('<a
> > > href="#">open</a>');
> > > });
>
> > > $('.control').click(function(){
> > > var ul = $(this).parent().children("ul"), l =
> > > ul.children('li'), h = l.height();
> > > var me = $(this);
>
> > > if( me.is('.closed') ) {
> > >
> > > ul.parent().children("ul").animate({'height':(ul.height()>(h*5)?
> > > (h*5):(l.length*h))+'px'});
> > > me.removeClass('closed');
> > > me.addClass('open');
> > > $(this).html('<a
> > > href="#">close</a>');
> > > } else {
> > >
> > > //ul.css({'height':(h*3)+'px','overflow':'hidden'});
> > >
> > > ul.animate({'height':(h*3)+'px','overflow':'hidden'});
> > > me.removeClass('open');
> > > me.addClass('closed');
> > > $(this).html('<a
> > > href="#">closed</a>');
> > > }
> > > return false;
> > > });
>
> > > });
>
> > > <div class="ec">
> > > <ul>
> > > <li>test 1</li>
> > > <li>test 2</li>
> > > <li>test 3</li>
> > > <li>test 4</li>
> > > <li>test 5</li>
> > > <li>test 6</li>
> > > <li>test 7</li>
> > > <li>test 8</li>
> > > <li>test 9</li>
> > > </ul>
> > > <div class="control"></div>
> > > </div>
> > > <div class="ec">
> > > <ul>
> > > <li>test 1</li>
> > > <li>test 2</li>
> > > <li>test 3</li>
> > > <li>test 4</li>
> > > <li>test 5</li>
> > > <li>test 6</li>
> > > <li>test 7</li>
> > > <li>test 8</li>
> > > <li>test 9</li>
> > > </ul>
> > > <div class="control"></div>
> > > </div>
>
> > > On Mar 11, 2:25 pm, mkmanning <michaell...@gmail.com> wrote:
>
> > > > And that's what I get for skipping the middle; basically the same
> > > > solution as tres, just less code (and it works in IE6) :)
>
> > > > On Mar 11, 11:21 am, mkmanning <michaell...@gmail.com> wrote:
>
> > > > > Here's a completely different (and admittedly problematic) approach.
> > > > > Instead of creating new markup with a separate list, you could 'hide'
> > > > > the LI's over a certain number with CSS, and then animate the
> > > > > container. Here's a quick example:
>
> > > > > JS:
> > > > > $(document).ready(function(){
> > > > > var ul = $('#myList'), l = ul.children('li'), h = l.height();
> > > > > ul.css({'height':(h*5)+'px','overflow':'hidden'});
> > > > > $('#myList-toggle').click(function(){
> > > > >
> > > > > ul.animate({'height':(ul.height()>(h*5)?(h*5):(l.length*h))+'px'});
> > > > > return false;
> > > > > });
>
> > > > > });
>
> > > > > HTML:
> > > > > <a href="#" id="myList-toggle">Show the rest</a>
> > > > > <ul id="myList">
> > > > > <li>Item 1</li>
> > > > > <li>Item 2</li>
> > > > > <li>Item 3</li>
> > > > > <li>Item 4</li>
> > > > > <li>Item 5</li>
> > > > > <li>Item 6</li>
> > > > > <li>Item 7</li>
> > > > > <li>Item 8</li>
> > > > > <li>Item 9</li>
> > > > > <li>Item 10</li>
> > > > > </ul>
>
> > > > > What makes it problematic? Well, if the user resizes the text after
> > > > > you've calculated the height, it will be off (so if you want to
> > > > > account for that you'd have to include text-resize detection, which
> > > > > complicates the script; you'd have to decide if it's worth the extra
> > > > > effort).
>
> > > > > On Mar 11, 8:50 am, Brian <byano...@gmail.com> wrote:
>
> > > > > > How would one go about adapting this to be used with multiple lists
> > > > > > on
> > > > > > one page.
>
> > > > > > I have 3-5 lists on each page and would only like to show the first
> > > > > > 3
> > > > > > items of each with the ability to show the others.
>
> > > > > > On Feb 17, 5:16 am, mofle <mofl...@gmail.com> wrote:
>
> > > > > > > I'm using IE6 natively on an XP machine. jQuery 1.3.1.
>
> > > > > > > Any solution?
>
> > > > > > > I don't get an error message in IE6, nothing happens when i click
> > > > > > > the
> > > > > > > link.
>
> > > > > > > Anyway, thanks for your help ;)
>
> > > > > > > On Feb 13, 12:09 am, tres <treshug...@gmail.com> wrote:
>
> > > > > > > > After installing IE6, I didn't have any problems. It works just
> > > > > > > > like
> > > > > > > > it should. I have noticed differences in the multiple IEs and
> > > > > > > > the
> > > > > > > > actual IE, but those differences we're only when viewing the
> > > > > > > > About
> > > > > > > > Internet Explorer in the Help menu and when printing.
>
> > > > > > > > Are you using ie6 in a VM, in it's original state on XP, or with
> > > > > > > > multiple IE's? Another question would be, which version of
> > > > > > > > jQuery are
> > > > > > > > you using and have you cleared the ie6 cache?
>
> > > > > > > > Sorry that didn't work for you.
>
> > > > > > > > -Trey
>
> > > > > > > > On Feb 13, 9:56 am, tres <treshug...@gmail.com> wrote:
>
> > > > > > > > > I'll install multiple IE's and get back to you.
>
> > > > > > > > > -Trey
>
> > > > > > > > > On Feb 12, 7:05 pm, mofle <mofl...@gmail.com> wrote:
>
> > > > > > > > > > Thanks, you're a genius.
>
> > > > > > > > > > But it didn't work in IE6, where I need it.
>
> > > > > > > > > > Any solution?
>
> > > > > > > > > > On Feb 12, 12:32 am, tres <treshug...@gmail.com> wrote:
>
> > > > > > > > > > > Oh and also Safari 3.1.2 Windows.
>
> > > > > > > > > > > -Trey
