I have 4 overlays inside a container (overflow: hidden) translated horizontally 100% on default.
.active on the .overlay animates it into view.
activating another one removes .active from the current one and adds .active to the new one.
Now I want a transition delay on the "new active" element, because animating both the old and the new overlay at once results in inconsistent visuals (overlays overlaying each other etc.). And both animating simultaneously feels too hasty.
My first approach:
sibling selector to delay the transition for all siblings of the .active, didn't work out, since the sibling selector doesn't look "behind" or "around" ...
Second approach:
class on parent atLeastOneIsActive and then apply transition-delay to .active. Didn't work aswell, because both the new and the old overlay then get a transition-delay, making all even worse.
Unfortunately I can't show you the live example.
The question is more in general anyways; but to get a picture of the result here 2 screenshots
hover on either pin or link
overlay displayed
I'm looking for a clean and sweet way to apply delays in certain situations.
jQuery is only used for class management.
activating another one removes .active from the current one and adds .active to the new one.
Is this "activation" made with jQuery .on("mouseover", function(){?
Because if you add and remove classes this way, why not simply use setTimeout on the .addClass()?
-------------------------
EDIT
I worked on it a while.
And I'm pretty sure to have a solution...
Let's say I found the exact nature of you specific problem, to be more exact.
I reproduced your problem and the solution in a fiddle.
But before you have a look to it, please read my explanations:
The image transitions are overlapping.
And that is because of their width versus their animation start position.
Since they are pushed to outer right of the viewport at a specific distance...
This distance is not enought versus the with of the images. It has to be twice (minimum) the larger image.
I found it by setting them all to a same size.
This is not mandatory... But sure is a good thing!
So, the solution is to push them twice this "max-width" away from the right side of the viewport.
I made a Fiddle and made 4 buttons (representing your map pins) to animate the images. I also assigned keyboard numbers to them, so it's easyer to closely watch the images without having to target the buttons with the mouse. ;)
And finally, there is a button "Toggle class equalSize" which forces the images to all the same size.
Have a look now!
:D
.active {
right:0;
}
img{
position:fixed;
right:-1200px;
top:100px;
transition: right 2s;
}
.equalSize{
width:600px;
height:450px;
}
Related
In this website "https://www.armoli.com" as you can see, the menu is transparent at first and integrated with the image on the back, but its color changes as you scroll down.how can I do this in html?(with css and js)
I think You will have to use Intersection Observer API.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Much better than listening to scroll event.
(it is an API that helps you listen to an element in the DOM (can be an array). and it triggers when that element appears on the screen. then you manipulate the DOM depending on what appears there.
Check this tutorial: https://www.youtube.com/watch?v=T8EYosX4NOo
You can probabbly do this using css and javascript, simply make two css classes with your different themes e.g.
.navbar_active {
color: red;
}
.navbar_other {
color: blue;
}
Then just use some javascript to add/remove the css classes, depending on the current scroll.
Edit: something like this sounds like what your looking for: Transitioning Affixed Navigation bar - CSS theres, even a fiddle you can try: http://jsfiddle.net/jv0qvvp2/1
basically the same approach as what i said, add/remove css classes depending on the current scroll position
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
I am trying to get the blue rectangle container to have a larger z-index than the other boxes when hovering over elements that overflow the container.
Game 3 here has the larger z-index, but I want to access the Loser select in the blue circle below, however I can't, unless I hover back over the blue rectangle to gain focus.
Is there a way around this where it can be handled with just CSS or do I need JQuery?
I created a Fiddle that can replicate this so ignore any JS errors as the actual page requires quite a bit of includes, however the issue is in tact. Hover over the 4th game which has three dropdowns, Source, Pools, Seeds. You can select Seeds just fine. However, hover over another game at the top then come back down to "Seeds", you can't select it unless you hover over "Pools" again. I need "Seeds" to always be selectable regardless of what the overflow is.
https://jsfiddle.net/cblaze22/qp4L15tj/8/
Current Code For Game Hover (Blue Rectangle area)
The .forward puts a large zindex on the blue rectangle area.
$(element).hover(
function () {
if (!$(this).parent().hasClass('editing')) {
$(this).addClass('forward');
}
},
function() {
$(this).removeClass('forward');
}
);
This was actually a surprisingly easy fix once you understood the structure and the actual problem. Div's covering div's. First you disable all click events on everything within .bracket-part as they aren't needed. Then you add the click events back onto the selects. To make it more generic for easier use again you can simple change select in the CSS selector a class .re-enable-events or something. The JS about z-index's wasnt actually needed.
#bracket-wrapper .bracket-part select {
pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
pointer-events: none;
}
See: https://jsfiddle.net/uws8pf1y/
Pointer events has a very good compatibility rate so this solution should be fine across pretty much all devices.
To get straight to the point: There is no clean CSS-only solution to your problem.
Since all your elements are pretty much identical (and by that I mean the class for example) you will not find a solution that covers all configurations. Since they do not differ from each other they all have the same z-index but not the same stacking context. Unless you give their parents a different z-index or change the stacking context you will not be able to access the blocked element. It also comes down to how limited you are with changing the code. The code looks like it has been build by JS and you just copied it to your fiddle for us to test.
Attempt #1
Attempt #1 is to just add high z-index directly to the according parent.
#mmshr already tried to do this. However, he tried to give the whole class a high z-index which is not gonna work out of course as you've already pointed out.
You could however try to only give this element a high z-index element in its style attribute. This comes down to how limited you are with changing the code. You could theoretically use JQuery for this but the way you would select the element (e.g. by nth-child()) brings me to Attempt #2 which uses the same pseudo-class and is a CSS-only attempt so using JS is nonsense in this case. By the way if you can change your code like this you could remove your little JQuery function that adds the forward class on hover.
Attempt #2
This attempt works fine and you are not limited by the ability to change code since this is pretty much one line of CSS. As already stated in Attempt #1 you could use a pseudo-class to select this element. However, this is not valid for all configurations. If you would add one element (<div data-bind="template: { name: 'bracket-template', data: $data }">...</div>) before your blocked element you would have to change your CSS each time. But if there is no need for changing elements and configurations (or at least not the order) this is a valid solution:
#bracket-wrapper > div > div:nth-child(8) > div > div {
z-index: 2 !important;
}
In this attempt you can (and have to) remove your little JQuery function too:
$('.bracket-part').hover(
function() {
debugger;
$(this).addClass('forward');
},
function() {
$(this).removeClass('forward');
}
);
Remove the entire thing.
Attempt #3
Probably the cleanest and best attempt is to use the stacking context. The stacking context is explained right here. But to give you a simple overview (W3C):
Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
Most important is this part because it applies to your structure:
Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
If you take a look at your HTML tree you will find the following:
According to the stacking-context we should be able to give your element in the background a higher stacking-order then your element in the front by changing the order of those elements in your tree.
It is just a guess but you probably have something like an array where you store the data and some JS-file builds a tournament bracket out of it. If you could somehow change the order of those two elements (for example by changing the order of your array) you would not use CSS and would not use any additional JQuery.
What if none of these work?
Well, then I do not see any solution that requires only CSS.
I also thought about a possible JS solution but this is a tough one and I couldn't figure out a (simple) solution. Let me explain the problem:
Since your select is behind a div element JQuery would not recognize it (e.g.) on hover so you would have to use pseudo-classes again which I already covered with a CSS-only attempt.
I also thought about adding a z-index of -1 to the blocking element, because JQuery could recognize it on hover. But this leads to problems too: the blocking element is now in the background and the blocked element in the front and you can also click it. The problem is that the (former) blocking element is now behind the #bracket-wrapper. This is also not a valid solution because you would have to use a pseudo-class again to target this specific element.
Conclusion
I am gonna be honest with you: This tournament tree is poorly designed and structured. There shouldn't be overlapping elements or elements outside of a container and certainly not both in combination. If none of my attempts are suitable I do not see any CSS or JS solution. At least not a simple one. You have provided little information about how the tournament tree is build but things could change if you do.
At this state I think rebuilding this whole structure is the only really clean solution.
Edit
Solution #1 by #Deckerz
#Deckerz provided a great solution which does not focus on the z-index. Instead, it uses pointer-events. I tried this approach but failed because I forgot an important part. The logic behind it is simple:
First you disable all click events on everything within .bracket-part as they arent needed. Then you add the click events back onto the selects. To make it more generic for easier use again you can simple change select in the CSS selector a class .re-enable-events or something. The JS about z-index's wasnt actually needed.
#bracket-wrapper .bracket-part select {
pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
pointer-events: none;
}
However, this is still a workaround. I still recommend restructuring your code and CSS.
If you want Seeds to always be selectable, why not always give it's bracket-part parent a high z-index?
Right now, the z-index is only high after the bracket-part is hovered. Although Seeds is technically a child of the bracket-part, it is positioned outside of it, so unless the Seeds select is hovered directly after bracket-part is hovered then it won't be selectable.
If you add z-index: 10000; to Seeds' bracket-part parent styles, Seeds will always be selectable:
<div class="part bracket-part ui-draggable ui-resizable ui-draggable-disabled ui-state-disabled" data-bind="bracketPartInit: { left: $data.left, top: $data.top, height: $data.height, width: $data.width, disabled: $root.members.bracket.disableDrag, minHeight: $data.minHeight }, css: { 'dash-top' : $data.dashedBorderTop(), 'dash-right' : $data.dashedBorderRight(), 'dash-bottom' : $data.dashedBorderBottom(), 'dash-left' : $data.dashedBorderLeft(), 'reverse-bracket' : $data.type() == 2, 'box-bracket': $data.type() == 13, 'bye': $data.bye()}" aria-disabled="true" style="top: 459px; left: 0px; height: 80px; width: 150px; z-index: 10000;">
I have this problem in Safari and Chrome but not in IE.
When I click a button the mousedown event triggers some kind of CSS rule which makes it slightly wider.
Because of this it drops down onto the next row and the click event is not triggered.
It stays on the next row until the mouse button is released.
I'm working on a large existing site and it's difficult to isolate all the CSS, but I think this could be due to an effect inherent in the browser(s).
Is there a CSS way to stop any effects occuring when the button is clicked?
Thanks for your help.
This is the CSS I have found for :active / :hover.
I don't think this could cause it!
a:hover, a:active
{
text-decoration: none;
}
(The button is an image inside an anchor)
Open your page with Chrome. Right click on the element and select inspect element. On the right handside corner of the inspect element handler, you will see few icons.
Click on the middle one(Which is having a arrow. When you hover it a label will display as "Toggle element State").
Change the element state to active (and to focus if it didn't change anything), and now you will be able to see what css rules are used to apply those changes to your button(It can be a padding or width).
Since now you know what the rule is, you can undo it using another rule (Or using javascript). It's hard to say how to remove the effects without knowing what the effects are.
you can declare a class in css name it for exemple abortmousedowncss :
.abortmousedowncss{
width:yourwidth; !important /* this dont allow any css to overide it ;)*/
}
and you can apply it after with jquery like this :
$('#yourbutton').addClass("abortmousedowncss");
i'm having a weird issue which i can't figure out (searching for a solution for 2 hours now).
I'm using a slider, which when slide is selected shows a caption (H3 and p). Everything works fine except opacity ease-in-out on caption elements when using transition-delay property.
In jsfiddle i've setup a demo. When clicked next or previous, the caption elements show up with a delay, but opacity easing on them doesn't work for a smooth transition. Any help appriciated :)
Now, this might just be me misunderstanding what you are trying to do, but it seems like you are incorrectly assuming inheritance of the transitions, as well as using imprecise selectors. Basically, the line #test input:checked ~ #full > .caption selects the .caption if any of the checkboxes are checked, i.e always.
In the end, you never really tell the elements to actually animate their opacity.
By rewriting your code a bit, I came up with this which should work a bit better.
As a side note, you shouldn't use duplicate ids (#full), if anything because it will break Javascript if you try to access it. Use space separated classes instead.