Javascript dropdown - javascript

I did a dropdown using JavaScript where on mouseover the dropdown opens. Now since i am using it in a side menu, i would like that when i go over the dropdown, instead of the dropdown items get over the items underneath, i would like that the items underneath move lower to make space.
I managed to achieve this by removing the overflow in the CSS however the problem with this is that when i enter the web page, the dropdown is fully expanded until i go over it with the mouse.

Leave the overflow:hidden in the CSS.
Add to the element style.overflow = "visible" when you want the menu to appear and use style.overflow = "hidden" or style.overflow="" on the element when you want it hidden again.

You need to get/calculate the hight of dropdown layer (supposing this is in different layer) and add this height to underlying menu item box element (checking whether dropdown is visible or not, of course).

Related

Material UI Select, keep the scroll at top if all items are selected

As described on the title, I'm looking for a way to keep the scroll at top because it seems that the default behavior is that it moves to the end when all items are selected, here is an example:
This is the default behavior:
Expected behavior:
I create a sandbox here if any one want to help
I looked for all options presented in the api but no one of them helped, my idea is to get the DOM element directly and apply element.scrollTo=0
Thanks
Set the variant to menu on the <Menu> to prevent initially selected items to change the scroll position.
See: MultiSelect box popover keeps jumping when scroll or select items

html tags in opening drop-down menu

In a parent div, there is a "menu div" as I have shown in the picture. By clicking on the "menu" and a function in javascript, another window opens that contains the menu items.
As it is presented, the "menu window" exceeds the parent div margins. For the menu part, I have considered two different tags. One when it is in the parent div and the other when it opens with the menu items and with padding and margin settings in css I have put them exactly in the same position so that when the window opens, the observer does not recognize any displacement for "MENU".
Is there a simpler way to do this? Can I have only one tag for MENU?
Yes there is a simpler way than using 2 different menu tags.
You will have 1 menu tag (with some test for the menu) and put your menu items inside your menu tag (but don't display them - display:none). When user clicks on the menu, change the display of your items to block (display:block) and make sure your menu will show the items outside it's original size.

how to make ddslick popup overflow

I am trying to use ddSlick jquery plug-in(a drop down with images) on my page. I'm trying to add this dropdown plug-in into a panel with size Height:200 to Widht:100px.
The problem comes when i clicked on the drop down, the popup menu goes under the other page elements. So last part of the dropdown popup can not be shown to the user.
Please let me know how can I make sure these kind of widgets get to overflow on other page elements?
Thanks,
Check your element z-index css property. Z-index handles
elements position in z-axis. z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Scrolling a scrollable DIV without Javascript?

I basically have a fixed width DIV with an unordered list inside that overflows to the right of the DIV when the list is too large. It basically looks like this:
http://i.imgur.com/Tr36X.jpg
Each list item (basically a 60x60 image) is clickable and it leads to a page with the same DIV element and same list items, except one is highlighted a different colour to show it's the current image. What I'm trying to do is get the one that's currently selected (it has a class="active" attribute) to show in the middle of the scrolling DIV, like so:
http://i.imgur.com/YtF1y.jpg
The only way I can think of doing it would be to have a Javascript file included on the page to find what list item has the class="active" attribute, and then scroll along to it using Javascript. Problem with this is, it won't initially be scrolled to the correct position when the page loads, the user will see it "jump" into position when the Javascript loads and gets executed.
Is there a way to do what I want without Javascript? I don't mind a little bit of markup and CSS hackery if need be.
Thanks!
I doubt that this can be solved only with CSS and HTML. Unless you use some other language (like PHP) that can generate you an HTML with changed order of DIVs.
But, I can solve your Javascript "jumping" problem.
You initially show your DIVs with css style="display:none;"
Do the scrolling with JavaScript (and other stuff like changing order of DIVs if needed).
Set css style="display:block;"
i.e. items will show up on the screen already scrolled.

Creating pull down menus

I am trying to creating a pull down menu in a navigation bar. I have the idea how to do it. I am just not succeeding in displaying the menu list on a layer above the "main page layer". The main page is shifted downwards when I click on the menu item. I am using display:none. How to force the menu list to appear above the main page without the main page changing its position?
If you wanna do using CSS then try adding CSS property position:absolute.
Here is an example of a CSS-driven menu using hierarchical list items: http://phrogz.net/JS/ul2menu/purecss_testsuite.html

Categories