Fork me on GitHub

What is Trip.js ?

Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities. ( Based on jQuery )

Version

1.3.0

Setup ( Minimal )

  1. Include your jQuery
  2. Include src/trip.css
  3. Include src/trip.js
  4. Setup Trip.js
  5. Take a Trip Now !

Global Options

  1. tripIndex

    You can set tripIndex ( start from 0 ) to specific trip block at start.

    Default : 0

  2. tripTheme

    You can set which theme to use, now have white and black two themes.

    Default : black

  3. backToTopWhenEnded

    You can ask Trip.js go back to top when ended.

    Default : false

  4. overlayZindex

    You can set the basic zIndex for overlay if you want to expose elements.

    Default : 99999

  5. enableKeyBinding

    You can decide to bind key events for trip navigations or not.

    Default : true

  6. enableAnimation

    You can enable animations on tripBlock.

    Default : true

  7. showCloseBox

    You can decide to add small close icon on each trip or not

    Default : false

  8. skipUndefinedTrip

    You can enable this option to tell Trip.js skip undefined trips ( Undefined trips mean the trips without content or without sel or can not be selected by jQuery ).

    Default : false

  9. delay

    every trip will be lived for 1 second (1000 ms) by default

    Setting to a -1 will prevent auto-advancing. You must manually call trip.next().

    Default : 1000

  10. showNavigation

    Toggle navigation buttons

    Default : false

  11. prevLabel

    Label for the previous button.

    Default : Back

  12. nextLabel

    Label for the next button.

    Default : Next

  13. finishLabel

    Label for the finish button.

    Default : Dismiss

  14. animation

    Animation that would be applied on the tripBlock.

    Default : tada

  15. canGoPrev

    Determines if the user can go backwards. If set to a function it is called and the response is evaluated.

    Default : true

  16. canGoNext

    Determines if the user can go forward. If set to a function it is called and the response is evaluated.

    Default : true

  17. onTripStart()

    You can set a callback function triggered when Trip.js starts.

    Default : $.noop

  18. onTripEnd()

    You can set a callback function triggered when Trip.js ends.

    Default : $.noop

  19. onTripStop()

    You can set a callback function triggered when Trip.js stops.

    Default : $.noop

  20. onTripChange(tripIndex, tripObject)

    You can set a callback function triggered when Trip.js changes to another step. tripObject is your passed JSON for this current trip, so you can add your customized functions in your object and call the function when Trip.js changes to this step.

    Default : $.noop

Local Options

You can setup specific options for each step.

  1. sel

    Which selector is referenced in this step.

    Default : no default

  2. content *Required*

    What information that you want to show to users.

    Default : no default

  3. position

    What position would you prefer for the tripBlock. We support 9 different positions : e, w, n, s, screen-ne, screen-se, screen-sw, screen-nw, screen-center.

    To be clear, e, w, n, s are related to the sel, so for this use case, sel is required. For screen-ne, screen-se, screen-sw, screen-nw and screen-center are related to the screen (fixed in CSS), so in this case, you don't have to put sel.

    Default : n( You can use e, w, n, s, screen-ne, screen-se, screen-sw, screen-nw, screen-center 9 positions )

  4. delay

    You can delay longer / shoter for this step. You can assign delay in global options to change the default delay. Setting to a -1 will prevent auto-advancing. You must manually call trip.next() .

    Default : 1000

  5. callback

    You can do whatever you want to do after this step passed. BTW, Trip.js will assign the current tripIndex (start from 0) as the first parameter back to your callback function for later use.

    Default : $.noop

  6. expose

    You can enable this option to expose your selected element in this trip.

    Default : false

  7. showNavigation

    Toggle navigation buttons

    Default : false

  8. showCloseBox

    You can decide to add small close icon on each trip or not

    Default : false

  9. prevLabel

    Label for the previous button.

    Default : Back

  10. nextLabel

    Label for the next button.

    Default : Next

  11. finishLabel

    Label for the finish button.

    Default : Dismiss

  12. tripBlockHTML

    Base HTML for tripBlock

    Default : An array contains base HTML of tripBlock

  13. canGoPrev

    Determines if the user can go forward. If set to a function it is called and the response is evaluated.

    Default : true

  14. canGoNext

    Determines if the user can go forward. If set to a function it is called and the response is evaluated.

    Default : true

  15. animation

    Animation that would be applied on the tripBlock. if ignored, global value would be used.

    Default : tada

Key Binding

  1. Right and Down arrows

    Go to next trip

  2. Left and Up arrows

    Go back to previous trip

  3. Space

    pause / resume

  4. Esc

    Stop

API

  1. trip.start()

    Call this method to start your trip

  2. trip.stop()

    Call this method to stop your trip

  3. trip.pause()

    Call this method to pause your trip (same as trip.resume)

  4. trip.resume()

    Call this method to continue your trip (same as trip.pause)

  5. trip.next()

    jump to next step

  6. trip.prev()

    jump back to previous step

Notice

This plugin is still under development ! If you find any bugs or want me to implement anything, please feel free to open an issue ;)

Open an issue