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>
Related
At w3schools.com I found this example, just to keep it simple:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
It works fine, when I navigate using a keyboard. But when I add some further level - I cant reach next level:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<!-- next level -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1-2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-2A</li>
<li>Page 1-2B</li>
<li>Page 1-2C</li>
</ul>
</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
In my project, I have tried to write a jquery-keyboard handler for dropdown, but the sub-level, still wont toggle.
I have an html list that exists several times within my html code and the issue is that when I make a change to one of the lists, I have to change the other lists to keep them identical.
Is there anyway to write the list only once and have it repeat where ever I need it in the rest of the code?
I'm trying to find ways to do this, and came across this question, which suggests using javascript or using a templating library, which I'm having difficulty implementing.
(codepen here)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="screen">
<span class="btn-group">
<a data-toggle="dropdown" href="#">Drop Down List</a>
<ul class="dropdown-menu">
<li>Row 1</li>
<li>Row 2</li>
<li>Row 3</li>
<li>Row 4</li>
<li>Row 5</li>
</ul>
</span>
<br>
<span class="btn-group">
<a data-toggle="dropdown" href="#">Drop Down List</a>
<ul class="dropdown-menu">
<li>Row 1</li>
<li>Row 2</li>
<li>Row 3</li>
<li>Row 4</li>
<li>Row 5</li>
</ul>
</span>
<br>
<span class="btn-group">
<a data-toggle="dropdown" href="#">Drop Down List</a>
<ul class="dropdown-menu">
<li>Row 1</li>
<li>Row 2</li>
<li>Row 3</li>
<li>Row 4</li>
<li>Row 5</li>
</ul>
</span>
<br>
<span class="btn-group">
<a data-toggle="dropdown" href="#">Drop Down List</a>
<ul class="dropdown-menu">
<li>Row 1</li>
<li>Row 2</li>
<li>Row 3</li>
<li>Row 4</li>
<li>Row 5</li>
</ul>
</span>
<br>
<span class="btn-group">
<a data-toggle="dropdown" href="#">Drop Down List</a>
<ul class="dropdown-menu">
<li>Row 1</li>
<li>Row 2</li>
<li>Row 3</li>
<li>Row 4</li>
<li>Row 5</li>
</ul>
</span>
Essentially I'd like to deliver the same outcome as the above code, but only have to write the list once.
If one of the hip frameworks like Angular, React or Vue - which all provide nice solutions for this use case - are total overkill for your project, with jQuery you can do something like that:
$(".dropdown-menu").each(function(){
var list = "";
for(var i = 1; i < 6; i++){
list += "<li>Custom Row " + i + "</li>";
}
$(this).html(list);
});
https://jsfiddle.net/27hh9sh2/
This answer assumes you want to change those lists on the fly, meaning in the client. If you serve a static html page, where your navigation links change like once a month, you want to use server side templating.
If your server has server side includes, you could rename your file from .html to .shtml, copy the repeating bits in a separate file and use include to put that code wherever you need
<!--#include file="repeating_code.txt"-->
Naturally, the above assumes that the file "repeating_code.txt" is in the same directory as the .shtml where it's going to be inserted.
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();
}
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?
Any ideas why this Twitter Bootstrap dropdown isn't working?
Javascript in head:
<script src="/assets/js/bootstrap.js" type="text/javascript"></script>
Menu HTML:
<li class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
Put the dropdown class on a div that is wrapping the li rather than on the li itself. Like this...
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
That example is from the bootstrap site
Your code should look like this...
<!DOCTYPE html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="../plugins/js/bootstrap-dropdown.js"></script>
<link href="../theme/bootstrap.css" rel=stylesheet type="text/css">
</head>
<div class="dropdown">
<ul class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</ul>
</div>
I tried making a nested list, but it didn't work with bootstrap. I think it gets the two dropdowns confused.
Make sure you are using the latest version of JQuery
This is easily solved. The element wrapping your code is a li, but it needs to be a div. This works for me:
<div class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>
If you want it to look like a button, just add "btn" to the class list like this:
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" href="#">
My header section looks like this:
<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap-responsive.min.css'>
<script src='js/jquery-2.0.0.min.js' type='text/javascript'>
<script src='js/bootstrap.min.js' type='text/javascript'>
You may want to leave out the responsive css if you're not doing anything for mobile devices.