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.
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
- rss
- sidebar search
- chapters
- message
- lesson info (PDFs)
- other assets
- recent updates
- tags
- translator
- comments
Main sidebar
- rss
- chapters
- message
- recent updates
- manual PDF
- other assets
- tags
- 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.
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:
- chapters
- manual-pdf
- recent-updates
- 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