Plugin options and API

jNavigate enables a content area to be loaded asynchronously from links and form controls both internal and external to that content area. jNavigate also provides utility methods for loading resources into a content area with the addition of dynamic loading overlays. This page details the API for jNavigate with descriptions for all of it's options, events and methods.

Usage

To use jNavigate with it's default options simply enable your content area as you would any other jQuery plugin. In the basic example below "#my-content-section" is an example selector for a content area. See the jQuery selector documentation if you need help with selectors.

  $("#my-content-section").jNavigate();

A mored detailed example shown with a simple PHP setup for a single paged portfolio site can be found here. Alternatively, if you would like a free, ready built solution with plugin options such as contact forms and image galleries be sure to checkout Portfolio plus.

Option reference

1. intTrigger

   Accepts: selector (".jnavigate-int-trigger")

   Selector for the internal navigation links located within the content area. If selector references an a tag then the content area will be loaded from the tags href attribute. If selector references a form control then the form is posted to the action URL of the parent form.

2. extTrigger

   Accepts: selector (".jnavigate-ext-trigger")

   Selector for the external navigation links located within the content area. If selector references an a tag then the content area will be loaded from the tags href attribute. If selector references a form control then the form is posted to the action URL of the parent form.

3. switchContent

   Accepts: boolean (true)

   A switch that determines if jNavigate should replace the HTML of the content area. This can be used in conjunction with the loaded event if you require to do some pre-processing with the content returned from the server before updating.

4. scrollToPostion

   Accepts: boolean (false)

   A switch that determines if jNavigate should sroll the window to either the top of the page or to the target hash in the pages URL.

5. scrollSpeed

   Accepts: Number (0)

   Used in conjunction with the scrollToPosition option. The speed at which to animate the window scrolling.

6. showLoader

   Accepts: boolean (true)

   A switch that determines if jNavigate should display a loading overlay over the content area during the request process.

7. loadingColor

   Accepts: string ("#FFFFFF")

   The background colour of the loading overlay. Use this option with showLoader.

8. spinner

   Accepts: string ("style/images/ajax-loader.gif")

   The background image URL of the loading overlay. Use this option with showLoader.

9. spinnerPosition

   Accepts: string ("center")

   The background position of the loading overlay. Use this option with showLoader.

10. useHistory

    Accepts: boolean (true)

    A switch that determines if the state of the application/site should be pushed onto the history stack. Only works if visitors web browser supports the History API.

11. cacheDocumentTitle

    Accepts: boolean (true)

    A switch that determines if the document title should be stored with the history state. Use in conjunction with useHistory to keep store the document title in the data attribute of the content area.

Events

1. loaded

   A function to run once the HTML has been successfully retrieved from the server. The functions scope is bound to the jNavigate container element and will receive the HTML loaded from as it's only parameter.

2. error

   A function to run on the event that the request should fail. See the jQuery Ajax documentation for more details on the error event.

Methods

1. overlay()

   Add a loading overlay to an element. Example coming soon.

2. navigate()

   Load a url into a content area. Example coming soon.

3. destroy()

   Remove the plugin from selected content areas. Example coming soon.