Intelligent hide announcement banner

Comments

• anagrammar

  July 2017 edited July 2017

  The simple answer is no. Stylish is for CSS only. You'd need javascript to add the type of functionality you're referring to.
  
  The only pure CSS method you may find useful would be keyframes. They're CSS animations which are automated to a certain degree, and about the closest thing to any kinda javascript magic CSS has to offer. I've used one occasionally to show a notification on page load which is set to fade away after a specified number of seconds. You could hide it everywhere and only use it on certain URLs where you might wanna check the banner.

  #YourBanner {
      -webkit-animation: cssAnimation 10s forwards; 
      animation: cssAnimation 10s forwards;
      pointer-events: none; 
  }
  @keyframes cssAnimation {
      0%   { opacity: 1; }
      90%  { opacity: 1; }
      100% { opacity: 0; }
  }
  @-webkit-keyframes cssAnimation {
      0%   { opacity: 1; }
      90%  { opacity: 1; }
      100% { opacity: 0; }
  }

  There are quite a few keyframe functions, and I'm not that familiar with all of them. That one came to mind because it may accomplish your main goal. If you decide you wanna go the javascript route, here's a better forum for that.
  
  Also, pointer-events: none; assumes you don't need to interact with the banner. If you do, look into hiding it with a keyframe for visibility: hidden; instead. Pretty sure I've used that too, and IIRC, the only downside was that the transition wasn't as smooth. You could probably even fix that by combining them, but I've never played around with them to that extent.
• WOLead

  July 2017

  The cookie based idea? I can't think of anything that would remotely allow that.
  
  The button based method to collapse the element? Well, I've turned elements in the past into pop-down bars using the :hover selector when the mouse rolls over them, then collapses once the mouse leaves their newly expanded area. That said the flailing of ... it honestly didn't deserve to be called coding, the flailing of Mr. Bean style typing may have did the job for a time, but it wasn't exactly the good.
• zoid

  July 2017

  I was thinking something similar to what WOLead said, using :hover.
  
  Depending on exactly how the banner looks, I'd probably do something like this:
  - Override any text formatting used (colour, size, weight, etc.) so it's consistent
  - Make the banner as small as possible while still showing a preview of the banner's text (so you can tell when the message has changed)
  - Expand the banner on hover, so you can see the whole thing when you need to
• stonecrusher

  July 2017

  See this fiddle for the very basic idea:
  https://jsfiddle.net/N8mEK/
  Hover the green bar