CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapdrop-down-menu
Mr. Bond
Mr. Bond

Reputation: 123

Bootstrap dropdown selection makes screen jump

So I'm using bootstrap for my website and I have many div's on each page with a dropdown on each that change the information inside the div from a chart to a table and vise-versa. This works fine except when the user selects an option from the drop down the screen seems to "jump", putting that div at the top of the screen. I found a similar issue for someone else saying it has something to do with the anchor tag(#), but I believe I need mine since the drop down does refer to something.

DROPDOWN:

<div class="dropdown">
   <button class="btn  btn-warning dropdown-toggle btn-xs" type="button" id="dropdownMenuGraphOneSmall" data-toggle="dropdown" aria-expanded="true">Graph One Options<span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOneSmall">
      <!--DROPDOWN MENU-->
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#graphOneData">Data</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#graphOneChart">Chart</a>
      </li>
      <li role="presentation">
         <a data-toggle="modal" data-target="#enlargeGraphOneModal" role="menuitem" tabindex="-1">Maximize</a>
      </li>
      <li role="presentation">
         <a class="collapse-link" role="menuitem" tabindex="-1" href="#graphOneCollapse">Collapse</a>
     </li>
   </ul>
</div>

CONTENT IT CALLS:

<div class="content active row" id="graphOneChart">
    ............
</div>
<div class="content" id="graphOneData">
     ............
</div>

Upvotes: 3

Views: 4154

Answers (3)

blamb
blamb

Reputation: 4290

To keep the page from jumping, you can remove the href="" altogether, and just keep the a tag empty like this <a>, then it wont jump.

If you have to keep the href tag, you can use the e.preventDefault() in your click or on method.

Upvotes: 1

James Flight
James Flight

Reputation: 1464

If you use a hash # in an anchor, the browser will automatically scroll to the element with the corresponding id.

For example, clicking on:

<a href="#graphOneData">Data</a>

Will cause the page to jump to:

<div id="graphOneData"></div>

To stop this happening, either change the id of the div or the href of the anchor.

Upvotes: 0

msinnes
msinnes

Reputation: 70

When you use an anchor tag, <a>, it is going to automatically go to the location that the href tag is pointing to. If your link is pointing to an id on the page, the link is going to scroll the screen to the element the link is pointing to. If you want to use the link to call a function, leave the href attribute empty, href="".

Upvotes: 0

Related Questions