Disappearing Shared Asset as Alert Widget

CM1
1

I want to add an alert that can display site-wide when the widget is populated with content and remain hidden when empty. Is there a straightforward way to do this?

2

Hi Karolina,

One way to do this would be to have a Rich Text widget on your templates linking to a single shared asset that contains your alert text, then use CSS to position this widget along the top of your page, and use jQuery to display or hide the widget depending on whether it contains any text content or not.

I’ve cobbled together a simple mock-up of this that works pretty well, which also includes a button to dismiss the alert box.

To set this up, first add a Rich Text widget to one of your templates. Then, in the Style tab, give this widget a class of redAlert. Next, go back to the Content tab and add your alert text (over 5 characters) to the widget, and check off the Shared Asset button on the bottom to save this as a shared asset.

Once that’s taken care of, paste this script into your template’s “Additional head content” code insertion point:

<script> <br /> $(document).ready(function(){ <br />

 if ($(".redAlert").text().length > 5) { <br />





 $(".redAlert").append("<span class=\"dismiss\"><a title=\"Dismiss this notification\">x</a></span>"); <br />





 $(".redAlert").fadeIn("slow"); <br />





 $(".dismiss").click(function () { <br />







$(".redAlert").fadeOut("slow"); <br />





 }); <br />

 } <br /> }); <br /> </script>

And then paste this code into your template’s Override Theme CSS insertion point (once you’re done testing this, it’s a good practice to relocate this code into your global CSS file):

display:none;   
position:fixed;   
top:0px;   
left:0px;   
width:100%;   
z-index:105;   
text-align:left;   
font-weight:normal;   
font-size:100%;   
color:white;   
padding:5px;   
background-color: #F23A3A;   
padding-left: 10px;   
padding-right: 10px;   
}   
.redAlert span.dismiss {   
border:2px solid #FFF;   
padding:0px 5px;   
cursor:pointer;   
float:right;   
margin-right:10px;   
position: absolute;   
top: 15px;   
right: 25px;   
}   
.redAlert a {   
color:white;   
text-decoration:none;   
font-weight:bold   
} ```   
 
With this properly setup and a page using this template open in preview, you should see a simple red bar along the top of your browser with your alert text and the dismiss button. Note that if you go into your asset library and remove all text from the asset and save, the alert bar should no longer appear.   
 
Let me know if this is similar to what you’re looking for, or if you have more specific requirements for this.
3

Adding the text, works as advertised.I went back into the asset and deleted all text, saved and approved. Text is gone, but red alert bar stays. I tried incremental publish [modified assets aren’t listed]. I tried a full publish with same results. Status of asset is pending and does not change after either publish.

4

Hey Lloyd, did you figure out what was going on with this? I’m having the same problem—other than those little hitches, it works great, but I can’t have it hanging around all the time. (People will talk!)

5

Can you give me some examples of when you would use this? I think I understand what you are saying but want to be sure.

Would this be something like an announcement ?

6

Yes, it’d be for emergency alerts. We’ve got campus alerts set up to go out for anything relating to the cancelation of class/campus closings, for example; that’s probably what they get used for most.

7

P.S.—Casey, who is awesome as usual, figured this out for me. Apparently that character count in the code there at the end—

if ($(".redAlert").text().length \> 5)

—includes all HTML characters, which means even if you’ve got a blank HTML field, the area will still show up because it’s still got the characters ```

8

I could use some help with this. I’ve had this function working for at least two years. Tried to use yesterday and nothing’s displaying. Nathaniel had come up with a number of 48 which was working. I have tried adjusting this number up and down to no avail.

9

Hi Lloyd,

Can you check the page to see if there are any console errors in developer tools? I am also wondering if you could create a temporary console.log to output the length of the redAlert’s text contents.

Regards,
CW

10

Hi Chris,
Here are console messages.
Error:
http://www.massasoit.edu/web_resources/themes/img/horizontal_dotted_border_white.gif Failed to load resource: the server responded with a status of 404 (Not Found)jquery.min.js:125

Warning:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

And, I don’t know how to create a temporary console.log.

Thanks,
Lloyd.

11

Hi Chris,

I went back to trying different numbers for after the ‘>’. I went back to the original code snippet with a number of 5, and it works. It actually works with a > 0. What could have changed? Upgrade?

Thanks,
L.

12

Hi Lloyd,

I just validated this on an earlier version of CM1. We eliminated a good deal of white space from the widgets in the latest release, which would explain the difference you are seeing. In earlier versions, the white space was contributing to the larger text() count. In regards to > 0 still working, it looks like there is one additional white space being picked up via the markup. You could change your JavaScript to this, for example:

if ($(".redAlert").text().trim().length > 5) {

This removes white space from the text and then applies the criteria. Let me know if this helps.

Regards,
CW

13

Hi Chris,

I’m sticking with the ‘5’. Everything seems to be good.

Thank you and thanks for the explanation.

L.

14