0

I am relatively new to javascript and I am using a 'plugin' you can find here:

https://github.com/VinceG/twitter-bootstrap-wizard

when I implement this code everything works fine except when the page starts no tabs are selected.

I wish the first tab to be selected. Reading through the code it would seem the following code is meant to do this

this.fixNavigationButtons = function() {
    // Get the current active tab
    if(!$activeTab.length) {
        // Select first one
        $navigation.find('a:first').tab('show');
        $activeTab = $navigation.find(baseItemSelector + ':first');
    }

Anyone familiar with this plugin?

the code I am using is exactly the one on this page http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-pills.html

UPDATE: here is my markup code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Web Form Prototype</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div id="rootwizard">
        <ul>
            <li><a href="#tab1" data-toggle="tab">First</a></li>
            <li><a href="#tab2" data-toggle="tab">Second</a></li>
            <li><a href="#tab3" data-toggle="tab">Third</a></li>
            <li><a href="#tab4" data-toggle="tab">Forth</a></li>
            <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
            <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
            <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane" id="tab1">
                1
            </div>
            <div class="tab-pane" id="tab2">
                2
            </div>
            <div class="tab-pane" id="tab3">
                3
            </div>
            <div class="tab-pane" id="tab4">
                4
            </div>
            <div class="tab-pane" id="tab5">
                5
            </div>
            <div class="tab-pane" id="tab6">
                6
            </div>
            <div class="tab-pane" id="tab7">
                7
            </div>
            <ul class="pager wizard">
                <li class="previous first" style="display:none;"><a href="#">First</a></li>
                <li class="previous"><a href="#">Previous</a></li>
                <li class="next last" style="display:none;"><a href="#">Last</a></li>
                <li class="next"><a href="#">Next</a></li>
            </ul>
        </div>    
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js" type="text/javascript"></script>

    <!--Form Wizard-->
    <script src="js/jquery.bootstrap.wizard.js" type="text/javascript"></script>

    <!--Interaction script-->
    <script type="text/javascript" src="js/test.js"></script>

</body>
</html>

and test.js

$(document).ready(function() {
      $('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
});
Mike Causer
  • 8,196
  • 2
  • 43
  • 63
user3220238
  • 43
  • 1
  • 6
  • The code you have linked does not include the js you include in the question. You may need to review your html markup. – Kami Jan 21 '14 at 17:17
  • 1
    The code you linked targets the first `a` element in the `$navigation` element. Without your HTML markup it's impossible to know exactly why it doesn't work, but I'm guessing you're not using the same structure used in the tutorial: `#rootwizard > ul > li > a` – Gabriel S. Jan 21 '14 at 17:29
  • I ve posted my markup code and test.js up top as requested. it is pretty much identical to the example – user3220238 Jan 21 '14 at 18:02
  • Thank you for your input, it lead me to solving the issue. Turns out the jquery.bootstrap.wizard.js from the github is different from the one used in the tutorials. Once i copied the one from the tutorial it now works fine. – user3220238 Jan 21 '14 at 18:08
  • but now the previous and next buttons dont work! X.X – user3220238 Jan 21 '14 at 18:19
  • The best way to get a solutions is to post your code, the actual code that is not working, rather than a reference to working code as there is nothing to troubleshoot.. – Joe Conlin Jan 21 '14 at 18:39
  • the one above is my actual code... – user3220238 Jan 21 '14 at 18:41

0 Answers0