jCarrotCell Demo: Navigation

Previous & Next

Using the default mark up, there is no need to do anything special in order for previous and next to work except to style them appropriately in the CSS.

The following example shows how to move the previous and next buttons out of the .carrotCell container.

<div id="prevNextExample">

	<div class="controls"> 
		<button class="fancyPrev">Previously in Kittens</button>
		<button class="fancyNext">Next in Kittens</button>
	</div>
	
	<div id="prevNextKitten" class="carrotCell">			
		<div class="carrotCellView">
			<ol> ... </ol>       
		</div>					
	</div>
</div><

Set the containsControl to boolean false to indicate that the previous and next are not inside .carrotCell, then set the controlScope to the appropriate selector. Pass in the prevSelect and nextSelect selectors to find the buttons. If nothing is passed in for controlScope, it is assumed that the document body is the scope. Check the documentation for more detail.

$('#prevNextKitten').carrotCell({
	containsControl: false,
	controlScope: ".controls",
	prevSelect: ".fancyPrev",
	nextSelect: ".fancyNext"
});

Keyboard Navigation

By default the left and right arrow keys control horizontal carrotCells and up and down control vertical carrotCells.

Use the left and right arrow keys to navigate the following example.

Set key to boolean true in the carrotCell parameters. Note that since key events are a global document event, be careful when binding multiple listeners to the same event.

$('#keyKitten').carrotCell({ key: true });

In this example P and Q are assigned to be the forward and backward key events instead of arrow keys.

Pass key as true, keyBack and keyForward as the corresponding Javascript key event code that will control forward and back.

$('#keyCustomKitten').carrotCell({ 
	key: true,
	keyBack: 81, // Q key
	keyForward: 80 // P key
});

Auto Generated Navi

CarrotCell can auto generate a paging control, or the "navi". The number of pages is calculated based on how many times carrotCell needs to scroll before reaching the end.

Create an empty container for the .navi. The following example will generate an ordered list (OL) of clickable numbers. It is also possible to use DIV or UL instead. The code will inspect the .navi container and generate the appropriate children nodes.

<div id="naviKitten" class="carrotCell">	

	<ol class="navi"></ol>		
	
	<div class="carrotCellView">
		<ol>...</ol>       
	</div>							
</div>>

Set parameter navi to boolean true and makeNavi to boolean true.

$('#naviKitten').carrotCell({ 
	navi: true,
	makeNavi: true
});

The resulting generated navi mark up inside.carrotCell will look like:

<ol class="navi">
	<li class="naviItem current">1</li>
	<li class="naviItem">2</li>
	<li class="naviItem">3</li>
</ol>

The following uses DIVs instead of OL when generating navi.

<div id="naviKitten" class="carrotCell">	

	<div class="navi"></div>	
		
	<div class="carrotCellView">
		<ol>...</ol>       
	</div>							
</div>

The resulting generated navi mark up will look like:

<div class="navi">
	<div class="naviItem current">1</div>
	<div class="naviItem">2</div>
	<div class="naviItem">3</div>
</div>

By default the paging controls are set to be numbers, but custom names can be passed through the data attribute navi of .navi.

In this example only 2 names are passed in, and the 3rd page is using the default number name.

Note that data-navi is inclosed in single quotes as per JSON specification and contents of the array in double quotes. Also note that you can not use single or double quotes in the names. For more versatility use the custom navi explained in the next section.

<ol class="navi" data-navi='["fabulous kitten set", "basket kitten set"]'></ol>

Custom Navi

For more control of what content goes into the navi, create the complete markup.

Note in this example there are only 2 paging controls created when there are 3 pages so the 3rd page can not be accessed. To find out how many pages there are in the carrotCell, do the math manually, or access the API method getPageCount. See the API demo and the documentation for more information.

<div id="naviCustomKitten" class="carrotCell kitten">	

	<ol class="navi">
		<li class="naviItem">kitten's with single quotes</li>
		<li class="naviItem">"lol more kitten"</li>
	</ol>
	
	<div class="carrotCellView">
		<ol>...</ol>       
	</div>							
</div>