Daddyzilla Posts - Answer Overflow

Daddyzilla

•Created by Daddyzilla on 4/11/2024 in #front-end

Opacity overload?

Hi, I have been tasked with creating a "back-to-top" button. I have 95% of it working. But I am stuck. And I believe the answer is "you can't do that". But I figured I would ask first to know for sure, and work out a reasonable compromise on what the boss wants... So this button, which is more complicated then just a <button> or <a> needs to meet the following requirements: 1) It should show up after the user has scrolled a bit down the page (30%) 2) Should be semi-transparent so user can see the content under the floating button 3) Sit in the bottom-left corner of the page 4) go completely opaque when the user hovers over this button, so they can read the link text more clearly And finally 5) animate itself onto the page when the user has scrolled to 30%. And by animate I mean adjust opacity from 0 up to 60% I can do 1 to 4 easily. Just stick my control in the corner, set the opacity, create a hover rule - done. simple. And doing the animation on scroll is equally straight forward The problem I have is putting these 2 together. The issue I am finding is that because the user can effectively control the animation timeline, it is the animation which is taking control of opacity. So my :hover rule is doing nothing. In short, the animation is taking prioirty over the :hover in terms of controlling opacity. And I found a link on Stack Overflow which essentially confirms this: https://stackoverflow.com/questions/36551715/css-transform-and-transition-on-hover-do-not-work-after-animation-fill-mode-for So I am trying to come up with a way to do this. I can't transition something like display. So my options to hide the button between 0 and 30% are limited. Another option is to transition in the button in some other way such as scale or transformY. So, before I tell him no, I'd like to know if I have overlooked something obvious, or a clever trick, so that I can do all the opacity things he wants to do. thanx!! ps- the CSS was removed due to msg length limit.

17 replies

KPCKevin Powell - Community

•Created by Daddyzilla on 2/22/2023 in #front-end

Using :NOT operator deeply nested within duplicate elements

Hi, I am working with a 3rd party library (DevExpress) which creates some complex controls. In this case their Page control. My problem is that one of our images, under a particular color scheme (DevExpress theme) doesn't look good because it is rendering navy blue on black. Here's a screenshot: https://www.screencast.com/t/seIZNs1N And a mock-up of the relevant DOM starting from the page control's tab container, down to my target IMG: div:BlackGlass --> ul --> li --> div --> ul --> li --> a --> img So in my first attempt to fix this I did this:

  div.dxtcLite_BlackGlass li a img.dxtc-img[src*="ConversationSquare_"] {
      filter: invert(100%);
  }

  div.dxtcLite_BlackGlass li a img.dxtc-img[src*="ConversationSquare_"] {
      filter: invert(100%);
  }

css Note above that I omitted the first UL LI and DIV elements. And the above selector does work. It finds my IMG and inverts the color. Now the problem: When the tab is Active, I do NOT want to do the inversion. So I modified my selector:

  div.dxtcLite_BlackGlass li:not(.dxtc-activeTab) a img.dxtc-img[src*="ConversationSquare_"] {
      filter: invert(100%);
  }

  div.dxtcLite_BlackGlass li:not(.dxtc-activeTab) a img.dxtc-img[src*="ConversationSquare_"] {
      filter: invert(100%);
  }

css Above does NOT work. However, if I change my selector to contain all the elements between the top DIV and my bottom IMG it works as expected:

  div.dxtcLite_BlackGlass ul li div ul li:not(.dxtc-activeTab) a img.dxtc-img[src*="ConversationSquare_"] {
      filter: invert(100%);
  }

  div.dxtcLite_BlackGlass ul li div ul li:not(.dxtc-activeTab) a img.dxtc-img[src*="ConversationSquare_"] {
      filter: invert(100%);
  }

css So my question is, is this a bug? Or am I not understanding how to use the :NOT operator correctly? Clearly it is finding the first LI under the first UL and saying, nope this does not define the .dxtc-activetab class, hence we have a match. This feels like a Chrome/browser bug because it stopped looking within a given sub-branch of the DOM tree too early. It seems to only apply to the first element that matched - to which it did the :NOT comparison and concluded it did not exist so it gets selected. To put that another way, the way it is behaving is what I would expect if I used the > immediate child operator. I dunno cheers!

7 replies

KPCKevin Powell - Community

•Created by Daddyzilla on 2/11/2023 in #front-end

Spanning columns using CSS Grid

I don't think what I am attempting to do is possible. Based on the hours of reading I've done (CSSTricks, StackOverflow, etc), whenever we are spanning columns with CSS Grid, the grid-column-start MUST be specified. In my case, I would like a particular cell to span to the the last line, regardless which line/column it falls into. Here is some styling:

.Grid-Container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.Grid-Column-Span-To-End {
    grid-column-end: span -1;
}

.Grid-Container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.Grid-Column-Span-To-End {
    grid-column-end: span -1;
}

As far as I can tell, this is not possible. The above seems to be ignored. If, on the other hand I did this:

.Grid-Column-Place-End {
    grid-column-end: -1;
}

.Grid-Column-Place-End {
    grid-column-end: -1;
}

That will force that cell to be placed at the end. Which is better than nothing. But is not really what I want to achieve as it then leaves a potential gap of empty cells before it (not a dense grid). All the spanning examples I found online, they specified both a start and ending line. Where I did find something reasonably close to what I am after, it was a bug report or suggestion. So clearly I am not the only person that wants to do something like this. Thanks in advance. And I won't mention the K word, because I don't want to get booted. 🙂 cheers!

4 replies

Gaming

Programming