-1

I want to make my bootstrap tour start when a button is clicked. But for some strange reason it doesn't work. I've putted the js files in the head and the rest in a widget (so in the body). It's all working fine if autostart is enabled (start if the page is loaded). But I want to let it work if a certain button is clicked.

The following code does work:

<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://localhost/bodybuildrecepten/wp-content/plugins/bootstrap-tour/bootstrap-tour-standalone.min.js"></script>
<script>
// Instance the tour
var tour = new Tour({
  debug: true,
  storage: false,
  steps: [
  {
    element: "#menu-item-2991",
    title: "Settings",
    content: "Content of settings",
    placement: "right"
  },
  {
    element: "#test2",
    title: "Title of my step",
    content: "Content of my step",
    placement: "right",
    onShow: function() {
      return $("#appSettings").addClass("open");
    },      
    onHide: function() {
      $("#appSettings").removeClass("open"); 
    } 
  }    
]});



  tour.init();
  tour.start();

</script>

But I want to execute the tour when a button is clicked So I've made a button:

<button id="starttour">Start the tour!</button>

And I've changed the code to (and tried other options, but no success):

<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://localhost/bodybuildrecepten/wp-content/plugins/bootstrap-tour/bootstrap-tour-standalone.min.js"></script>
<script>
// Instance the tour
var tour = new Tour({
  debug: true,
  storage: false,
  steps: [
  {
    element: "#menu-item-2991",
    title: "Settings",
    content: "Content of settings",
    placement: "right"
  },
  {
    element: "#test2",
    title: "Title of my step",
    content: "Content of my step",
    placement: "right",
    onShow: function() {
      return $("#appSettings").addClass("open");
    },      
    onHide: function() {
      $("#appSettings").removeClass("open"); 
    } 
  }    
]});

tour.init();

$("#starttour").click(function(){
    tour.start();
});
</script>

I hope anybody can see what's going wrong. Any help is appreciated!

Edit: tried jQuery instead of a dollar sign. No succes.

These are the errors my console shows: http://oi60.tinypic.com/24y5lz7.jpg

Bas
  • 130
  • 2
  • 3
  • 11
  • Are there any errors in your console? – APAD1 Apr 01 '15 at 20:43
  • Not sure if you are familiar with this but the dollar sign ($) in Word Press doesnt work and you will need to use 'Jquery' instead or (function($) { ... })( jQuery ); You can read up on it here: http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/ – crazymatt Apr 01 '15 at 20:46
  • @crazymatt Thnx for the suggestion. I will check it as soon as I get home. – Bas Apr 02 '15 at 06:57
  • Still no succes :/ I get the following error's in console: http://oi60.tinypic.com/24y5lz7.jpg – Bas Apr 02 '15 at 16:56

1 Answers1

1

I found the problem. A jQuery file from my theme's plugin is conflicting with the bootstrap tour.

Bas
  • 130
  • 2
  • 3
  • 11
  • I am having an issue with looping [keeps looping the first step] with wordpress so I would like to know which plugin file was conflicting. – tallgirltaadaa Apr 08 '15 at 16:50
  • it was the file seven.min.js from my theme sevenmag! – Bas Apr 09 '15 at 12:55
  • Also fixed the conflicting error (http://stackoverflow.com/questions/16775620/jquery-conflict-which-gives-error) use: according to your used jQuery version. – Bas Apr 10 '15 at 18:17