edit.html

<%-- :mode=jsp: --%>
<%@ include file="../header.jsf" %>

<link rel="stylesheet" type="text/css" href="${cdn}${jqt}/css/scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css" href="${cdn}${jqt}/css/scrollable-buttons.css" />
<link rel="stylesheet" type="text/css" href="${cdn}${jqt}/css/scrollable-navigator.css" />

<p>
	This demo shows you how to add and remove scrollable items. Notice how the scrollable navigator grows and the next/prev buttons behave correctly.
</p>

<div style="margin:20px -15px;">
	<%@ include file="edit.htm" %>
</div>

<br />

<p>
	You can add items to a circular scrollable as well. This page's source code is identical to the <a href="index.html">minimal setup</a> except that the add and remove buttons were added.
</p>

<h3>A new item</h3>

<p>
	The item we are adding is the child element of <samp>DIV#newItem</samp>:
</p>

<pii:code lang="html">
${html}
</pii:code>

<h3>addItem function</h3>

<p>
	Every added item is a <samp>clone</samp> of a single DIV. We use <samp>addItem</samp> method from the <a href="${jqt}/scrollable/index.html#api">Scrollable API</a> to add new items. It takes one argument which is the new item.
</p>

<pii:code>${actions}</pii:code>


<div class="box petrol">
	Show this demo as a <a href="edit.htm">standalone page</a>.
</div>

<p>
	<a href="${jqt}/credits.html" id="credits">Photo credits &raquo;</a>
</p>