Using jQuery to reorder the sidebar

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'));
};

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'));
};

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'));
	};
});

To add javascript to your site, follow these instructions.

0 Comments

Add your comment

E-Mail me when someone replies to this comment