CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap
oFca
oFca

Reputation: 2830

Twitter bootstrap nav collapsing

This is how my code looks like but the problem is: when I click on the collapsed button (the one with 4 horizontal lines), it won't open on the 1st click, but only on the second click. 1st click does nothing and 2nd opens it quickly, than quickly closes it, than reopens it again. Why is that and how to fix it?

 22     <!-- BOOTSTRAP NAVBAR -->
 23     <div class="navbar navbar-fixed-top">
 24       <div class="navbar-inner">        
 25         <div class="container">
 26 
 27           <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">                                                   
 28             <span class="icon-bar"></span>  
 29             <span class="icon-bar"></span>  
 30             <span class="icon-bar"></span>  
 31             <span class="icon-bar"></span>
 32           </a>
 33     
 34           <%= link_to 'Synergy', root_path, :class => 'brand' %>                                                                          
 35 
 36           <div class="nav-collapse">                                                                                            
 37 
 38             <% if current_user %>                                                                                                         
 39 
 40               <ul class="nav">
 41                 <li><%= link_to 'My projects', projects_path %></li>
 42                 <li><%= link_to current_user.name, '#' %></li>
 43                 <li><%= link_to 'Log out', destroy_user_session_path, :method => :delete %></li>
 44               </ul>        
 45 
 46             <% else %>     
 47 
 48               <ul class="nav">
 49                 <li><%= link_to 'Sign in', new_user_session_path %></li>
 50                 <li><%= link_to 'Sign up!', new_user_registration_path %></li>
 51               </ul>        
 52 
 53             <% end %>      
 54 
 55           </div>           
 56 
 57         </div>             
 58       </div>               
 59     </div>
 60     <!-- BOOTSTRAP NAVBAR -->

EDIT: this is my application.js file:

 13 //= require jquery
 14 //= require jquery_ujs
 15 //= require jquery-ui
 16 //= require twitter/bootstrap
 17 //= require_tree .

Upvotes: 3

Views: 2310

Answers (2)

vaughanos
vaughanos

Reputation: 521

In my case, something similar to this was happening because I had precompiled my assets previously for production, and the dev and prod js assets were both running.

rake assets:clean (rails3) / rake assets:clobber (rails4) fixed this.

Upvotes: 0

Nathan
Nathan

Reputation: 3190

It sounds like you are double loading some of the JS files. It can be easy to forget where the files are loading in an environment like Ruby or Grails.

Try including the call to Jquery in the page script and place an inline script directly after the call. An example would be this:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap-carousel.js" type="text/javascript"></script>
<script src="js/bootstrap-transition.js" type="text/javascript"></script>
<script>

$(document).ready(function() {
    $('#myCarousel').carousel();
  });
</script>

After you add this script check the web console in Firebug or another developer tool. You should see if jQuery is loading properly or multiple times. Let me know if that solves the issue :)

Upvotes: 1

Related Questions