When I have a menu item which contains a submenu, this submenu is shown inside the menu's div, screwing the css (hover over the Services tab):
http://jsfiddle.net/jYXnE/2/
There this part of the JS (that everyone seems to use) which bothers me when initializing the menubar plugin:
position: {
within: $('#frame').add(window).first()
}
Since there is no frame id anywhere in the official examples, I guess it creates a div on-the-fly?
I compared my code to some other menubar jsFiddle and I can't find the issue to it, any help would be highled appreciated.
It seems like I had forgotten to link menubar's CSS. Everything is fine now.
Related
I'm using ngx-bootstrap for datepicker. But when I use this datepicker inside modal, It opens under modal.
My issue is similar to this . But css changes are not working for me. Any help whould be appreciated.
I think You need to change the parent class style .
this will work for ngx-bootstrap calendar
follow this code
bs-datepicker-container, bs-daterangepicker-container { z-index: 2000; }
You are probaly using the wrong class if you follow that answer.
I took a look at the github code and saw that the class name used there is bs-calendar-container.
You might want to verify that this is the case for your wrongly z-indexed elements by inspecting them in your developer tools(F12) and verifying the class name on them.
Then you might want to change the z-index to have them appear above the modal.
The problem is caused by the modal being a direct child of the body element, and the datepicker date chooser also being a direct child of the body element, so they are competing for the same z-index space.
The bootstrap modals usually have an z-index of 1000. So setting the z-index of your datepicker item to 1200 should help, to make sure they also appear above elements that are present within the modal.
In case your datepicker has the class bs-calendar-container your CSS would look like this:
.bs-calendar-container {
z-index: 1001;
}
I have a CSS menu that when you hover over a li it shows a sub menu, example ui: http://www.screencast.com/t/JIa2NvbreF8V
I added code that on a model device is would 'focus' the element when you click/tap it, like: $($event.target).focus();
problem is, when I tap a <a href="\blah"> link inside my page navigates fine but my menu stays open. I tried retriggering the body to be the focus but no luck. Anyone got a good idea on how to accomplish this?
What I would do is add a class to control the "focused" state, so that when you click on a link you can easily remove it.
Shouldn't be complicated but i would need to look at the code :O
Try the below code
$("a").focusout(function(){
$(this).css("display","none");
});
Regards
maha
inside that jquery selector have it so when you click the target it also changes the style for the parent li:hover
I am in need of a dropdown-submenu using Bootstrap 3.
There are questions like this all over the place, one in particular that got me closer is this one: Bootstrap 3 dropdown sub menu missing
However, the answers there display the dropdown to the right of the current menu. I need to display the dropdown within the current menu, just sliding the rest of the nav down when open.
Here is a bootply with what I have so far: http://bootply.com/91787
Currently the submenu is just overlaying the current dropdown... I need the submenu to push the rest of the dropdown elements down when open. How can I achieve this? Any help getting the dropdown to activate on click instead of hover would be helpful as well, but the main question is more important.
Like this ? I´m not sure if I understood your question right.
http://bootply.com/91794
Edit:
Quite simple, I hope this is what you want:
.dropdown-menu {position: relative;}
http://bootply.com/91800
Jeff Mould solved this beautifully.
Git: https://github.com/jeffmould/multi-level-bootstrap-menu
Nav Demo: http://theboot.fenwickmedia.com/
First, please take a look at this pen showing just the menu + the code (preview the menu here).
Coming to the point: In the navbar that you see, clicking on the "Channels" menu shows the menu item sliding out. The problem is, the menu's background doesn't represent its active state (i.e. #fff background and #222 color).
Setting the background-color when the mouse is hovered on the menu, is easy. But this one's tricky. I did try, :active selector to no avail. Any ideas?
SCREENSHOTS:
You could add a class to the li once the menu is open and remove it again.
BTW: :active works for the moment you click on it.
Since it appears as though using jQuery to add/remove a class is the only way to go, I went ahead with it. Here's the code I used.
jQuery(document).ready(function($){
$('.menu-item > a').click(function(){
$(this).toggleClass('selected');
});
});
The code finds the link element a one level down the element with .menu-item class (li in my case), and adds/removes class .selected to the link element.
Here's a fork of the original pen with the menu functioning the way I intended it to. You can preview the new and functioning menu here.
(Full credit to the code provided in this question. More info in the official jQuery documentation.)
UPDATE: You might find this answer extremely helpful (a better, simpler solution).
Example code:
jQuery(document).ready(function($){
$('.collapse').on('show hide', function () {
$(this).siblings("a").toggleClass('selected');
});
});
Something strange afoot, here:
An instance of Datepicker is showing up in a weird place as a single bar in the upper left hand corner of this page.
I'm using both jQuery UI's Datepicker and Accordion on a page. In the CSS for the UI, the display:none for Datepicker seems to be overridden by the display:block for the Accordion, at least according to Firebug (see img below).
Then, once the Datepicker trigger is clicked in the 'catering/event room' tab (click one of the buttons to show div with Datepicker,) the display:none seems to then work.
Here's what the bad div looks like:
and here's the Firebug panel:
I had the same problem and while some of the above solutions work, the easiest fix of all is to add this to your css:
#ui-datepicker-div {display: none;}
This basically hides the realigned datepicker element when it cannot be binded to an existing invisible element. You hide it, but it will be initialized again when you click on an element that needs to display the datepicker. Upon re-initialization, the datepicker element with id #ui-datepicker-div will have the correct position.
In my case, I use the session "$(document).ready(function(){" of JQuery in my favor.
As I have a JavaScript file that is loaded in all pages of my system, I just added the following line on it.
$('#ui-datepicker-div').css('display', 'none');
For me, it appears a clear and elegant solution because I did not have to change its library.
Best of all, it is working fine on all browsers. :)
The problem could be that you're binding the datepicker to something that is not visible, that would explain the odd positioning (trying to offset from something that doesn't exist will degenerate to offsetting from (0,0)). The datepicker <div> should have at least a table inside it so maybe the datepicker is getting confused and throwing an exception before it finishes initializing itself. When you click on one of the bound inputs, it is probably initializing itself again (or at least properly finishing the initialization) and everything works fine after that.
Try binding the datepicker when the date input becomes visible:
Remove the $(".date_picker").datepicker({ disabled: false });
Add an id="cater" to <input type="text" name="cater"/>
Call $('#cater').datepicker(); when the "reserve event room" button is pressed.
If that works then you'd have to add similar hacks for other datepickers. If it doesn't work then I'm probably wrong. If my guess turns out to be right then you might want to report a bug to the jQuery-UI people.
BTW, in Safari I can only see the first two tabs, I had to switch to Firefox to see the "catering" tab. Oddly enough it works just fine in Chrome. This is probably unrelated but I thought I'd let you know anyway.
The problem is down to the element the datepicker is being binded to not yet being available.
The solution I found was to initalize the datepicker when the actual element has been clicked and then showing it straight after initalization. This ensures the element is available before the datepicker has been binded to it and initalized.
$(function() {
$(".date_input").click(function() {
$(this).datepicker();
$(this).datepicker("show");
});
});
....
<input type="text" class='date_input' />
I had a similar problem in Chrome and I solved it editing jquery-ui1.7.2.custom.css
from:
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
to:
.ui-helper-hidden-accessible { position: absolute; left: -9999999px; }
There's probably too many nines for Chrome.
Try moving the last block to the bottom of the page (right before you close the body tag). You can read more about why you want to do this here:
http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html
BTW: Cool idea for a menu. I like it.
Sometimes it has to do with the z-index of another item on the page being higher. Setting the z-index to a very high number solved my issue.
#ui-datepicker-div {z-index:11111;}