Menu in Bootstrap 4 disappears when the mouse movement is slow - javascript

I'm running this fiddle and when the mouse pointer moves quickly from from START to the unfolded menu, everything works great. However, when the movement is slower, the menu closes because it feels like the mouse's left.
const menu = $("li.dropdown");
menu.on("mouseenter mouseleave", () => {
menu.toggleClass("open");
});
Initially, I tried to make the list item control taller but realized quickly that the menu will open below it (plus this unfortunate vertical distance).
What can I do about it?
Apparently Bootstrap creators found this good for some reason (or didn't think about mouse movements but rather clicking). Am I setting up the hover event in an inappropriate way, perhaps?

for me is better this solution
here is the fiddle
.open>.dropdown-menu{
margin-top: initial;
}

This css fixed it for me (Bootstrap v4.3.1):
div.dropdown-menu {
margin-top: 0 !important;
}

Yes, it's caused with space between menu element and menu itself. When you are moving fast, it's ok, because cursor "jumps" directly to menu, but moving slowly, you will leave menu item area and menu disappear. One solution which comes to my mind is to move it 1px higher:
.open>.dropdown-menu {
top: calc(100% - 1px);
}
Working JSFiddle.

Related

HTML/CSS/Javascript/Center

have the following;
I'm displaying a 5000x5000 px image.
(it is a floor plan)
You can scroll over the image using the horizontal and vertical scroll bars
and the mouse pressed wheel.
at various points I have light points, if you press the button a popup will appear, letting you turn on or of the light or even dim.
to give you guys an idea.
Oke now I want this popup to be centered in the middle of the screen, NOT to the center of the image. Because if the view is top left, the popup would not be visible. visa versa with the lower right.
As the code is generated by an design studio I do not have many options.
An answer would be nice.
regards,
Ger
The following will center a .popup div on the page, regardless of where you scroll or what parents the popup has.
.popup {
position: fixed;
top: calc(50vh - (**INPUT POPUP HEIGHT**/2);
left: calc(50vw - (**INPUT POPUP WIDTH**/2);
}
In case you don't know the exact height or width, there's a less clean version involving setting the popup margin to auto and it's parent to display: flex. Look at flexbox if you're having trouble with this.

CSS - Navigation menu hover causing flickering effect

Please take a look at this page: http://www.staging.turtlerush.co.uk/sumas/
The Nav / Sub Nav CSS seems to be causing the hover menu to flicker in all cases EXCEPT when the page is fully scrolled to the top. So in other words, it works at first but as you scroll down the flickering starts.
I believe this is a problem with the nav ui element "clashing" with another but am struggling to fix.....
Probably a bit too much code to just paste in here but happy to if needed.
Any help?
Add this CSS code to .kopa-background:
.kopa-background {
pointer-events: none;
}
pointer events specify what to do when you click on the element.
This is a little explanation of this CSS property: https://css-tricks.com/almanac/properties/p/pointer-events/

Make context menu appear on top

OK, so, here's my setup:
I have a jQuery UI Layout setup (one west, one south, and a center panel)
In the west panel, there is a jqTree (with the jqTreeContextMenu plugin, showing a simple dropdown menu, on right click)
The issue:
When the user right clicks on any of the tree items, the context menu does appear, although it appears sort of "clipped", while it should appear ON TOP of everything, no matter what.
I've played a bit with the z-indexs but - as usual, since it's not actually my... thing - I cannot get it to work.
So, any ideas?
Live demo: http://testbox.drkameleon.com/peppermint/uilayout.html
JS Fiddle: http://jsfiddle.net/2ke92qcg/
(the layout here, for some reason, appears rather weird, but it shouldn't matter. Closing and re-opening the west panel fixes the issue)
OK...
So, after a lot of trial-and-error, here it is:
.ui-layout-west{
z-index: 5000 !important;
overflow: visible !important;
}
And that was all! :-)
as mentioned before
z-index only works within a particular context i.e. relative, fixed or absolute position.
z-index for a relative div has nothing to do with the z-index of an absolutely or fixed div.
Here is your FIDDLE
ul#filetreeMenu {
z-index: 999 !important;
position: fixed;
}
div#wrapper {
position: initial !important;
}

Lock page scroll temporarily in the middle of the long page

Ok, so there is a webpage with a long list. In the middle of the list I'd like to lock the scrolling and later enable it again. How would this be possible, so that it would behave nicely in modern mobile browsers?
One solution I tried is to set body position style to fixed and the setting top style to the scrollTop value prior to the setting position to fixed. There is this thing about position: fixed - as soon as it is set, the page will be jumped to the top. Problem is that on iOS Safari the page is sort of flashes when you enable/disable scroll, and it also gets really laggy behaviour on Android Chrome.
Any better hints?
Update: I have a sidebar menu with list of items, and while the main page should be locked, sidebar menu should remain scrollable.
Just add a class to the html-tag every time you want to look the screen. I use this method on js modals or lightboxes.
You can do this simply by adding the overflow attribute.
.
CSS:
html.-is-locked {
overflow: hidden !important;
}
.
JS:
Now you just have to add/remove the class with javascript:
//Get HTML element
var html = document.querySelector('html');
//Activate
html.classList.add('-is-locked');
//Deactivate
html.classList.remove('-is-locked');
//Toggle
html.classList.toggle('-is-locked');
Try this on the body instead of position:fixed:
body.locked{
height: 100vh;
overflow: hidden;
}
It will keep the scroll position but prevent scrolling.

Rotation of CSS arrow and javascript toggling

I have two div banners that have corresponding CSS arrows. When the banners are clicked, the javascript toggles between revealing and hiding the text underneath. Likewise, the respective arrows rotate down when the text is revealed and back up when the text is hidden.
Now, I want my first div banner to be revealed automatically when the page first loads. However, when I drew my CSS arrows, due to the padding of the div, I can't get the arrow in the first div to be the same as the arrow in the subsequent div(s) and line up properly.
http://jsfiddle.net/nVuQ2/1/
I've tried messing with the placement of the arrow:
.tri0 {
margin-left: 20px;
margin-top: 5px;
}
but the best I can do is push the tri0 arrow up to the padding of the h3 tag and it won't go any farther.
Is there a way that I can set a toggle flag in the toggleClass to make it say that the first div banner is already toggled and subsequent clicks make it un-toggle?
Your issue happens because of the border of your tris elements. You are displaying different borders in each one of your elements, this will make them appear in different ways.
So basically I set them with the same borders values, the same rotation, and when your page first load it toggles your div and show your first message.
Note that is not necessary to have two different classes to toggle your element state, once that they are equal.
Check in the Fiddle.
Not sure if this is the solution that you wanted. But I hope that helps you.
Thanks.
Try using absolute positioning instead of floating, this way you can ensure the arrows are always aligned in the middle. You'd set parent div to position:relative, and arrows to position:absolute;
The code will look like this -
.slide0, .slide1 {
position:relative;
}
.tri0, .tri1 {
position:absolute;
top:0;
bottom:0;
margin:auto 0;
}
.tri0 {
right:5px;
}
.tri1 {
right:10px;
}
EDIT: Whoops, I realised I didn't compensate for the rotated arrow. Because the 10px border makes it effectively 10px wide, position .tri1 with right:10px instead. Updated code above, and update fiddle here.
Updated Fiddle

Categories

Resources