ScreenSteps

Using jQuery to reorder the sidebar in the 2015 (Old) Template

Updated on

In ScreenSteps you aren't able to reorder sidebar items in the site sidebar. You can toggle sidebar items on and off, but you can't reorder them. This article will show you how to use jQuery to reorder the items in your sidebar.

Key Concepts

CSS Selectors

In this approach we are going to use jQuery to grab the sidebar elements and place them in the order we want. To do this we need to know the classes or ids of the sidebar items. Here is a list of the main elements.

CSS Selector Description
#screensteps-sidebar Sidebar container
#screensteps-rss RSS Feed
#sidebar-search Search widget
#sidebar-chapters Chapters from your manual
#manual-pdf Manual PDF
#other-assets Other manuals in the site
#sidebar-message Message assigned to a site and/or manual
#manuals-tags-list Tags for a manual
#space-tags-list Tags for a site
#google-translator Google translator widget
#lesson-sidebar-info Last updated info and links to article and manual PDFs
#sidebar-comments Comments count

Default sidebar ordering

There are two types of sidebars in ScreenSteps:

  • The article sidebar that is shown whenever you view an article
  • The main sidebar which is shown on the site table of contents (TOC), manual TOC, search results and chapter TOC.

Here are the default sequences of elements for each sidebar type:

Article

  1. rss
  2. sidebar search
  3. chapters
  4. message
  5. lesson info (PDFs)
  6. other assets
  7. recent updates
  8. tags
  9. translator
  10. comments

Main sidebar

  1. rss
  2. chapters
  3. message
  4. recent updates
  5. manual PDF
  6. other assets
  7. tags
  8. translator

Page types

There are several different page types in ScreenSteps. Each page type has a unique class selector. This class selector allows you to target CSS and Javascript to specific pages.

This table lists the page type selectors.

CSS Selector Description
#screensteps-content-wrapper.site-index Site TOC
#screensteps-content-wrapper.manual-toc Manual TOC
#screensteps-content-wrapper.chapter Chapter TOC
#screensteps-content-wrapper.lesson Article
#screensteps-content-wrapper.site-search Search results

How to reorder sidebar items

With this information we can now use jQuery to reorder the sidebar items. Here is some example code that will reorder the sidebar for the Site TOC, Manual TOC, Chapter TOC and search results.

if (jQuery('#screensteps-content-wrapper.site-index, #screensteps-content-wrapper.manual-toc, #screensteps-content-wrapper.chapter, #screensteps-content-wrapper.site-search').length) {
	var sidebar = jQuery('#screensteps-sidebar');
	sidebar.prepend(jQuery('#screensteps-rss'));
	sidebar.prepend(jQuery('#recent-updates'));
	sidebar.prepend(jQuery('#manual-pdf'));
	sidebar.prepend(jQuery('#sidebar-chapters'));
};
Click to copy

This will produce a sidebar in the following order:

  1. chapters
  2. manual-pdf
  3. recent-updates
  4. RSS

Notice that the javascript is adding them in reverse order. The reason for this is that we want to push items to the top of the sidebar and then slide them down as we add a new ones.

Here is an example of how to reorder the article sidebar.

if (jQuery('#screensteps-content-wrapper.lesson').length) {
	var sidebar = jQuery('#screensteps-sidebar');
	sidebar.prepend(jQuery('#screensteps-rss'));
	sidebar.prepend(jQuery('#recent-updates'));
	sidebar.prepend(jQuery('#lesson-sidebar-info'));
	sidebar.prepend(jQuery('#sidebar-chapters'));
};
Click to copy

Whenever using jQuery code you should wrap your code in the jQuery ready function. So a full example would look like this:

jQuery(document).ready(function() {
	if (jQuery('#screensteps-content-wrapper.lesson').length) {
		var sidebar = jQuery('#screensteps-sidebar');
		sidebar.prepend(jQuery('#screensteps-rss'));
		sidebar.prepend(jQuery('#recent-updates'));
		sidebar.prepend(jQuery('#lesson-sidebar-info'));
		sidebar.prepend(jQuery('#sidebar-chapters'));
	};
	if (jQuery('#screensteps-content-wrapper.site-index, #screensteps-content-wrapper.manual-toc, #screensteps-content-wrapper.chapter, #screensteps-content-wrapper.site-search').length) {
		var sidebar = jQuery('#screensteps-sidebar');
		sidebar.prepend(jQuery('#screensteps-rss'));
		sidebar.prepend(jQuery('#recent-updates'));
		sidebar.prepend(jQuery('#manual-pdf'));
		sidebar.prepend(jQuery('#sidebar-chapters'));
	};
});
Click to copy

To add javascript to your site, follow these instructions.

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article Variables available in the Header and Footer sections of the 2015 (Old) Template
Next Article Customizing the date format for "Last Updated" in the 2015 (Old) Template
Still Need Help? Contact Us