Center a Bootstrap drop-down select scroll bar to the selected item - javascript

Here's a question on how to center a <select> scroll bar to the selected item.
I'd like to find a way to do the same thing for a Bootstrap Dropdown Menu so that the menu automatically scrolls to the .active list item.
Here's some code:
<ul>
<li class="dropdown switch">
<a href="active" class="dropdown-toggle" data-toggle="dropdown" id="switch-a">
<span>Name</span>
</a>
<ul class="dropdown-menu switch-items" id="switch-dd">
<li>...</li>
<li>...</li>
<li class="active active-dd"></li>
.
.
.
<li>...</li>
</ul>
</li>
</ul>
Is this possible or do I have to a HTML <select> and spending time styling it?

Not only is it possible, it's actually much easier to deal with native HTML objects than it is to deal with the mysteries and inconsistencies of styling the <select> element.
You just have to listen to the dropdown open event with shown.bs.dropdown.
Once it's open, just find the only .active item and call .focus() to bring it into view.
Like This:
$(".dropdown").on("shown.bs.dropdown", function() {
$(this).find(".dropdown-menu li.active a").focus()
});
Demo in Stack Snippets:
$(".dropdown.focus-active").on("shown.bs.dropdown", function() {
$(this).find(".dropdown-menu li.active a").focus()
});
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container" >
<div class="dropdown focus-active">
<a href="#" class="btn btn-primary"
data-target="#" data-toggle="dropdown"
aria-haspopup="true" role="button" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</a>
<ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dLabel">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li class="active">Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
</div>
</div>

Event handler without jquery:
const activeOptionCollection = document.getElementsByClassName('active');
if (activeOptionCollection.length > 0) {
const [activeOption] = activeOptionCollection;
activeOption.scrollIntoView();
}

Related

Drop down menu behind embedded PDF

I have the following code to create a drop down menu. However, on any page that has an embedded PDF the drop down appears behind the PDF. It only seems to happen in IE. Is there any fix?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Website</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</div>
</nav>
Here's my code for the embedded PDF also:
<object data="file.pdf" id="myDoc" type="application/pdf" width="100%" height="1000px">
alt : HowToCopyADisc.pdf
</object>

Keeping Bootstrap 3 dropdown open when clicked with slide up & down animation

I am using a Bootstrap dropdown as a vertical menu coming from a button clicked on the navbar. I added some jQuery to allow the dropdown to slide down smoothly rather than pop into existence, but now I've run into the problem of the dropdown closing when anywhere (inside or outside) is clicked.
Some of the "links" in the dropdown menu are actually accordion style headers that show a list of pages when clicked, so I need the dropdown to stay open when there is a click within.
My main problem is that I have found a few solutions that work, but they seem to overwrite the smooth slide functionality of the dropdown.
This is the code I'm using for the slide down:
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
and this is the general structure of my menu:
<div class="dropdown">
<button type="button" class="dropdown-toggle nav-tog" id="dropdownMenu1" data-toggle="dropdown">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars" style="color: #A05317; font-size: 30px;"></i>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="mainMenu">
<ul id="main-nav">
<li class="nav-item">NAV HEADER (accordion)
<ul>
<li>Sub Nav 1</li>
<li>Sub Nav 2</li>
<li>Sub Nav 3</li>
<li>Sub Nav 4</li>
</ul>
</li>
<li class="nav-item">NAV HEADER (accordion)
<ul>
<li>Sub Nav 1</li>
<li>Sub Nav 2</li>
<li>Sub Nav 3</li>
<li>Sub Nav 4</li>
</ul>
</li>
<li class="nav-item">NAV HEADER</li>
<li class="nav-item">NAV HEADER</li>
<li class="nav-item">NAV HEADER</li>
<li class="nav-item">NAV HEADER</li>
<li class="nav-item">NAV HEADER (accordion)
<ul>
<li>Sub Nav 1</li>
<li>Sub Nav 2</li>
<li>Sub Nav 3</li>
<li>Sub Nav 4</li>
</ul>
</li>
</ul>
</ul>
</div>
Any help would be greatly appreciated!

jQuery dropdown not showing when clicked

The jQuery dropdown menu does not pop-up when I click on the link. Here is my code.
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/jquery.dropdown.css" rel="stylesheet" />
<script src="Content/bootstrap-filestyle.min.js"></script>
<script src="Scripts/jquery.dropdown.js"></script>
html:
<span class="fa fa-2x fa-gear"></span>
<div id="ddlDept" class="jq-dropdown jq-dropdown-tip">
<ul class="jq-dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="jq-dropdown-divider"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
You need to make use of data-toggle attribute instead of data-dropdown. Also the contents you need to toggle needs to be wrapped inside a div element.
<ul>
<li>
<div class="dropdown">
<span class="fa fa-2x fa-gear"> </span>
<ul class="dropdown-menu" aria-labelledby="ddlDept">
<li>Item 1</li>
<li>Item 3</li>
<li class="dropdown-divider"></li>
<li>Item 4</li>
</ul>
</div>
</li>
</ul>
Working example : http://jsfiddle.net/DinoMyte/5p341amh/263/
From the documentation for jQuery Dropdowns, your container div must have a unique id (check) and the jq-dropdown class "immediately before your closing body tag". For dropdown menus, the div should contain the class jq-dropdown-menu. So it looks like your only issue is prefixing all of the classes with "jq-". That includes dropdown, dropdown-tip, dropdown-divider, and dropdown-menu. http://labs.abeautifulsite.net/jquery-dropdown/

Horizontally scrolling navbar not working right

I was recently linked to a post explaining how to add a navbar that scrolls to the right or left to reveal more tabs. The complete JSFiddle is:
http://jsfiddle.net/k63t7tqo/3/
Apparently I need to put some code here, so here's the HTML from the fiddle:
$('.direction-right').click(function() {
var margin = $('.navbar-nav').css('margin-top');
console.log(margin);
console.log('-' + ($('.navbar-nav').height() - 50) + 'px');
$('.navbar-nav').css('margin-top', margin == '-' + ($('.navbar-nav').height() - 50) + 'px' ? margin : '-=50px');
});
$('.direction-left').click(function() {
var margin = $('.navbar-nav').css('margin-top');
$('.navbar-nav').css('margin-top', margin == '0px' ? '0px' : '+=50px');
});
$(window).resize(function() {
if ($(window).width() < 768) {
$('.navbar-nav').css('margin-top', 0);
}
});
#media (max-width: 768px) {
.direction-right, .direction-left {
display: none;
}
}
#media (min-width: 768px) {
.navbar {
height: 51px;
overflow: hidden;
}
.navbar-nav {
overflow: hidden;
width: calc(100% - 52px);
}
.direction-right, .direction-left {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
</div>
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<
<ul class="nav navbar-nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8</li>
<li>Menu 9</li>
<li>Menu 10</li>
<li>Menu 11</li>
<li>Menu 12</li>
</ul>
>
</div>
</div>
</div>
The problem I am having is that:
A) When I click the right and left arrows, the navbar itself moves UP and DOWN the page, even overlapping other words/content.
B) The navbar does not match the basic blue Bootstrap theme I have going on.
Problem B I can most likely figure out myself, but I can't for the life of me figure out why the navbar is moving up and down instead of scrolling to the right and left in-place. Thanks in advance for any assistance. This website is great, and you people are awesome.
Edit: I guess it's worth noting that I am using Bootstrap with DataTables and LESS, not just a basic page.
The reason its jumping back to the top of the page is because you are using a JQuery click event and the hashtag # is an anchor tag that's telling the browser to scroll back to the top of the page when its clicked. I think the easiest way to fix this is to change the right and left arrows to span tags that way the anchor link wont be called and your page wont jump around when a user navigates your page.
<span class="direction-left pull-left navbar-brand"><</span>
<ul class="nav navbar-nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8</li>
<li>Menu 9</li>
<li>Menu 10</li>
<li>Menu 11</li>
<li>Menu 12</li>
</ul>
<span class="direction-right pull-left navbar-brand">></span>
Here is your JS.Fiddle updated with the new code. Hope that helps.

Twitter Bootstrap Broader Dropdown Menu with 2 or more Div

I want to design menu like below in picture :-
But I am not able to do it, here is my try :- http://jsfiddle.net/BqqqE/5/
Code Below :-
<div class="dropdown">
<a class="dropdown-toggle btn btn-danger" data-toggle="dropdown" href="#">Dropdown trigger <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu"><a tabindex="-1" href="index.php">Project</a>
<div class="dropdown-menu">
<div class="container">
<div class="row-fluid">
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Is above Menu Possible with Bootstrap ?
Thanks
Take a look at this JSFiddle. I've added class dropdown-menu-tworows. You can set width for submenu but it's not necessary.
.dropdown-menu-tworows .span6 {
width: 49%;
display: inline-block;
}
Is this what you wanted?

Categories