Intelligent hide announcement banner


We've got an internal website at work where the administrators have added an announcement banner to the top of the site to show users important information. This is fine however the banner seems to get bigger and bigger every day. There is also no way to hide the banner once its been viewed and it is added to the top of every page on the site!

I've been fiddling with Stylish and I can quite easily get Stylish to hide the announcement banner (its within a div.) However I'd really like to make the hiding a bit more intelligent. Is it possible to do the following with Stylish?

-Show the announcement banner to the user once every 24 hour period. (Could Stylish write a cookie to track that the banner has been show. If the cookie expired after 24 hours the banner would then be shown again? If the cookie hasn't expired the banner wouldn't be shown.)
-Add a collapse button to the banner. So a user can manually hide the div.

When I say that banner isn't shown I mean that the banner div is in a collapsed state. So that if a user did want to manually view the announcement they could just expand the div again.


  • edited July 2017 Chrome
    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.
  • 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.
  • 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
  • See this fiddle for the very basic idea:
    Hover the green bar
Sign In or Register to comment.