Hey Ricardo,
I've been playing around with this script, which you kindly wrote for
me, over the past hour. I think I can use it, although:
- I'd initially like the appropriate 'previous' and 'next' links left
out if there's no more posts to display. The problem is ATM 'previous'
does nothing initially, and the nth 'next' displays no posts and leave
me with no other way to navigate back to them, apart from refreshing
the page!
- Also would love to be able to hop back to the start of the post
excerpts once the function to display three new posts has run. Not
sire how to inlcude the equivilent of:
<a href="#content" id="more">Next 3</a> within the JS function?
Thanks man,
L
PS. Cheers for the other comments guys. I've picked up a lot more
knowledge analysing what you're doing there because of your time.
On Apr 23, 5:10 am, Ricardo <ricardob...@gmail.com> wrote:
> No need for IDs, you can do it all using the elements' indexes:
>
> Assuming a structure like this:
>
> <ul id="posts">
> <li>...</li>
> ...
> </ul>
> <a href="#" id="more">Next 3</a>
> <a href="#" id="less">Previous 3</a>
>
> I'd use this. A bit busy, but it's short! :)
>
> //hide all but the first 3 posts
> $posts = $('#posts li').show();
> $posts.filter(':gt(2)').hide();
>
> //set the navigation
> $('#more,#less').click(function(){
> var op = function(x){ return x ? 'next' : 'prev'; }
> var m = this.id == 'more';
>
> //get last OR first visible post
> var visible = $posts.filter(':visible:'+ (m ? 'last' : 'first'));
>
> //if any posts left - next() or prev()
> if (visible[op(m)]().length)
> //hide all visible, show next/prev 3
> $posts.filter(':visible').hide();
> visible[op(m)+'All'](':lt(3)').show().end()
>
> return false;
>
> });
>
> You can replace show and hide for fadeIn and fadeOut for a nice
> effect.
>
> cheers,
> - ricardo
>
> On Apr 22, 11:18 am, ldexterldesign <m...@ldexterldesign.co.uk> wrote:
>
> > Hey guys,
>
> > I have 10 separate posts displayed on a page. I want to hide 7 (of the
> > oldest) of them and display a link; 'show more posts' - kinda a
> > pagination thing I guess.
>
> > My PHP pumps out 10 posts, and I'd like to do the hide/show with JS.
>
> > I'm aware I could simply add and remove a height class, hiding/
> > revealing the posts, but I'd like to make it a bit more complex and
> > have accurate control over how many posts are shown if my client turns
> > around and says he wants 5 posts displayed prior to the button being
> > clicked.
>
> > Just thinking about how I might go about this in code I'm thinking of
> > doing it the following way. I'm not an excellent programmer, so the
> > time you'd, potentially, save me getting it clear in pseudo will most
> > likely save me a lot of time this evening. Hell, there might even be a
> > plug-in or simpler solution than below you can think of:
>
> > - I get a unique 'post-x' ID for each of the posts, where 'x' is the
> > post ID, so I was thinking about just hiding the lowest 7 numeric post
> > IDs displayed on the page?
>
> > Thoughts?
>
> > :]
> > L
