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 <[email protected]> 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 <[email protected]> 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 <[email protected]> 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 <[email protected]> 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 <[email protected]> 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 <[email protected]> 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 <[email protected]> wrote: > > > > > > > > I'll install multiple IE's and get back to you. > > > > > > > > -Trey > > > > > > > > On Feb 12, 7:05 pm, mofle <[email protected]> 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 <[email protected]> wrote: > > > > > > > > > > Oh and also Safari 3.1.2 Windows. > > > > > > > > > > -Trey
