SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 34
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic jQuery tabs, closing and opening UL mid list

    Hi all,

    I am looking to create a gallery using an unordered list. The gallery is created dynamically via a CMS, so the number of images will vary.

    What I wanted to do was:

    Display the first 9 images in the gallery (this will be styled so there are 3 images per row, so 3 columns 3 rows)
    If there are more than 9 images, I wanted to, via jQuery, close the UL after the 9th image, then reopen the UL
    Then again via jQuery, on load hide all but the first UL, then use Next/Previous buttons to cycle through the other ULs (the remaining images in the gallery)

    I have set this up, but the problem I am having is the way the closing ul and opening ul is reordered (basically swapped round to an opening/closing ul)

    My HTML is as follows:

    HTML Code:
    <ul>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    </ul>

    The jQuery I am using:
    Code:
    $('</ul><ul>').insertAfter( $('#images li:nth-child(9n)') );
    The problem is it is formatting as:

    HTML Code:
    <ul>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<ul></ul>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    </ul>
    Can anybody please help?

    Many thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Sikwondo View Post
    Can anybody please help?
    You may need to do this in a more manual manner, by looping through the list and adding elements to a different ul list in groups of nine.

    This might be done efficiently by detatching the list from the DOM, looping througn the list moving elements from the 10th index to a different list until no more items exist at the 10th, and then reattacting both lists to back to the DOM.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You may need to do this in a more manual manner, by looping through the list and adding elements to a different ul list in groups of nine.

    This might be done efficiently by detatching the list from the DOM, looping througn the list moving elements from the 10th index to a different list until no more items exist at the 10th, and then reattacting both lists to back to the DOM.
    Hi Paul,

    Thanks for this. Do you have any examples of any code which I could see so I can try this out? Sorry, this method is unfamiliar to me.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Sikwondo View Post
    Hi Paul,

    Thanks for this. Do you have any examples of any code which I could see so I can try this out? Sorry, this method is unfamiliar to me.
    No examples of code come to mind (read: I'm not writing it for you, it's bedtime) - but if you put your hand to it, we can help to refine your technique or deal with any issues that occur
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    No examples of code come to mind (read: I'm not writing it for you, it's bedtime) - but if you put your hand to it, we can help to refine your technique or deal with any issues that occur
    Not asking anyone to do it for me, just pretty new to jQuery that's all, so no idea where to even start with detaching items from the DOM. Thanks for the info though, I will have a search around.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Sikwondo View Post
    Not asking anyone to do it for me, just pretty new to jQuery that's all, so no idea where to even start with detaching items from the DOM. Thanks for the info though, I will have a search around.
    4 minutes until midnight. Let's see what we can do.

    If you create a variable that is a document fragment, you can then use the appendTo command to move the in-page elements off of the page and in to the document fragment instead.

    Night...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    4 minutes until midnight. Let's see what we can do.

    If you create a variable that is a document fragment, you can then use the appendTo command to move the in-page elements off of the page and in to the document fragment instead.

    Night...
    Gobbledygook! Haha. Ok, that will get me started... reading up on .detach() too. Thanks Paul, g'night.

  8. #8
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,161
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Would this work?
    Code:
    $('#images li:nth-child(9n)').html($('#images li:nth-child(9n)').html() + '</ul><ul>');

  9. #9
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    Would this work?
    Code:
    $('#images li:nth-child(9n)').html($('#images li:nth-child(9n)').html() + '</ul><ul>');
    That didn't work for me unfortunately

  10. #10
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,161
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Okay, the following works for me:
    Code:
    <html>
    	<head>
    		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    		<script type="text/javascript">
    			$(function()
    			{
    				var MAX_ITEMS_IN_EACH_GROUP = 9
    				var items = $('#images li');
    				if (items.length > MAX_ITEMS_IN_EACH_GROUP)
    				{
    					do
    					{
    						var newList = $('<ul></ul>');
    						newList.appendTo($('#images').parent());
    						
    						for (i = MAX_ITEMS_IN_EACH_GROUP; i < items.length && i < MAX_ITEMS_IN_EACH_GROUP * 2; i++)
    						{
    							items.eq(i).appendTo(newList);
    						}
    						
    						items = $('#images li');
    					} while(items.length > MAX_ITEMS_IN_EACH_GROUP);
    				}
    			});
    		</script>
    	</head>
    	<body>
    		<ul id="images">
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    		</ul>
    	</body>
    </html>

  11. #11
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, cpradio - that is absolutely fantastic! Thank you so much for doing that!

    It works perfectly, gonna spend some time going through it line by line to learn what each bit does, do you mind if I post back if I am unsure what certain bits?

  12. #12
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,161
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Sure, just let me know what information you want to know and I'll be glad to answer it.

  13. #13
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,161
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    @Sikwondo,

    I've cleaned up the code a bit (did some refactoring of the jQuery objects too) and turned it into a plugin (so calling it is a tad bit easier).

    Code:
    <html>
    	<head>
    		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    		<script type="text/javascript">
    			$(function()
    			{
    				// Call the splitList on the #image ul object
    				$('#images').splitList({ maxItems: 9 });
    				$('.demo2').splitList({ maxItems: 5 });
    			});
    			
    			// Starting from here to the end of the script tag, this can be put into its own file
    			(function($) {
    				$.fn.splitList = function(options)
    				{
    					// Loop through the jQuery object that splitList is being called on
    					return this.each(function()
    						{
    							// Default MAX_ITEMS value
    							var MAX_ITEMS_IN_EACH_GROUP = 9;
    							
    							// Check if the User overrode the MAX_ITEMS default
    							if (options.maxItems != undefined)
    							{
    								MAX_ITEMS_IN_EACH_GROUP = options.maxItems;
    							}
    							
    							// Set this to the current jQuery object being executed
    							var currentElement = $(this);
    							var insertAfterElement = currentElement;
    							// Find the li tags for the current ul object
    							var items = currentElement.find('li');
    							
    							// Check if there are more li tags than the defined MAX_ITEMS
    							if (items.length > MAX_ITEMS_IN_EACH_GROUP)
    							{
    								// Loop through the li tags, so long as there are more li tags than the defined MAX_ITEMS
    								do
    								{
    									// Create a new list
    									var newList = $('<ul></ul>');
    									// Insert the new list onto the page
    									newList.insertAfter(insertAfterElement);
    									
    									// Loop through the li tags starting at the point the MAX_ITEMS was exceeded and going through to end of the list 
    									// or to the next point where MAX_ITEMS is exceeded
    									for (i = MAX_ITEMS_IN_EACH_GROUP; i < items.length && i < MAX_ITEMS_IN_EACH_GROUP * 2; i++)
    									{
    										// Append the li tag to the new list
    										items.eq(i).appendTo(newList);
    									}
    									
    									// Redefine the li tag items on the current ul object so the while loop behaves
    									items = currentElement.find('li');
    									
    									// Set the insertAfterElement to newList so if a third list is built, it will be added after this one
    									insertAfterElement = newList;
    								} while(items.length > MAX_ITEMS_IN_EACH_GROUP);
    							}
    						});
    				};
    			})(jQuery);
    		</script>
    	</head>
    	<body>
    		Demo 1: 
    		<ul id="images">
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    		</ul>
    		<hr />
    		Demo 2: First Set
    		<ul class="demo2">
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    		</ul>
    		
    		Demo 2: Second Set
    		<ul class="demo2">
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
    		</ul>
    	</body>
    </html>

  14. #14
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    Sure, just let me know what information you want to know and I'll be glad to answer it.
    Hi cpradio... I don't fully understand the code, I made some comments on the jQuery code... if you have a chance, could you take a look and let me know what the specific lines I commented on mean?

    No problem if you don't have time, just trying to get a better understanding of the code.

    Many thanks

    Code:
    var maxImages = 9, // Set a variable wit ha value of 9
    			items = $('#images li'); // Set a variable for the list items within #images
    
    		if (items.length > maxImages) { // If the number of li items is more than maxImages (9)
    			do {
    				var newList = $('<ul></ul>'); // Variable for a new unordered list
    				newList.appendTo($('#images').parent()); // Add this new UL to the #images div (appended - at the end)
    
    				for (i = maxImages; i < items.length && i < maxImages * 2; i++) // Could you please explain this line?
    				{
    					items.eq(i).appendTo(newList); // Could you please explain this line?
    				}
    
    				items = $('#images li');
    			} while(items.length > maxImages); // Could you please explain this line?
    		}

  15. #15
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you

    I will use this new code... thanks again. Really do appreciate the help, have been banging my head against a wall and this has helped me so much.

  16. #16
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,161
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Not a problem, let me know if my comments need better clarification in the new code, and I'll gladly explain them better

  17. #17
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    Not a problem, let me know if my comments need better clarification in the new code, and I'll gladly explain them better
    Thank you

    I pretty much follow most of the code.. but I get a little lost at the following:

    Code:
    for (i = maxItems; i < items.length && i < maxItems * 2; i++)
    							{
    								// Append the li tag to the new list
    								items.eq(i).appendTo(newList);
    							}
    							
    							// Redefine the li tag items on the current ul object so the while loop behaves
    							items = currentElement.find('li');
    							
    							// Set the insertAfterElement to newList so if a third list is built, it will be added after this one
    							insertAfterElement = newList;
    						} while(items.length > maxItems);
    					}
    Could you explain what this but does... sorry to be a pain.

  18. #18
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,161
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Not a problem,

    The for loop, starts at the first point the original list exceeds the maximum number of items you want shown in each list. So if there are 21 items in the original list and you only want each list to contain 9 items, it starts at position 9.

    It then cycles through the remaining items in the list (or up until the next maximum number of items would be reached). So since there are 21 items in the original list, and we started at position 9, it will run from position 9 to position 18 (9 items, as that is defined as our maximum).

    It then takes each item it is looping through and moves it to the New List that was created immediately before the for loop. So now the original list has 12 items and the new list it just created has 9 items.

    However, because jQuery caches information, I have to run the currentElement.find('li') statement again and store it back into items so that jQuery now realizes there are only 12 items in the original list, not 21 items.

    Then to ensure the 3rd list will show up after the new list of 9 items we just created, I update insertAfterElement to be the list that was just created (instead of the original list of items).

    To see the affects of each of these, is quite simple, if you remove the code "&& i < maxItems * 2" from the for loop, you will see the second list it creates (when there are 21 items in the original list) will contain 12 items. So you will have 1 list with 9 items, and a second with 12 items (no third list is created).

    To see how jQuery caches the items (just an FYI, this causes an infinite loop), comment out the line "items = currentElement.find('li');". The browser will continuously spin and likely lock up (or ask you to kill the script) because the do-while loop will never exit as jQuery thinks there is always 21 items in the list.

    To see how the insertAfterElement plays into account, comment out the line "insertAfterElement = newList;" and you will see the final output being 3 lists, the first containing 9 items, the second, contains 3 items, and the last contains 9 items. Whereas, the expected output is 9 items, 9 items, then 3 items.

    Hope this helps.

  19. #19
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's really cool... thanks so much

  20. #20
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I may be pushing it a bit asking for more help so tell me where to go if so but I am trying to add previous and next buttons, and only show one UL at a time, and cycle through them

    I have started to code this together, but the problem I am having is how to update the value of curGal which I thought could be assigned to the current gallery.

    I wanted to set it so that when the user is on the first UL, the previous button is dimmed and not clickable (but not sure how to do this so have just tried to set it up as hidden. THen, then the user is on the last gallery, the next is dimmed and unclickable (or hidden).

    This is the code I have so far:

    The paginate buttons:
    Code:
    <div class="paginate"><button class="prev" data-dir="prev">Previous page</button> / <button class="next" data-dir="next">Next page</button></div>
    Code:
    // Hide all of the Gallery ULs
    $('ul.gallery').hide();
    
    // Set variable for the first Gallery and show it
    var startGal = $('ul.gallery:first').show();
    
    
    // Find out the number of Galley ULs
    var numberGal = $('ul.gallery').length,
    	curGal = $('ul.gallery:first');  // Keep track of which gallery the user is on
    
    // Listen for when one of the buttons is clicked
    $('.paginate').show().find('button').on('click', function() {
    	var direction = $(this).data('dir');
    
    	// Update current gallery value when clicked
    	( direction === 'next' ) ? curGal.next() : curGal.prev();
    
    	// if first gallery
    	if ( curGal === 1 ) {
    		prev.hide();
    	}
    
    	if ( curGal === numberGal ) {
    		next.hide();
    	}
    
    });
    
    var next = $('button.next'),
    	prev = $('button.prev');
    
    next.on('click', function() {
    	curGal.fadeOut(200);
    	curGal.next().delay(200).fadeIn(200);
    }); // Show the buttons (hidden for users with JS disabled)
    
    prev.on('click', function() {
    	curGal.fadeOut(200);
    	curGal.prev().delay(200).fadeIn(200);
    });

  21. #21
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,161
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Okay, here is the code I came up with http://jsfiddle.net/qJzfP/3/

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    Okay, here is the code I came up with http://jsfiddle.net/qJzfP/3/
    Sorry for the delayed response, my wife wouldn't let me do any work this weekend!

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

    Thanks again

  24. #24
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    Thanks for this Paul, I will have a look at these

  25. #25
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •