Here's a fiddle showing you a demo of the dropdown menu I've written.
The problem:
Part of the text (the site title link in this case) that is below the dropdown menu ("Channels") is unselectable / unclickable, while the other part below the normal "Home" link is rendered just fine. (You can try that in the demo.)
Why I think this is happening: I use JavaScript to dynamically change the height between 0 and auto values when the menu ("Channels") is clicked; NOT something like display: none;, and hence the menu-item element is only hidden, rendering the text that falls beneath it un-selectable/clickable.
The question is, how do I fix this, without breaking the menu's current functionality and style (i.e. transition for dropdown). Everything I've tried, including display: none | block;, visibility: hidden | visible;, and opacity: 0 | 1; have failed me.
EDIT: As seen in the latest versions of Google Chrome and Chromium web browsers.
It work in FF
For Chrome where for some reason the child element (of #channels-menu-item-wrapper) does not respect the overflow:hidden of the parent use (it respects the hidden in a visual manner only..)
You can use a delayed transition and move the sub-element out of the way ..
.collapse > div{
position:relative;
}
.collapse:not(.in) > div {
left:-10000px;
-webkit-transition:left 0s ease;
-webkit-transition-delay:0.35s; /*same delay as the time it takes to open/close so it does not show*/
}
(i have only added the -webkit- vendor specific rule.. apply for all)
Demo at http://jsfiddle.net/gaby/cfH33/5/
Set .collapse div's height and width to 0 using script when clicking on the menu.
Update: Form the #Gaby answer got this hint ".collapse:not(.in)".
.collapse:not(.in){
width:0;
}
This also will work. http://jsfiddle.net/8Mde7/3/
This is what I meant by setting width:0.
Related
I'm building a menu with an "indicator" just like this codepen: https://codepen.io/jnowland/pen/XmQGNx
Everything works perfectly except for one little tiny detail: When the link is clicked and that page loads, the indicator animates from the previous child before settling on the link that just became .active. This can't be seen in the linked example, only the hover effect. This is a screen recording of my menu (sorry for the low gif framerate):
You can see how the hover works perfectly but note how the transition jumps from the menu item before after a link is clicked and that page loads. I don't want a transition here. How can I prevent that? My code looks almost exactly the same as the codepen for the parts that control this so please refer to the code in the link.
.Nav-item {
&:last-child {
&:before, &:after {
content: '';
display: block;
position: absolute;
pointer-events: none;
transition: left #{$transition-speed} ease;
}
My initial thought was deleting the transition from this part but it messes up the whole transition so it has to stay.
.Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before
{
left:($width*$i)+($width/2)-$width;
.Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before{
left:($width*$i)+($width/2)-$width !important;
}
Adding the transition inside these two and delete from the first code block doesn't seem to be the right way to go either.
After days of trial and error I accidentally jumped over what I now think is why the menu is persistent and displays this error:
On page load, the tool I work with (MonoSolutions) adds a separate li item first in the list for the swipe menu close button, but it is set to hide for all screen sizes above mobile. This hidden state takes a fraction of a second to load and just before that happens, all nth-child(#) is one step behind. The unwanted transition is seen when the first list item hides.
Note: The code is probably correct, if you'd work outside a stupid WYSIWYG editor.
I've been working on a web component that will hide/reveal content by hovering over a <div>. I've got the functionality working the way I want, but I just realized isn't accessible via tabbing.
I was able to include tabindex="0" role="button" aria-pressed="false" to each of the <div> boxes, which allows you to toggle between each box, but I have no way of revealing the hidden content.
You can find my code here, which demonstrates the issue:
https://codepen.io/ckatz/pen/XQaKdB
Is there a markup I'm missing to allow for someone to hit Enter to show the text?
I added this to your CSS and it worked when i press TAB and move from div to div:
.color:focus {
/* Change the flex-basis so that we know what
size to transition to on hover. Arbitrary,
based on our design/content.
*/
flex-basis: 20em;
}
.color:focus .details {
opacity: 1;
}
I'm using CSS to ease-in-out some text when a particular psudeo:element is hovered.
The code below is selecting the parent of the .description element I want to show on hover, however the hover effect is happening before I want it to.
.grid-item:hover .description {
visibility: visible;
opacity: 1;
}
When the cursor is a few centimetres above the parent element, the hover state is triggered. I believe this may be a problem with the padding/margins of this element. I've tried many things with no luck.
Here is the full code.
Gently hover a little bit over each image to understand the problem.
You just need to change the CSS selector that shows the text on hover. At the moment, it is triggered when the parent of .image (i.e. .grid-item) is hovered. Instead, if you set it as follows, it will be triggered when the div containing the image is hovered.
.image:hover + .description {
visibility: visible;
opacity: 1;
}
Here's the updated pen: https://codepen.io/anon/pen/WEWmEw?editors=1100
#Jordan Miguel, you're right. It's the padding, as well as the content itself.
If you crack open the dev tools for the browser of you choice (I'm using Chrome's in the picture), you can probably find a tool that will show the box model for a particular CSS element. When selecting your element, you can see the padding on the right and left side that trigger hover.
On the left hand pane of the tools, you can see the element selected as well as the stylings that have been applied. From here you can figure out what you'll need to change in order to get the behavior you expect.
I came across this very neat annotation overlay effect: http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/
You can see a live demo here: http://tympanus.net/Tutorials/CSS3AnnotationOverlayEffect/ (you will need to click on the picture there to see the effect)
I am trying to make the text within annotation <span> clickable with some external link, like:
<span>Easy Theme Options</span>
but it doesn't work... whenever I click on the annotation, it transitions back to full size image.
I appreciate any help, thank you!
I made it work, as you see in this Fiddle.
The problem is that the checkbox is always over the spans. And because all the checkbox and the spans are positioned absolute, changing the z-index wouldn't work! The only way I found it to work with only CSS (by not changing to much) is by messing with the pointer-events property and the <div class="ao-annotations">'s z-index. (z-index is layered within an element. Because the annotations <div> and the checkbox are both in <div class="ao-preview">, changing the <span> z-index wouldn't work.
I did the following:
I set the z-index of the div.ao-annotations higher than the input.ao-toggle. This results to not being able to click on the input, so not being able to toggle.
To solve this I added pointer-events: none to the <div class="ao-annotations">. Now the result is the same, but the <span>s are now positioned on top of the input.
To be able to click on the <span>s I added this CSS:
input.ao-toggle:checked ~ .ao-annotations span{
pointer-events: auto;
}
This results to only being able to click on the <span>s when the checkbox is checked.
Summary:
.ao-annotations {
z-index: 20;
pointer-events: none;
}
input.ao-toggle {
z-index: 10;
}
input.ao-toggle:checked ~ .ao-annotations span{
pointer-events: auto;
}
I am very sad to say this only works in IE11 (and all the other browsers)... So you'd probably have to 'hack' with Javascript or rebuild the HTML / CSS.
I hope you can build on this!
I'm trying to add a downward-pointing chevron (basically a down arrow) from the FontAwesome icon set to a form select box. I've removed the default styling from the select box and added the icon as a pseudo-element after the form. It's working as-intended in a jsFiddle, but not on the site I'm working on.
It seems like the issue may be that the background: transparent; styling on the select isn't working the same on the site as in the fiddle, but I'm not sure why that would be the case. I know I could make the icon visible by increasing the z-index, but then the select dropdown won't show when the icon is clicked (as it does in the fiddle).
Edit: I need to have the dropdown show up when the icon is clicked; this is the case in the fiddle, but doesn't work with a higher z-index on the pseudo-element
Edit 2: Example of accepted solution is in this fiddle; also removed link to production website.
Any thoughts on what's happening here?
Seems as you have 2 different problems - positioning and functionality. Currently your website doesn't display the arrow at all. And even if it did, clicking on the arrow would not open the dropdown list. Simply putting it on top, may work in some browsers, but AFAIK would not be a cross-browser solution.
Per functionality, add 'pointer-events:none' to the arrow alement. This will make sure that it doesn't handle any clicks and they will be propogated to the select elemnt.
Regarding your positioning:
Instead of changing the z-index, simply set the min-width to N pixels and remove the absolute positioning from the arrow.
In CSS selector ordering:after
Remove `position:absoulte;`.
In CSS selector select.orderby
Change width:100%; to min-width: 200px; (or any width you need)
Hope this helps!
You have z-index: -1 on this .woocommerce-ordering:after in your css. Make it 0 or larger than 0 and it works.