Howto: An 'add item' form on your website

Nucleus provides facilities to add an 'add item' form to your weblog. It adds an 'add item' link that shows and hides the 'add item' form right above the current contents of your weblog. Entering text in this form results into an instant preview, so you can immediately see how the actual weblog item will look like.

All modifications below apply to the skin for the main index page. You don't need to alter any templates.

1. JavaScript code

First of all, you need to include the edit.js Javascript code by putting the following line somewhere in between the <head> and </head> tags. This file contains the functions that are needed to make the preview work and to hide/show the 'add item' form.

<script type="text/javascript"
        src="nucleus/javascript/edit.js"></script>

2. Indicate where the form will show up

The, you add a logical container somewhere on your page, where you want to have the 'add item' form. The "display:none;" makes sure it is hidden.

<div id="edit" style="display:none;">
...
</div>

3. Code that inserts the form and preview

Now, you can add your custom HTML into this container, and use <%additemform%> and <%preview(templatename)%> to insert the 'add item' form and the preview code respectively. An example is given below

<h2>Add Item</h2>
<%additemform%>

<h2>Preview</h2>
<%preview(mytemplate)%>

4. The 'add item'-link

And the finishing touch: a link or button to trigger the visibility of the form. Two examples are given. The first one is a simple link:

<a href="javascript:showedit();">add item</a>

The second example is a hidden button in the topleft corner

<div style="position: absolute; left: 0px;
            top: 0px; width: 10px; height: 10px"
     onclick="javascript:showedit();">
</div>
Skins & Templates