LoginLogin  Blog About
Search:

Support » Knowledge Base » Files »

Setting up paged navigation for widget "File List"

When publishing a large list of files using WebAsyst Files widget "File List" your widget may take up much space on the website and be not very handy in use. To make it more compact set up paged navigation for your widget as described below:

  1. Delete the large widget, all files will still remain in your account. Create smaller widgets each containing as many files as many of them you would like to have displayed on each widget "page".
  2. Go to section "Widgets" of your WebAsyst Files application, copy the HTML code of the first smaller widget and paste it to the HTML source of your website.
  3. Add attribute name="paged_frame" to the widget HTML code, e.g.:
    <iframe allowtransparency="true" scrolling="AUTO" width="650" height="430"
    frameborder="0" src="http://domain.com/published/WG/show.php?q=UzVBUkhPU1ND-74f406c"
    name="paged_frame"></iframe>
  4. Add the necessary number hyperlinks to your website that would be used to page through the file list. The HTML code of hyperlinks must contain at least 2 attributes:
    • attribute href containing the URL of the widget's IFRAME tag whose contents should be displayed when that link is clicked on (URLs of all widgets' IFRAME tags can be copied in section "Widgets");
    • attribute target containing value "paged_frame" (it must be equal to the value of attribute name in the HTML code of the IFRAME tag specified in step 3).

Sample HTML code of the "File List" widget and paging hyperlinks:

<p>
Page: <a href="http://domain.com/published/WG/show.php?q=V0E=-74f40a6c"
target="paged_frame">1</a> |
<a href="http://domain.com/published/WG/show.php?q=V0E=-51eea13a"
target="paged_frame">2</a> |
<a href="http://domain.com/published/WG/show.php?q=V0E=-58064619"
target="paged_frame">3</a> |
<a href="http://domain.com/published/WG/show.php?q=V0E=-8d70c10d"
target="paged_frame">4</a> |
<a href="http://domain.com/published/WG/show.php?q=V0E=-f84de45b"
target="paged_frame">5</a> |
<a href="http://domain.com/published/WG/show.php?q=V0E=-d4d88045"
target="paged_frame">6</a> |
<a href="http://domain.com/published/WG/show.php?q=V0E=-21d2ba08"
target="paged_frame">7</a>
</p>
<iframe allowtransparency="true" scrolling="AUTO" width="650" height="430"
frameborder="0"
src="http://domain.com/published/WG/show.php?q=UzVBUkhPU1ND-74f40a6c"
name="paged_frame"></iframe>

Here is how your website might look with paged navigation set up: