SSL Labs ScoreSecurityHeaders.io ScoreHSTS Preloaded

Top of the Page 3.1

Overview

This system plugin operates on every HTML page to provide a fixed link to return users to the top of the page - hence the name. This plugin operates with either MooTools or jQuery as the administrator prefers.

Installation

  1. Download Top of the Page from the RicheyWeb download page.
    • This page will remain unlinked, as the link may change in the future. Visit http://www.richeyweb.com and use the search feature - search for "top of the page".
  2. In Joomla /administrator, go to the "Extensions" menu, the "Manage" sub-menu, and the "Install" sub-menu.
  3. Select the "Upload Package File" tab
  4. Press the "Choose File" button to browse your system and locate the plugin file you downloaded
  5. Press the "Upload & Install" button

At this point, the extension is installed but not enabled. You can find the plugin by going to the Extensions menu and selecting "Plugins". When in the plugin manager, search for "top of the page".

The plugin can be enabled without configuration, but will present a bright yellow button that may not look good with your color scheme.

Configuration

Plugin

The "Plugin" tab is the first configuration tab, and it contains only 2 settings, which are mostly self explanatory.

  • Run in /administrator - determines if the plugin will provide a button for users in /administrator.
    • If set to "No" the button will only appear on the front-end of the site.
    • If set to "Yes", you must consider how you're going to style it. If you've chosen to style using a stylesheet, this means you must alter the template you're using in /administrator
  • Omit Button Text - provides a button with no text. This is useful for people who want to use images, or have a style planned which doesn't need text.

JavaScript

The "JavaScript" tab contains one setting.

  • Load JS Library - Should Joomla load the chosen library automatically.
    • More advanced users may have a specific version of jQuery that isn't provided by Joomla. Having the ability to prevent the library from loading is meant to prevent having multiple versions of the same library loaded at the same time. Most users can safely choose "Yes" (the default)

Button

The "Button" tab presents options regarding the location and display of the button (but not the appearance).

  • Visible Opacity: 0-100 (default 100) - percentage of opacity (0 is transparent, 100 is opaque)
  • Visibility Duration: default 250 - number of milliseconds for the transition from invisible to visible (FYI - there are 1000 milliseconds in 1 second)
  • (Pro Feature) Slide In: Default "No" - should the button slide in when being made visible
  • (Pro Feature) Slide Direction: Default "Bottom" - which direction should the button slide from.
    • The button cannot slide in from a page edge. So, if it's on the top, it can't slide in from the top. If it's on the left, it can't slide in from the left.
  • Automatic z-index: Default "No"
    • When enabled, a script runs to determine what the highest z-index is, and places the button above that.
  • Link Location: Default "Bottom Right"
    • options are: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right
    • The position can be adjusted via CSS
  • (Pro Feature) Icon: Default "icon-home"
    • any valid icon class font-awesome or otherwise.
  • (Pro Feature) Button Content
    • Inject any HTML into the button span tag. If you plan to use the translated button text, just add {PLG_SYS_TOPOFTHEPAGEPRO_GOTOTOP} in the location where you want the translated text and the plugin will take care of the rest.
    • One of the most often requested features which I have refused to make available is the ability to write button text into a form field. This prevents use of the Joomla language capabilities and effectively confines the button to a single language. Usint this button content feature, it is possible to enter your own text into the field.

Page

The "Page" tab presents options for button behavior as it relates to the page scroll.

  • Button Reveal Position: default 200 (pixels)
    • the number of pixels the page must be scrolled before the button becomes visible.
    • if set to 0, the button will always be visible
  • Always at Top: default "No"
    • Added by user request - should the page ALWAYS load at the top of the page. This overrides any URL passed anchors.
  • Scroll Duration: default 500 (milliseconds)
    • The amount of time it takes for the scroll effect to occur once the button is pressed.
  • Scroll Transition: default "linear"
    • Select any of the available transitions - linear or swing.
    • (Pro Feature) choose from all of the available jQuery transitions.
  • (Pro Feature) Easing: default "ease in out"
    • Most of the transitions can utilize easing. Just play with it, they're really neat.

CSS

The "CSS" tab presents styling configuration options for the button.

  • Use Styles: default "Yes"
    • If set to "Yes", the "Link Style" text editor will be used to style the button.
    • If set to "No", the plugin assumes that the style will be applied by an existing stylesheet, and will ignore the "Link Style" data.
  • Link Style: defaults to styling for a yellow button
    • Use any style or method you like. A list of button "Recipes" is available, linked from the plugin page on RicheyWeb.

Button Text

The "Button Text" tab details, step-by-step, the actions required to change the button text. Using this method, the administrator of a multi-lingual site will be able to use the same language tools as any other language capable Joomla extension. Additionally, this method provides an upgrade-safe method to change the English button text.

Styling

The plugin creates and inserts the following HTML.

The starting style is different, depending on the button position settings, but the basic structure is this:

<span id="plg_system_topofthepage" href="#top" rel="noindex,nofollow">
<span class="icon-home"></span> Return to Top
</a>

Look at the style "Recipes" on RicheyWeb.

HELP

  • I can't see my button!

Did you turn on the automatic z-index, add a ridiculously high z-index value into CSS for #plg_system_topofthepage, set opacity to 0 or maybe your page is too short and you never reach the "Button Reveal Position". There are many reasons the button doesn't appear.