Dynamic jQuery tabs, closing and opening UL mid list

JavaScript
21

Okay, here is the code I came up with http://jsfiddle.net/qJzfP/3/

22

Is it seems that you’re using jQuery to perform pagination, why not make use of an existing pagination plugin instead, where most of the hard work has already been done for you?

There are many pagination plugins to choose from.

23

Sorry for the delayed response, my wife wouldn’t let me do any work this weekend! :smiley:

So grateful for your help, was completely lost with this one… love the solution.

Thanks again :slight_smile:

24

Thanks for this Paul, I will have a look at these :slight_smile:

25

Got everything working perfectly now, thanks a lot guys for all your help.

I was also thinking, is there a way with jQuery to strip anchor tags from HTML? I was thinking, instead of removing the previous/next buttons when the user is at the start/end of the gallery list, to just remove the HTML so I could style the inactive links.

26

You could change the .hide()/.show() to be .attr(‘disabled’, ‘disabled’) and .removeAttr(‘disabled’) respectively.

27

It is more appropriate to set a class name on the inactive links, so that they can then be styled in an appropriate manner, whether that be hiding them, greying them our, or applying some other presentational aspect to them.

28

Setting a classname wouldn’t prevent them from being clicked, by applying the disabled attribute, the user can’t invoke the click event.

29

Setting a class name allows you to set their display to be hidden, which completely prevents them from being clicked at all. That is one of the most appropriate ways to deal with the situation.

30

True, but I was under the impression he wanted to style it, so I guess that would work too, but that isn’t any different than using show or hide

31

When for example the previous link is to be disabled, it can be as easy as setting the class name on the link, and having the click event for that link just return without doing anything.

That way the link doesn’t do anything, and the presentation of the link can be styled in any way that is desired.

32

Perfect! I did a mix of both, I used your code cpradio, but then also added a class so I could change the colour, border styling etc:


// if first gallery
            if ( curGal === 0 ) {
                //$('button.prev').hide();
                $('button.prev').attr('disabled', 'disabled').addClass('disabled');
            }
            else
            {
                $('button.prev').removeAttr('disabled').removeClass('disabled');
                //$('button.prev').show();
            }

            // if last gallery
            if ( curGal === galleries.length - 1 ) {
                //$('button.next').hide();
                $('button.next').attr('disabled', 'disabled').addClass('disabled');
            }
            else
            {
                $('button.next').removeAttr('disabled').removeClass('disabled');
                //$('button.next').show();
            }

		});

		// Hide the first gallery
		//$('button.prev').hide();
		$('button.prev').attr('disabled', 'disabled').addClass('disabled');

Thanks again both of you.

33

Can’t argue with that :slight_smile:

34

I also set it so that if there is only one gallery UL, hide the pagination:


if ( galleries.length > 1 ) {
			$('.paginate').show()
		} else {
			$('.paginate').hide()
		}




		// Listen for when one of the buttons us clicked
		$('.paginate').find('button').on('click', function() {