How to Make Sortable Lists in iWeb
You can construct lists that are more interactive on your iWeb website by making them sortable. A sortable list enables your visitor to click the list heading so that it automatically organizes the data, such as arranging itself in alphabetical order. To do this in iWeb you use HyperText Markup Language (HTML) table code to present the list data and a script file, such as JavaScript or PHP, to perform the sort action. Use the tools in your iDisk and iWeb applications to successfully make a sortable list on your Web page.
Other People Are Reading
Instructions
-
-
1
Click a spot on your computer desktop to activate the Finder menu at the top of the screen. Click the "iDisk" and "My iDisk" options under the Go menu and log in to your iDisk to connect to the server that hosts your iWeb website. Click the "Web" folder that displays in the dialog window and then click the "Sites" folder to access the root of your server.
-
2
Click and drag your script file to the Sites folder to upload it to the server root. If you do not already have a script file, point your browser to a website such as Kryogenix.org, JavaScript Kit or DHTMLGoodies.com to obtain one.
-
-
3
Launch your iWeb application and click the "Add Page" button in the toolbar at the bottom of the iWeb window that opens. Alternately, click an existing page that appears on the left side of the window to open it.
-
4
Click the "Show Media" button in the toolbar and click the "Widgets" tab that appears to the right. Click and drag the "HTML Snippet" icon to the area on the page where you want your sortable list to appear. This action opens a text box where you enter your code.
-
5
Type the HTML table code that presents your list. For instance, create a one-column table for five list items like so:
<table>
<tr><th>List Heading</th></tr>
<tr><td>List Item 1</td></tr>
<tr><td>List Item 2</td></tr>
<tr><td>List Item 3</td></tr>
<tr><td>List Item 4</td></tr>
<tr><td>List Item 5</td></tr>
</table>Be sure to replace the "List Heading" and "List Item" entries with your own list data.
-
6
Position your cursor before the opening <table> tag and enter "<script src=" "></script>" to attach the script that makes your list sortable. Type a backslash between the quotation marks of the opening script element, and follow this with your script file name. Your complete code now looks like this:
<script src="/scriptname.js"></script>
<table>
<tr><th>List Heading</th></tr>
<tr><td>List Item 1</td></tr>
<tr><td>List Item 2</td></tr>
<tr><td>List Item 3</td></tr>
<tr><td>List Item 4</td></tr>
<tr><td>List Item 5</td></tr>
</table> -
7
Click the "Apply" button to finish inserting the sortable list on your page.
-
1
