Site Announcement Bar

hs-announce

Site-wide announcment bar that users click to hide. It shows only once for users, until they clear their browsing data. Includes installation and general styling on single or multiple pages in your Higher Logic site. The script can be installed on a certain page, and entire site/microsite, or globally across your HL instance.

Want to see it again?

Click here

Get The Code

Add the below as an html content item in a site-wide include in your site:

<div class="hs-announce hidden"><h4>Hello Friends!</h4>
<p><strong>Please remember to <a href="/" style="color: #fff;">register for the Annual Conference!</a></strong></p>
<p><a class="btn btn-default hs-announce-close"><i class="fa fa-times"></i></a></p></div>
<style><!--
.hs-announce {background:#f15a29; color:#fff; padding:2rem; text-align:center}
.hs-announce .btn { background: rgba(1, 1, 1, 0.4) none repeat scroll 0 0;
border: 0 none;
line-height: 10px;
padding: 5px;
position: absolute;
right: 10px;
top: 10px;}
.hs-announce .btn .fa {
color: #fff;
opacity: 0.6;
}
--></style>
<script>// <![CDATA[
$('.hs-announce').prependTo('body');
$(document).ready(function() {
if (localStorage.getItem('hsannouncebar2') === null) {
$('.hs-announce').removeClass('hidden').slideDown();
}
$('.hs-announce-close').click(function(e)
{
$('.hs-announce').slideUp();
$('.hs-announce .btn').fadeOut();
localStorage.setItem('hsannouncebar2','shown');
});
$('.btnagain').click(function(e)
{
$('.hs-announce').removeClass('hidden').slideDown();
$('.hs-announce .btn').fadeIn();
});

});
// ]]></script>

Quick Instructions