w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
A dropdown menu who have dropdown's inside (Bootstrap-navbar) for tablet
I found another solution. I added that after my code : <script type="text/javascript"> $('.dropdown-menu').click(function(event){ event.stopPropagation(); }); </script> Dropdown can't works with this solution, so i used "dropdown-submenu" to fix that (Thanks @Schmalzy for that). So when i touch a link, the submenu open. the submenu can't works normally on a tablet without the code above.

Categories : Twitter

twitter bootstrap input click outside of dropdown-menu; is hiding menu
You have to use stopPropagation event to avoid closing of the dropdown menu. $(function () { $('.dropdown-menu').find('input[type="text"]').click(function (e) { e.stopPropagation(); }); }); Here is one bootply example for you. http://bootply.com/63262 . NB Please make sure that you research a bit before asking questions, and also please provide relevant codes that you have used.

Categories : Twitter

Bootstrap 3 Hide Dropdown Menu on Menu Item Click
Change this: $(document).ready(function () { $("#navbar li a").click(function(event) { // check if window is small enough so dropdown is created $("#navbar-toggle").is(":visible") $("#nav-collapse").toggle(); }); }); to this: $(document).ready(function () { $("#navbar li a").click(function(event) { // check if window is small enough so dropdown is created $("#nav-collapse").removeClass("in").addClass("collapse"); }); }); See http://jsfiddle.net/fw7vh/4/

Categories : Jquery

jquery slider in dropdown menu item causing too many events
What causing this behavior is this line: alert("hello #" + ++islide); When alert() is called inside the slide event handler the mouse is never released. So you have to remove the call to alert() : http://jsfiddle.net/Rusln/eKjCD/

Categories : Jquery

Use Bootstrap 3 dropdown menu as context menu
It is possible. I made you a working demo to give a good start. Working demo (Right click on any table row to see it in action) First create your dropdown menu, hide it and change its position to absolute: #contextMenu { position: absolute; display:none; } Then bind a contextmenu event to your table rows so it shows dropdown/context menu and position it at the cursor: var $contextMenu = $("#contextMenu"); $("body").on("contextmenu", "table tr", function(e) { $contextMenu.css({ display: "block", left: e.pageX, top: e.pageY }); return false; }); Then when user select an option hide dropdown/context menu: $contextMenu.on("click", "a", function() { $contextMenu.hide(); });

Categories : Jquery

CSS dropdown menu element moving to left?
You need to set position:relative on the list items for the default state, not for the hover state: #cssmenu ul li { position: relative; } Otherwise when you hover out the sub-menu is positioned relative to the menu container and not its parent Updated fiddle

Categories : HTML

force twitter bootstrap to use mobile menu
you have to override the default media queries in order to get navbar-collapse to remain visible at all times. For example, you'll find this on line 4296 of Bootstrap 3's style.css: @media (min-width: 768px) { .navbar-toggle { display: none; } } This hides the button when the browser window exceeds 768px. So rather than hide it, change display to block. Poke around and play with the other elements, like navbar-nav. It's the same principle.

Categories : Twitter

Pull dropdown to the left when Bootstrap navbar is collapsed
The navbar collapses at 768px, so this media query will float your navbar-nav to the right once the navbar is collapsed. Here is a jsFiddle Demo CSS @media (max-width: 768px){ .navbar-nav{ text-align: right; } }

Categories : HTML

Bootstrap 3 Dropdown Menu
You do realize the dropdown functionality (and several other features) requires Bootstrap's JS file right (which in turn requires jQuery)? I don't see a reference to it, you could try adding these script tags at the bottom of your body tag: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Categories : HTML

The dropdown-menu in bootstrap
Here is a nearly identical question that has had heaps of answers... How to make twitter bootstrap menu dropdown on hover rather than click Hope this helps and kudos for opting to use Bootstrap. In my experience, you won't be disappointed.

Categories : Jquery

CSS Dropdown Menu Breaks When Setting Left Property After Position Absolute
I made a fiddle here http://jsfiddle.net/xUWdj/ Changes made: Got rid of all the table displays, the only reason you were using it was for vertical alignment, you can utilize line-height on the <a>'s instead. All submenu <ul>'s now are positioned based off it's parent by left: 100%; & top: 0; You should now be able to style/position the rest of the menu to how you want it. Edit: Here's a version that allows you to continue using the table-group-header http://jsfiddle.net/HSh5n/2/ Changed li a { display: block; line-height: 30px; } Added margins to move the ul's to -42px 0 0 130px I guess the biggest thing with tables is that since they're inline elements, you can't assign position: relative to table-cells, so that's why you couldn't use the left or top properties

Categories : CSS

Bootstrap ASP.net MVC Dropdown menu not visible
Make sure you have included the bootstrap.js file on that page. Your markup is a bit off. The <li> in your dropdown menu should not have the "dropdown" class Here is the jsFiddle -> http://jsfiddle.net/abrudtkuhl/GYSuY/ Here's markup that works, based on your example <div class="navbar"> <div class="navbar-inner"> <div class="container"> <div class="nav-collapse collapse"> <ul class="nav"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a>

Categories : HTML

Bootstrap 3 dropdown sub menu missing
The dropdown-submenu has been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto.. "Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342 But, with a little extra CSS you can get the same functionality in 3. Here is an example that uses 3.0 RC 1: http://bootply.com/71520 Here is an example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684 CSS .dropdown-submenu { position:relative; } .dropdown-submenu>.dropdown-menu { top:0; left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-

Categories : CSS

Cannot reproduce dropdown menu in Bootstrap 3
Try to change the order of defining scripts. First load Jquery script and then bootstrap.js <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="dist/js/bootstrap.js"></script> Js Fiddle Demo

Categories : CSS

Add tip to Twitter Bootstrap's Dropdown Menu
Add this CSS: .dropdown-menu:before { position: absolute; top: -5px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .dropdown-menu:after { position: absolute; top: -3px; left: 10px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } I got it from the nav dropdown styles and changed a couple of values. It should be easy to tune for your needs.

Categories : Javascript

Slide in Bootstrap collapsed menu from the left
Check out this solution from Off Canvas Layout For Twitter BootStrap Credit to krichnafsky

Categories : Twitter

twitter bootstrap dropdown menu javascript
I don't find any error in your code, seems like you are missing or not being loaded bootstrap-dropdown.js file moreover please add bootstrap.js core file (as added in jsfiddle in below link) check this jsfiddle, http://jsfiddle.net/mastermindw/kbzxV/

Categories : Javascript

Bootstrap Dropdown Menu link issue
You need to remove the data-toggle="tab" from the outer li. Your html should look like this for that menu when you are done. <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Youth <i class="caret"></i> </a> <ul class="dropdown-menu" role="menu"> <li><a href="/Home/Youth">YS2</a></li> </ul> </li>

Categories : Twitter

Dropdown Menu with Jade and Twitter Bootstrap
The following works for twitter bootstrap version 2.3.2. I do not recommend you continuing with any older version of twitter. !!! 5 html head link(rel='stylesheet', href='css/HOMEedit.css') link(rel='stylesheet', href='css/bootstrap.css') include bootstrap/inc/scripts body .dropdown a(href="#", data-toggle="dropdown").dropdown-toggle Dropdown trigger ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu') li a(href='#', tabindex='-1') Action li a(href='#', tabindex='-1') Something else here li.divider li a(href='#', tabindex='-1') Separated link script. $('.dropdown-toggle').dropdown() In the above I use a separate file 'scripts' which i incl

Categories : Twitter

Link dropdown menu with tabs in bootstrap
The element which can be tabbed is the a (anchor) not the content. So click a link in your dropdown should active the tab() on a anchor of your tabbar: $('#treatment_dropdown a').click(function (e) { e.preventDefault() $($(this).attr('href')+'_tt').tab('show') })

Categories : Javascript

Twitter Bootstrap Dropdown Menu not appearing
You have 3 '.dropdown-toggle' links in your code. You can toggle one of them at a time: $(document).ready(function () { $('.dropdown-toggle').eq(0).dropdown('toggle'); }); Working fiddle: http://jsfiddle.net/hieuh25/fzNjJ/

Categories : HTML

Bootstrap dropdown menu as include file
You should just have include 'nameoffile.php' where you want the include code to be displayed. Are all files in the same folder location? If so there's no reason for the above to not work

Categories : Twitter

Customize Bootstrap Dropdown Code for Nav Menu
Give the li element an id <li class="dropdown" id="product"> After giving that element an id, all you need to do is use click event and toggleClass on .navbar-container. $('#product').click(function(){ $('.navbar-container').toggleClass('open'); }); Check out this jsFiddle - I've updated the fiddle. In order to see the effect you can inspect the code and then click on the Products. You'll see the open class toggling. I hope this helps.

Categories : Jquery

z-index issue with bootstrap dropdown-menu class
z-index can be inherited, perhaps the parent div has z-index:0 !important; on it, so you must set !important to override it. z-index: 9999 !important; Or you have set menu items to have less z-index than the parent, so they get overlapped.

Categories : Twitter

Bootstrap Mobile Dropdown menu links not clickable
I experienced the same issue. The submenus were not clickable on my mobile. I added the following javascript and it seems to work. jQuery(document).ready(function($) { $("li.dropdown a").click(function(e){ $(this).next('ul.dropdown-menu').css("display", "block"); e.stopPropagation(); }); });

Categories : Javascript

Enabling keyboard navigation in the Bootstrap dropdown-menu
Let's say you're using it as a search form. Firstly, you need to remove tabindex="-1" to each dropdown option, and add the class search-option. Then you can add the following jQuery: $("#search-input").keydown(function(e){ if(e.which == 13) { // enter setTimeout(function(){ $(".search-option:first").focus(); },100); } }); $(".search-option").keydown(function(e){ if(e.which == 40) { // down $(this).parent().next().find(".search-option").focus(); return false; // stops the page from scrolling } if(e.which == 38) { // up $(this).parent().prev().find(".search-option").focus(); return false; // stops the page from scrolling } if(e.which == 13) { // enter alert("Do something"); } });

Categories : Twitter

Bootstrap dropdown menu missing on one page but appears on another
The example code in the Bootstrap documentation is: <ul class="nav nav-tabs"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul> Seems like you have an extra div in there? If that is not the problem then you would need to examine what else is different in-between the two pages, as it is likely something else is interfering with the CSS.

Categories : Ruby On Rails

Can't pass rspec tests after add Bootstrap dropdown menu
I think, your spec is not able to find your links in bootstrap dropdown menu. I think, you just have to click that dropdown first than, it will be able to find that links. try with this : describe "with valid information" do let(:user) { FactoryGirl.create(:user) } before do visit '/signin' fill_in "Email", with: user.email.upcase fill_in "Password", with: user.password click_button "Sign in" end click_link "Account" it { should have_title(user.name) } it { should have_link('Profile', href: user_path(user)) } it { should have_link('Sign out', href: signout_path) } it { should_not have_link('Sign in', href: signin_path) } end

Categories : Ruby On Rails

Bootstrap dropdown menu not working (not dropping down when clicked)
Just Remove the type="text/javascript" <script src="JavaScript/jquery.js" /> <script src="JavaScript/bootstrap-min.js" /> Here is the update - http://jsfiddle.net/andieje/kRX6n/

Categories : Twitter

Twitter Bootstrap for Rails dropdown-menu is unclickable
What you're looking for is a sub menu. dropdown is the element for a block, essentially. dropdown-menu is the element for a ul, and dropdown-submenu is the element for an li to create a sub menu inside a dropdown menu. So change the li's class from dropdown to dropdown-submenu. This will call the javascript component for dropdown's to render the right behavior. <div class="nav-collapse collapse"> <ul class="nav"> <%= nav_link("Home", home_path) %> <li class="dropdown-submenu <%= "active" if params[:controller] == "courses" || params[:controller] == "enrolments" %>"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Courses <b class="caret"></b></a> <

Categories : Javascript

Bootstrap Dropdown menu shifting around and styling not appearing
Check out this fiddle, I've commented out some styles (max-width etc..) Changes are HTML <div id="header-right" class="pull-right"> CSS #header-container { /*overflow: auto;*/ width: 100%; background-color: #231F20; height: 50px; } #header-wrapper { /*margin-left: auto; margin-right: auto; width: 80%; min-width: 1000px; max-width: 1300px;*/ overflow: visible; } #header-left { float: left; margin: 5px 0 0 0; } #header-right { float: right; margin: 5px 0 0 20px; } .dropup, .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; background-color: #ffff

Categories : Javascript

Bootstrap: login form in dropdown navbar menu
this is probably what you need: $(function(){ // Fix input element click problem $('.dropdown input, .dropdown label').click(function(e) { e.stopPropagation(); }); }); source: http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/

Categories : Javascript

page slide for exposing left menu with twitter bootstrap
You could try using then panel widget from the latest jquerymobile (1.3.0). Maybe this is not what you want but there are options so you could do it programatically. http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/panel-fixed.html

Categories : PHP

Bootstrap Dropdown Menu Not Showing Correctly in Google Chrome
Curiously, this is being caused by the max-width property set on the <img> tags in the menu. Assuming you're only using .pad5right in the menu, you need to modify your CSS to get rid of the max-width: 100%` set by Bootstrap: .pad5right { padding-right: 5px; max-width: none; } A more general style for any menu would be this: .dropdown-menu img { max-width: none; } Quite a strange issue which took a while to solve, and likely a bug in Chrome.

Categories : Jquery

Bootstrap dropdown menu changing background on submenu focus
Just put this css i think this is worked .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle { background-color: #B54646; }

Categories : HTML

Bootstrap dropdown menu – stay open if search bar is focused
You can use :focus to find if the search box has focus in the second hover function, without any need to give things additional events. .size() will return 1 if it has focus and 0 otherwise, and then the ! casts those to true and false, respectively, before negating. Then in the first hover function, check to make sure there are no currently open menus before opening. $('ul.nav li.dropdown').hover(function() { if (!$(".dropdown-menu:visible").size()) { $(this).closest('.dropdown-menu').show(); $(this).addClass('open'); } }, function() { if (!$(".navbar-search input:focus").size()) { $(this).closest('.dropdown-menu').hide(); $(this).removeClass('open'); } }); CodePen demo

Categories : Javascript

Bootstrap: changing dropdown menu's active link color
Probably cause the dropdown is in the navbar. This one should work .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: #16A170 !important; background-image: linear-gradient(to bottom, #17AA76, #149466) !important; background-repeat: repeat-x !important; color: #FFFFFF; outline: 0 none; text-decoration: none; }

Categories : CSS

twitter bootstrap typeahead change dropdown menu width based on query
Ah, I figured out the error. It is something that doesn't seem to agree in bootstrap.css .pull-right > .dropdown-menu { //right: 0; left: auto; } have to delete right: 0. this of course only works if you're using pull-right like i am for navbar search.

Categories : CSS

How can I display the the contents of the bootstrap typeahead suggestions even after a child in the dropdown menu is selected?
You can manually call the 'show' parameter of your .typeahead instance, like this: $('input:text#YourInputID').typeahead('show'); And you can hide it with: $('input:text#YourInputID').typeahead('hide');

Categories : Jquery

twitter bootstrap change background color of button with dropdown menu on click
You need to edit this class .dropdown .open in your css. So if you wanted the background to change, it will be like this: .dropdown.open { background: #fff; } And for the font color change it here: .dropdown.open .dropdown-toggle { color: #000; } See the updated fiddle here

Categories : HTML



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.