Libguides reusable content

A brief (and not polished) overview of what the script does and why it's useful. Instructions are below.

To enable the script, you need to do a couple things.

If your guide is in a Tabs layout:

You will need to move all your content boxes into the second column on any page you'll be using the script. Click on and then select Boxes under Reorder to move your content boxes. You can leave your profile box in the third column, if you'd like. (The script should still work with any number of boxes in the third or fourth columns, but I don't guarantee it; plus, it kind of defeats the purpose of the script, so I don't recommend it.)

Then, in the first column, add a standard box to house the list of boxes on the page.

Option A

If you want the script to work on only one or a few pages of your guide, add a widget on each page where you want to use the script:

• Click Add/Reorder in the empty box you placed in the first column and select Media/Widget
• In the popup box, click Reuse Existing Widget and start typing Page organizing script (tabs layout) to select the widget.
  • Note: for users outside Princeton, you will first need to create a widget for reuse. In your blank content box, add a new Media/Widget, give it a name, and then add this code to the Embed Code box:

     <script type="text/javascript" src="//s3.amazonaws.com/libapps/sites/77/include/autoTocNav_v2_tabs.js"></script><link rel="stylesheet" type="text/css" href="//s3.amazonaws.com/libapps/sites/77/include/autoTocNav.css">

    This only needs to be done once, then you can reuse the widget on any page as explained above.
• After selecting the widget, click Save.
• Do this for each page where you will be using the script.

Option B

If you want the script on all pages of a guide in Tabs layout:

• Paste the following lines of code to the Guide Custom JS/CSS box (see instructions for Sidenav layout):

  <link rel="stylesheet" type="text/css" href="//s3.amazonaws.com/libapps/sites/77/include/autoTocNav.css"> <script type="text/javascript" src="//s3.amazonaws.com/libapps/sites/77/include/autoTocNav_v2_tabs.js"></script>

• Click Save.

If you're using the Sidenav layout:

• In the guide edit options, click on Guide Custom JS/CSS

• Paste the following text into the box that appears:

  <link rel="stylesheet" type="text/css" href="//s3.amazonaws.com/libapps/sites/77/include/autoTocNav.css"> <script type="text/javascript" src="//s3.amazonaws.com/libapps/sites/77/include/autoTocNav_v2_sidenav.js"></script>

• Click Save.
• Note: I don't recommend you use this in conjunction with the sidenav affix/sticky menu. Weird things may happen.

I'm sharing this script under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. There's a comment at the beginning of the script with the attribution.