CODEWITHSUNDEEP
twitter-bootstrap
dermold
dermold

Reputation: 91

Bootstrap 3 Elements sometimes don't work. Browser loads #

My site works with a Bootstrap Dropdown (including dropdown submenus) and Collapse elements.

In general this works fine. But sometimes when the site is accessed, the elements are not opened in the browser.

When the dropdown or collapse are clicked it loads

I am not sure why this happens. First I include jquery.js, then I include bootstrap.js. I assume that this problem happens when I click too fast, before the js is done loading.

Does anybody have an idea?

Upvotes: 0

Views: 929

Answers (2)

fzzylogic
fzzylogic

Reputation: 2283

You're probably right about the Javascript not having loaded.

Bootstrap javascript is loaded at the bottom of the page. Pro's and cons of this approach are explained here. In short, the page is visible before Javascript has been loaded. Generally, this is only for a very brief moment.

A simple solution to this as suggested by sunilkjt below is to move the javascript links to your header. 

<head>
    ... title, meta, css etc.
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

That way they will definitely be loaded by the time the user can see the page. If for some reason that is not desired, more complex approaches include disabling page access with a modal until all Javascript has loaded (and other methods).

Upvotes: 1

Mavmedia
Mavmedia

Reputation: 1

Have you tried removing the href="#" on the Dropdown element?

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
      </ul>
    </li>

Upvotes: 0

Related Questions