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 <[email protected]> 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 <[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
