EzDevInfo.com

Boostro.js with Angular.js and HTML content

I've been trying to use the bootstro.js library to create a tour within Angular.

It works well, except when HTML is used for content. Angular directives such as ng-model and ng-change aren't working because it's not added to the DOM until called by bootstro.start().

An example of a div where bootstro will show a popover:

<div class="bootstro" data-bootstro-title="My popover" data-bootstro-html="true" data-bootstro-content="<div class='checkbox'><label><input type='checkbox' value='' ng-model='checktest'>Check me! {{checktest}}</label></div>">

I expect to see: Check me! (true or false) where the state text changes when I check the box.

I've tried creating a directive using $compile, but I think bootstro is rendering the popover after the compile takes place, so it doesn't help. Here's my directive, used with 'boostro-fix' in the div:

.directive('bootstroFix', function($compile) {    
    return {
      restrict: 'A',      
      link: function(scope, element, attrs)  {   
        element.val("data-bootstro-content=" + $compile(attrs.content)(scope));
        $compile(attrs.content)(scope);
      }
    };
 })

Any ideas on how to bind the angular magic in this html?

Bootstrap with navbar fixed top and Boostro

I am using Bootstrap + Bootstro but can't make the top navbar to get behind the overlay.

http://jsfiddle.net/NJsYw/5/ (click on Tutorial)

<div id="wrap">

  <!-- Fixed navbar -->
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="brand" rel='nofollow' href="#">Project name</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li><a rel='nofollow' href="#" id='tutorial'>Tutorial</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>

  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
    </div>
    <p class="lead bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='0'>Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
    <p class="bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='1'>Back to <a rel='nofollow' href="./sticky-footer.html">the sticky footer</a> minus the navbar.</p>
  </div>

  <div id="push"></div>
</div>

<div id="footer">
  <div class="container">
    <p class="muted credit">Example courtesy <a rel='nofollow' href="http://martinbean.co.uk">Martin Bean</a> and <a rel='nofollow' href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
  </div>
</div>

Looks like this was address here https://github.com/clu3/bootstro.js/issues/15 but I didn't know how to apply (if it is necessary)

Thanks

Play Framework 2.0 & Twitter Bootstrap site with Bootstro tour, autoscroll not working

I'm using Bootstro with my Twitter Bootstrap UI (on top of a Play Framework 2.0 app) to provide a tour of certain pages. I've attempted to include the correct files, and the tour almost totally works, but the auto scrolling isn't behaving well. Here are my includes:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="@routes.Assets.at("/bootstrap/js/bootstrap.min.js")"></script>
<link rel='nofollow' href="@routes.Assets.at("/bootstro/bootstro.css")" rel="stylesheet">
<script src="@routes.Assets.at("/bootstro/bootstro.js")"></script> 

I've tried several different jquery includes- including the exact version specified by the latest bootstrap bower.json (1.9.1), but it doesn't affect behavior.

Currently, the tour wil never scroll down, and if it needs to scroll up, the correct element is highlighted but the bootstro popover is drawn in the wrong spot. This is my actual script, taken directly from the main Bootstro page:

<script>
            $(document).ready(function(){
                $("#demo").click(function(){
                    bootstro.start(".bootstro", {
                        onComplete : function(params)
                        {
                            //alert("Reached end of introduction with total " + (params.idx + 1)+ " slides");
                        },
                        onExit : function(params)
                        {
                            //alert("Introduction stopped at slide #" + (params.idx + 1));
                        },
                    });    
                });
            });
</script>

It's super simple, and I don't think I need to pass any extra arguments.

Any ideas on why the scrolling might be behaving so oddly? I'm trying to get a jsfiddle together, but I've never used it before, not to mention this is my first Play 2/Bootstrap app. So I'm very new to all this!

Start Bootstro in the field with focus

I am using Bootstro with Bootstrap in my forms. It is working the way it should. But I would like to do something:

When I click in the button to start bootstro, it starts in the first element in the form. I would like to start bootstro in the field i have focus. If I do not have focus in any field, it should start from the beginning.

Thanks.

Call steps from within json data - Bootstro

Is it possible to call steps to order the 'tour' from within json data e.g.

"selector":"#profilePic",
"title":"Ajaxed Title 2",
"content":"I was found because I have selector=#demo_ajax",
"width":"400px",
"placement":"bottom",
"step":"2"

I know it can be done by injecting html into the divs but I'd rather not pollute with code which may be used once or twice in a users lifetime on the site