In the below code, How do I determine the dimensions of the menu that appears when you click the button? Currently the menu I'm using is extending outside of the Window. I want to get the dimensions of the menu itself so I can adjust the style of the menu to keep it from extending outside the window.
render: function () {
return<BS.DropdownButton title={this.props.title} style={this.state.buttonStyle}>
<span ref="ddMenu">{this.props.children}</span>
</BS.DropdownButton>
}
I've tried using ref with getDOMNode().getBoundingClientRect() on the ddMenu, but the dimensions and coordinates are always 0. I've tried using this getDOMNode code in the componentDidMount function. But that runs when the button is rendered, not the menu.
The problem is that the menu's dimensions and coordinates don't exist until the button is pushed. Unfortunately I couldn't find a react way of doing this. So I came up with a none react solution.
The solution is to add an onClick to the button. In the function that is called, add window.setTimeout set for 1 millisecond. Reason: The menu doesn't appear right away, setTimeout gives you just enough time to wait for the menu to show up. Then you can run this.refs.ddMenu.getDOMNode().parentNode. If you don't add parentNode, you will only get the elements you added to the menu, not the menu itself. Once you have the menu, you can then run getBoundingClientRect() to get the menu dimensions and coordinates.
render: function () {
return<bs.DropdownButton title={this.props.title} onClick={this.getMenu}>
<div ref="ddMenu">{this.props.children}</div>
</bs.DropdownButton>
}
getMenu: function(){
window.setTimeout(function(){
var dropMen = this.refs.ddMenu.getDOMNode().parentNode;
}, 1);
}
dropMen will give you the menu. dropmen.getBoundingClientRect() will give you the menu's dimensions and coordinates.
Any css styles added to dropMen will then shown on the menu.
One way to overcome this problem is to use drop directions and menu align as mentioned in the React-Bootstrap Docs.Changing the direction and the alignment of the dropdown menu was helpful for me to prevent the drop down menu extending the window.
Add this css to solve this issue:
.dropdown-menu {
min-width: auto !important;
}
#lang-nav-dropdown {
width: fit-content;
}
Related
I've got a menubar that I want to add some CSS or JS to. I want to make it such that when I click on it when in responsive view, the entire object can be targeted (I plan to do some background styling). I've found some stack overflows re: coloring the menu items, the menu itself, but none of those when applied to the overall menubar either A) work at all B) work only for responsive, which is what I want.
I've made a codepen. I just can't figure out if things like :active or :focus or something else would be the right fit. Hopefully the code pen illustrates what I want. I just cannot seem to target the navbar in it's entirety whether thru JS or CSS. I want to achieve a background effect for not just the dropdown but the row the hamburger lives in when clicked.
You can use Bootstrap's collapse events.
$('.navbar-collapse').on('show.bs.collapse', function () {
// Do your stuff
// This event fires immediately when the show instance method is called.
});
$('.navbar-collapse').on('hide.bs.collapse', function () {
// Do your stuff
// This event is fired immediately when the hide method has been called.
});
CODEPEN
If you add this to your navbar-header div:
<div onClick="clickMe()" class="navbar-header page-scroll">
then add this as a function:
function clickMe(){
if(window.innerWidth < 768){
$('.navbar-header').css('background-color', 'red');
}
}
it will work. you can also do an addClass('className'), and specify the class name like so:
.navbar-header.className{
background-color:red;
}
I am trying to build a MEGA MENU using jquery and css using the following code:
$(".sub-menu").find('a.amenu').hover(function(){
$(this).parent().find(".sub-menu-panel").show();
}
,function(){
$(this).parent().find(".sub-menu-panel").hide();
}
);
where the menu links has a class called "sub-menu" and the panel related to it has a class called "sub-menu-panel".
How to keep the related panel of a menu link visible if the mouse hover it ?
my problem is when i move the mouse over a panel to click any sub-link on it the panel it self disapeared because the mouse out event fired when i leave the main link.
Firstly - providing an example of what you're trying to explain would be advantageous to getting a working response.
Secondly - you shouldn't need any javascript/jQuery to show a submenu on hover - a simple :hover mechanic in CSS should give you the effect you want.
I've developed one page using jCarousel within jQuery ui Tabs.
Following page is what I got:
http://knowledge.teldap.tw/knowledgeFB/my_creation/?fid=668330535
Problem is:
If you click the 3rd tab (only one item), you'll find nothing unless you click the left arrow to navigate. It's weird because one the 1st tab ( more than one items) everything is normal and visible.
Can anyone find out what I've missed? Because I've struggled on this for several hours.
Thanks!
The problem is the width of your carousel image has not been adjusted properly
In your jquery,put scroll 1
jQuery('#listelements').jcarousel({
scroll : 1,
And also adjust the height of the container
.jcarousel-skin-tango1 .jcarousel-container-horizontal {
width: 1200px;
height:630px;
margin-left://adjust margin left here
}
You may have a look on this carousel example
I have created a jQuery UI navigation menu, using the menubar widget. It works how I expected except I would like it to behave slightly differently. As you can see here http://jsfiddle.net/hcharge/DebVr/ the submenu expands out and is positioned relative to the link that was clicked.
I would like it to expand out and stick to the left of the navigation bar, no matter which link was clicked, the submenu will always stay the same width. Like this image...
I've tried setting a position relative to the container and absolutely positioning the submenu, however I think that jQuery UI positioning is overriding this. Any advice would be great, cheers.
Edit: this needs to be done with JS as it has to be clicks and not hover actions that trigger the dropdowns
Why don't you do it all only with CSS?
See http://jsfiddle.net/DebVr/8/
Note: the background is blue in order to see the white borders.
Edit:
If you want some functionality, you can add it later, but I think that the basis should be with CSS.
See my code with some functionality here: http://jsfiddle.net/DebVr/11/
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabindex=index+1;
});
$('#bar1>li>a').focus(
function(){$(this).siblings('ul').show();}
);
$('#bar1>li>a').blur(
function(){$('#bar1>li>ul').hide();}
);
Edit 2:
If you want to hide again the submenu when clicked, use the following code:
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabIndex=index+1;
});
$('#bar1>li>a').focus(function(){
$(this).siblings('ul').addClass('show');
});
$('#bar1>li>a').mousedown(function(){
$(this).siblings('ul').toggleClass('show');
});
$('#bar1>li>a').blur(function(){
$(this).siblings('ul').removeClass('show');
});
And CSS:
#bar1>li>ul.show{
display:block;
}
See it here: http://jsfiddle.net/DebVr/16/
Edit 3:
In the code above, I replaced obj.tabindex with obj.tabIndex, and updated the jsfiddle.
The problem is that if you click on the submenu, the anchor loses focus and then the submenu dissapears. On Chrome it can be easily fixed setting the focus event to #bar1>li instead of #bar1>li>a, but then the event doesn't work on firefox... I'm working on a solution, but meanwhile you can use http://jsfiddle.net/DebVr/16/.
Edit 4:
Finally, the fixed code: http://jsfiddle.net/DebVr/18/
It works on Chrome, Firefox and IE.
Effect I want . Basically I want to popup a simple menu when the user mouseovers a link .
I tried several ready made scripts , but had trouble integrating them with my site. SO decided to built my own.
here is what I am trying to do:
<li onmouseover=showlist1() onmouseout=hidelist1() ><a class="navigation" href="show_delhi_items.php">Menu heading</a></li>
function showlist1() //onmouseover
{
document.getElementById('list1').style.visibility='visible' ;
}
function hidelist1() //onmouseout
{
if (menu elements don't have focus)
{
document.getElementById('list1').style.visibility='hidden' ;
}
}
now in this how do I implement the 'menu elements don't have focus' part ? I know its not possible to know which elemtn has focus. so I need an alternative. Basically the problem is that as soon as the mouse moves outside the main link(the link that popups the hidden menu), the menu hides. what i want is for the menu to remain visible if it gets focus. but currently it gets hidden as soon as the mouse outside our main link
hope I was clear enough.
Make the menu overlap the list item that has the onmouseover menu. Then only close the menu if the mouse is outside both the list item and the menu. You will have to use:
position: absolute;
top: some-y-value;
left: some-x-value;
Hmm now I made that comment i better back it up with an actual way of doing it :)
Go here and read all about suckerfish dropdowns
Go here to see an example implementation