Geek Answers Handbook

ScrollSpy not activated on boot 3

I am using BootStrap Saas harness ( https://github.com/thomas-mcdonald/bootstrap-sass ) with Rails 4. I am trying to configure scrollspy, but I cannot get the effect to work. I did some research and went through   Bootstrap 3 scrollspy strange behavior - not updating the active class in scrolling , Bootstrap ScrollSpy not working , Bootstrap 3 Scrollspy Activating the event without firing , and the active scrolllspy link is not applied , and I'm still having problems.

Here is my current code. From the .html.erb application

<body data-spy="scroll" data-target="#navtainer" data-offset="0">

Here is the code from the view

<div class="navbar navbar-inverse navbar-fixed-top" id="navtainer">
      <div class="container">
        <div class="container ">
            <div class="navbar-header"> <a class="navbar-brand" href="#">Demo</a></div>

            <ul class="nav navbar-nav">
              <li class="active"><a href="#intro">Home</a></li>
              <li ><a href="#home">home</a></li>
              <li><a href="#newest">new</a></li>
              <li><a href="#about">about</a></li>

            </ul>
        </div>
      </div>
    </div>

Edit: section element fragments

    <!-- Section #1 -->
<section class="parasect" id="intro" data-speed="6" data-type="background">

        <div class="row">
            <div class="text-center col-sm-4 col-md-4">
              <% image_tag"landingPage/desktop.png" %>
            </div>
            <div class="text-center col-sm-8 col-md-8">
              <img src="landingPage/title.png">
            </div>
        </div>
        <div class="container">
            <div class="jumbotron">

                <h1>Shark Jousting </h2>
                <h2>This page demonstrates parallax within Twitter Bootstrap.</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>

</section>

<!-- Section #2 -->
<section class="parasec" id="home" data-speed="4" data-type="background">
    <div class="container">

            <h1 id = "tooltitle"> Pizza Drone </h1>


        <div class="row">
            <div class="well col-sm-4 col-md-4">
              <h2>Convert</h2>
              <p>Convert to pastafarianism. Taste the Rainbow   </p>
              <p><a class="btn btn-success" href="#">View details </a></p>
            </div><!-- /.span4 -->
            <div class="well col-sm-4 col-md-4">
              <h2>Dance!</h2>
              <p>Disco all night!!! Boogie! </p>
              <p><a class="btn btn-success" href="#">View details </a></p>
            </div><!-- /.span4 -->
            <div class="well col-sm-4 col-md-4">
              <h2>Pie</h2>
              <p>YUM YUM YUM </p>
              <p><a class="btn btn-success" href="#">View details </a></p>
            </div><!-- /.span4 -->
        </div>
    </div>
</section>

<section class="parasec" id="newest" data-speed="0" data-type="background">
    <div class="container">
        <div class="jumbotron">
            <h2> Powered by Twerking</h2>
            <p> In an effort to be green, our company uses special pants that convert twerking into electricity </p>
        </div>
    </div>
</section>

<!-- Section #3 -->
<section class="parasec" id="about" data-speed="2" data-type="background">
    <div class="container">
        <div class="page-header">
            <h1>Final Section Headline <small>Some subtext goes here...</small></h1>
        </div>
        <div class="row">
            <div class="col-sm-4 col-md-4">
              <h2>More Details</h2>
              <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque cursus nisl consectetur et.</p>
              <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque cursus nisl consectetur et.</p>
              <p><a class="btn btn-success">View details </a></p>
            </div><!-- /.span4 -->
            <div class="col-sm-4 col-md-4">
                <h2>Heading</h2>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="landingPage/check.png">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante.
                    </div>
                </div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="landingPage/check.png">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante.
                    </div>
                </div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="landingPage/check.png">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante.
                    </div>
                </div>
            </div><!-- /.span4 -->
            <div class="col-sm-4 col-md-4">
              <h2>Log In</h2>
              <form class="form">
                  <div class="form-group">
                    <label class="control-label" for="inputEmail">Email</label>
                    <div class="controls">
                      <input type="text" id="inputEmail" placeholder="Email" class="form-control">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                      <input type="password" id="inputPassword" placeholder="Password" class="form-control">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="controls">
                      <div class="checkbox"><label class="">
                        <input type="checkbox"> Remember me <br><br>
                      </label></div>
                      <button type="submit" class="btn btn-success">Sign in</button>
                    </div>
                  </div>
                </form>
            </div><!-- /.span4 -->
        </div>
    </div>
</section>

Here is my Application.js file.

//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
+4
1

app/assets/javascripts/application.js JavaScript . bootstrap jQuery, , jquery jquery_ujs .

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
+1

More articles:


All Articles