I have two buttons in a div with position: fixed; but when you click, the list of options disappeared.
I wrote my code in the link below, you can help me?
http://jsfiddle.net/T9QHw/
Thanks.
The list of options disappear, because you're telling the div to hide everything that goes beyond the div itself using overflow:hidden. Clearly, the dropdown menu is outside of the div.
Remove overflow:hidden and it will work.
Related
I have a problem with my website https://kudatoday.kz/ where I'm trying to make my slide in menu visible with overflow:hidden on the parent element.
I tried to set position:absolute to .slide-in-menu and position:absolute to header element however it didn't help.
My slide in menu is still hidden. I used overflow:hidden just to hide the white blank space on the right, because it appeared once I've created side in menu.
Could you please take a look?
What it should be and what we have:
Put overflow-x:hidden in the <body> tag and then remove overflow:hidden from the css et_pb_section_0_tb_header in the header <div> that is causing the slide in menu to be clipped.
That should solve the clipping issue.
You also need to change position:absolute to position:fixed in the .et_pb_row_1_tb_header css for the slide in menu because it currently scrolls the slide in menu when you scroll the main web page.
It's simple but I can't find the solution.
https://prnt.sc/q6mfb6
https://codepen.io/lastofdead/pen/WNbvXRP
As it appears, the drop-down menu stuck in div. What should I do to get dropdown menu out?
You need to remove overflow-y: auto from .hastanotu as it's preventing your div from showing the content when its height increases, and hence showing the scroll bar. By removing it you let the div flow naturally.
solution: https://codepen.io/obedparla/pen/zYxEgGY
As you can see in JSFiddle I have slideout menu. I want to slide or animated left to the right opening "div" on my page center, when someone click menu buttons. I've already searched about that but always saw lightbox but I dont want it. By the way I cannot add JSFiddle link so I have to write it like that. h ttp://jsfiddle.net/ygzsmsk/4b2Zs/
Based on my understanding of your question, I've modified your code a bit.
I understood that you want the first div to move from left to right instead of just the menu.
You need to remove the position CSS attributes from internal elements and add the same to your parent div; in addition, you need to have your JS act on the parent div.
Have a look at this:
.cbp-spmenu-push {
left: -200px;
position: absolute;
}
http://jsfiddle.net/4b2Zs/1/
You can play around with the final arrangements as you see fit.
I want to make a div with position:fixed that will overlap the content, but not clickable, i.e. when you click in that div's area you are clicking on the content under it. So the text under the div could be easily selected. Is there a way to do that?
The solution is to add pointer-events: none; to the CSS of the overlaying div. This will cause any all events to pointer events to ignore the overlaying div.
This is demonstrated here: http://jsfiddle.net/nayish/7hHvL/.
You'll notice that the alert, which is set only for the bottom div, works also when clicking on the overlaying div.
I had the same problem. Basically I have designed sidebar, Left side is fixed and right is scrollable. The left contains links, when I tried to navigate, I found the link was not clickable. I changed z-index: 1 to z-index: 100. Therefore my navs links worked again.
You might have to use a setCapture on the underlying div during the hoverOver of this fixed div and releaseCapture during the hoverOut
var underlyingDiv = document.getElementById ("div1");
var overlyingDiv = document.getElementById ("div2");
overlyingDiv.onHoverOver = "underlyingDiv.setCapture";
overlyingDiv.onHoverOut = "underlyingDiv.releaseCapture";
Whatever is on displayed in front is also what is being clicked on. one way to handle that is to make a transparent graphic for the links that appears over the links and zindex that transparent image in front of the position absolute content. Easy to do if the links are menu buttons with a known size.
Update an example
<a href="#">
<img src="transparent.gif" width="100" height="100" style="position:absolute; zindex:100">
</a>
<div style="width:100px; height:100px">
this is my menu button
</div>
The img position:absolute remains at current screen position over the div menu button. zindex will push it in front of the fixed content. It is easy if you know the space for the link that is covered up.
Had the same problem. But i found a way wich worked for me. You could simply position the fixed element inside of the container wich is overlapping it. As you set position: fixed it does not matter where the element is in the mark-up, because it will still stay on the same place.
I am using ScrollTo and LocalScroll on my single page site, which scrolls in all directions. I have four large divs inside a wrapper, two on top and two below those. Each div is a 'page' of the site.
Onload, the page goes to the 'home' div anchor, at the bottom left of the window/page. My issue is that anytime I try to scroll horizontally from one of the bottom divs to another via my floating nav box, it flashes the content from the div above it before scrolling to the correct linked div.
There is no 'flicker' or 'flash' of any content when the scrolling originates from a top div.
Any help is very much appreciated!
It took some time and tons of Googling but I finally figured this out.
Comment from: Freelancer ID [Member]
I think i've got the problem..
If you put # in the HREF attribute of the A tag, then the window will go up on click to go the ID (which is nothing)
To fix this, Please try to use the following:
- Put "javascript:;" in the HREF attribute of the A tag.
- Or use DIV, SPAN... etc with cursor:pointer css style and onclick event.
This will fix it.
Source: http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery