Callbacks

Wiki Pages: Home | Setup | Options | Methods | Callbacks | Log

Callbacks

initialized (v2.4)

• This callback is executed after the plugin has finished initialization.

• Set up the option as follows:

  $("#menu").visualNav({
    initialized : function(api){
      // api = visualNav object
    }
  });

beforeAnimation (v2.3)

• This callback is executed immediately before the plugin animates the page to the selected content.

• This callback is not executed if the user manually scrolls the document.

• Set up the option as follows:

  $("#menu").visualNav({
    beforeAnimation : function(api){
      // api = visualNav object
    }
  });

complete (v2.3)

• This callback is executed immediately after the plugin has finished animating to the selected content.

• This callback is not executed if the user manually scrolls the document.

• Set up the option as follows:

  $("#menu").visualNav({
    complete : function(api){
      // api = visualNav object
    }
  });

changed (v2.4)

• This callback is executed every time the menu (hash) changes.

• So going from the first to third menu item, the changed callback will fire off twice (2nd & 3rd menu item), then fire off the complete callback.

• Set up the option as follows:

  $("#menu").visualNav({
    changed : function(api){
      // api = visualNav object
    }
  });

Access the API (visualNav object)

• Access the api directly as follows:

  var api = $('#menu').data('visualNav');

  or as a parameter from the callback function

  $('#menu').visualNav({
    complete : function(api) {
      // api = visualNav object
    }
  });

API variables

api.$el

• A jQuery object of the menu wrapper, or element the plugin was initialized upon.
• This would be $('#menu') in the examples above.

api.$links

• A jQuery object of all menu control links, not the control links within the content (defined by the contentLinks option).
• Links with a class name from the externalLinks option are not included in this variable.
• Links within an element with the class name from the externalLinks option will not be included in this variable.

api.$items

• A jQuery object of menu items selected by the selectedAppliedTo option.
• This variable will not include elements if it has class name from the externalLinks option, because then it's not a menu item.
• This variable will not include elements that don't contain a link (a by default).

api.$curItem

• A jQuery object of the current menu item.
• This variable will updated prior to the changed callback function, so it should always be correct.

api.$lastItem

• A jQuery object of the previous menu item.
• This variable is updated prior to the changed callback function.
• Upon initialization of the plugin, this variable will be the same as the api.$curItem.

api.$content

• A jQuery object of all content blocks as selected by the contentClass option.
• This variable will change when the update method is called.

api.$curContent

• A jQuery object of the currently active content.
• This current content block will get a class name added from the currentContent option.
• The current content block will match the id/class obtained from the api.$curItem within the targetAttr attribute, i.e. if the link's href is #home, that will also be the id of the current content block.

api.curHash

• This contains the current hash from the window location hash.
• Used to update the windows hash after the animation has completed.
• This variable is set before the beforeAnimation callback, so if you wanted, you can change the resulting window hash used before the completed callback.

api.$body

• A jQuery object of the scrollable page element
• This will either be the html or body depending on which browser is being used.
• See the horizontal demo, the horizontal mousewheel function, on how to use this.

api.options

• This is an object that contains all of the plugin's options.
• Access, but cautiously change, any of the options.

API functions

api.update()

• Call this function after changing the number of menu and content elements.
• You do not need to call this function if the content within the menu or content elements changed.

api.animate(selector)

• Animate to any selector within the content.
• The selector can be:
  • A jQuery selection string, e.g. api.animate('#work');.
  • A jQuery object, e.g. api.animate( $('#work') );.
• The selector can point to:
  • The content block itself.
  • Any element within the content block.

api.findLocation()

• Update the menu in case something messes up.
• This function is called every time the page scrolls or window is resized.