I've got this strange issue when prototyping horizontal hover mega menu.
I've got currently two menu items and they should display mega menu on hover.
Strange thing is - it's working only when i move cursor out of component and go back - when i'm trying to hover one after another - nothing happens.
Here is the video: https://youtu.be/T9P0lyL3fgg
I was already trying by creating this with two approach like here - with seperated hover area inside component that leads to different state of same main component:
https://tomb.pl/screen.png
And in the second approach i've created two seperated components for every menu item that should go to it's own hover state:
https://tomb.pl/screen-02.png
Unfortunetly - both approaches works like in the video showed above.
Which is strange - cause as far i understand that the second one can make the hovered component above another but in the first one - they are totally seperated areas.
UPDATE:
I was trying different approaches but i still didn't found any solution for this problem. Right now i'm thinking of changing the shape of the component to something like this:
But the question is - if this is even possible?
Thanks
Related
I am using bootstrap select plugin to generate custom dropdowns in one of my projects but I am stuck in a very critical issue. The dropdown list is big and when dropdown is opened the screen moves/scrolls toward bottom a bit so that first few options can't be seen.
Issue can be seen here in this video:
https://drive.google.com/file/d/1SWQVvfOgO0-iLy0KjIf3sPEANKu8Nkpv/view
And if you want to play around please check here the color filter:
https://www.stylorita.com/new1/outfit-ideas.php
Important: I can not use the max-height or add a scrollbar to it for fixing, I must display it without scrollbar. Please anyone can help?
If I understand you correctly, the solution is for whatever reasons NOT a scrollbar, but you want the first entries of your dropdown list to stay in view, right?
Maybe JS scrollIntoView() may help: If you have the chance to apply a class to your first list entry, you could use scrollIntoView when the list opens (which is normally the case at getting the focus or on click).
You can find a short description of scrollIntoView on this page: https://www.w3schools.com/jsref/met_element_scrollintoview.asp
I'm working on an old website that the previous programmer actually died on whilst working on it (no I don't think it's cursed, but it is a bit of a maze of code that could feasably give someone a heart attack ;)
Anyway, I've been hacking and slashing my way through it and resolved many problems, including much of the responsive code that wasn't working correctly.
But I've been left with two problems that currently have me stumped.
Number one is that the drop down menus don't disappear (on mobile screen) when another drop down menu is clicked on. This creates a confusing layered effect.
The second problem is that the drop down option "Vacation rentals" brings up a search box, this is partially displaying off the side of the screen, and the internal date picker is also not displaying well. Any ideas?
Any ideas will be much appreciated!
Thanks!
http://spldev.sanpancholife.com/
I am using twitter bootstrap and has a very long page that I divide into multiple sections.
I'd like to implement a Section Indicator on top left of the screen that always shows where the reader is currently reading, like the screenshot below:
I managed to get the layout correctly as shown here:
However, I've got some problems that I've been working for a few weeks but still can't solved:
How to mark the current section dynamically as the user scroll
How to animate the movement of the arrow from the source to the next (or directly to the destination if the reader click a farther away rather than scrolling)
I've tried with the simpler version from getbootstrap.com/components but still to no avail... Please help... this is very stressful as I'm particularly weak in javascript and css :(
EDIT:
To summarize the answer:
Take a look at this library:
https://github.com/davist11/jQuery-One-Page-Nav.git
For a single-page website have a look at the One Page Navigation Plugin http://trevordavis.net/blog/jquery-one-page-navigation-plugin. It assigns a css-class to the current menu item upon clicking and as the user scrolls down the page.
I've to rewrite an existing web application and port it to extjs components.
This is a bigger application and I have to do it in steps, I can't rewrite the whole application at once, the implementation of MVC will come later. At the moment the application has two frames, left frame with navigation menu
and links with href & target starting actions in main, right frame.
As first step I have to replace the self written navigation menu with extjs solution.
My problem is, the menu is quite big and has a lot of submenus and left frame is rather thin. As effect the menus are rendered partially under the right frame or shift outside the window on the left.
This screenshot shows the first problem:
This screenshot shows the second problem:
My question: is there a possibility to render the menus wider then left frame (over the frame)? Perhaps some layout container below the menu could be useful?
I would like to avoid the shift to the left and the cover through the main frame on the right.
Regards,
Annie
I haven't found a possibility to utilize a ExtJS menu in narrow frame, but the tree component (Ext.tree.Panel) fits quite good and is a nice replacement. It looks like left navigation on the sencha api page. The question is closed for me.
Regads, Anie
I'm trying to do something very similar to this example (source code enabled):
http://www.sunild.com/proto/line_chart_example.html
When you hover over each data point, a circle appears indicating that this is a point. How do I keep those circles visible at all times?
Edit: this example isn't mine, but you can view the source enabled here:
http://www.sunild.com/proto/line_chart_example_src/index.html
Umm, the case you show is a working example giving no details about the code itself. There are enormous ways the code could be.
For Eg - The code could be keeping an event listener over & out a mouse event...So removing it pretty much keeps the circles there.
But still I suggest show at least what you are doing, if not that code to get some clue.