Adding a notification banner to your Help Center v2

214 Comments

  • Alejandro Colon

    Chris Horroll

    I had an inkling that was what you were looking for but I was not quite sure. 

    There are probably a couple of issues you are experiencing. The first is that the separation of the CSS for each notification is not complete, this is what is most likely partly causing your issue with it not looking correct. The second is that you are most likely utilizing the same div class for each Notification Bar, this is also probably causing some issues as well.

    CSS Issue

    To fix the first issue, go through your CSS code and where the ".ns-box" is included in those will also have to be duplicated.

    • For example, I see that you created ".ns-boxtip" but I also can see that ".ns-box.ns-show" and ".ns-box a" have not been duplicated. Anywhere where the original ".ns-box" was it will need to be duplicated and replaced with the ".ns-boxtip"

    Use Multiple Notifications on the Same Page

    To add multiple notification bars to the same page, you will need to create a separate HTML div and class.

    Duplicate HTML code provided for the Notification Bar

    <!--This should be added at the very top -->
    <div class="alertbox"></div>

    I would suggest something like the following:

    <!--This should be added at the very top -->
    <div class="tipbox"></div>
       

    The new code should look something like this:

    <!--This should be added at the very top -->
    <div class="alertbox"></div>

    <!--This should be added at the very top -->
    <div class="tipbox"></div>

    Then you will need to update your js code from this:

    // MW-Notification Banner
    if (window.location.href == "https://support.zoopla.co.uk/hc/en-gb") {
    $.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=announcement" ).done(function( data ) {

    $.each(data.articles, function(index,item) {
    var style1 = '<div class="ns-box ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><i class="fas fa-bullhorn"></i></i><p><strong>Announcement</strong></p><p><a href="'+ item.html_url + '">' + item.title + '</a>' + '</p></div><span class="ns-close"></span></div>'

    $('.alertbox').append(style1);
    });
    $('.ns-close').on('click',function(){
    $(".alertbox").remove();
    });

    });
    $.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=toptip" ).done(function( data ) {

    $.each(data.articles, function(index,item) {
    var styletip = '<div class="ns-boxtip ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><i class="far fa-comment-dots"></i></i><p><strong>Top Tip!</strong></p><p><a href="'+ item.html_url + '">' + item.title + '</a>' + '</p></div><span class="ns-close"></span></div>'

    $('.alertbox').append(styletip);
    });
    $('.ns-close').on('click',function(){
    $(".alertbox").remove();
    });

    });
    }

    The updated code should look like this:

    // MW-Notification Banner
    if (window.location.href == "https://support.zoopla.co.uk/hc/en-gb") {
    $.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=announcement" ).done(function( data ) {

    $.each(data.articles, function(index,item) {
    var style1 = '<div class="ns-box ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><i class="fas fa-bullhorn"></i></i><p><strong>Announcement</strong></p><p><a href="'+ item.html_url + '">' + item.title + '</a>' + '</p></div><span class="ns-close"></span></div>'

    $('.alertbox').append(style1);
    });
    $('.ns-close').on('click',function(){
    $(".alertbox").remove();
    });

    });
    $.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=toptip" ).done(function( data ) {

    $.each(data.articles, function(index,item) {
    var styletip = '<div class="ns-boxtip ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><i class="far fa-comment-dots"></i></i><p><strong>Top Tip!</strong></p><p><a href="'+ item.html_url + '">' + item.title + '</a>' + '</p></div><span class="ns-close"></span></div>'

    $('.tipbox').append(styletip);
    });
    $('.ns-close').on('click',function(){
    $(".tipbox").remove();
    });

    });
    }

    That should allow you to have 2 completely separate Notification Bars.

    0
  • Chris Horroll

    Worked a treat, and it made sense as to why too! Thanks for all your help Alejandro!

    0
  • Kyle B

    I have a strange issue that I can't figure out for the life of me. I'll post the code at the end of this. 

    I have 2 alerts, one red for outages and one green for when the outage is resolved. I copied the code from the OP and made some minor tweaks to get it as desired. They both function properly, but the green alert is bigger (taller) than the red one. 

    At first, I thought I tweaked the wrong thing, and maybe it was my margins or something. So I started from scratch. I coped the code from the OP again, made some changes to the sizing, and removed the megaphone kind of thing, and when I liked it, I copied that and made it my green alert, only changing the background color. So everything should be the same, yet it isn't. 

    Here are some examples of what I mean. For this test, I used the same article without modifying it. I only modified the "label_names=alert" part to the .js to use style1 or style2. Here is the red alert:

     

    And here is the green alert:

     

    The red alert is 53 pixels tall and the green is 84 pixels tall. No idea how there is a difference. 

     

    Here is the code from my .css:

    /*MW-Notificaiton Banner CSS */
    /* Common, default styles for the notification box */

    /* change the background color by editing "background" */
    /* change the text color by editing "color" */
    .ns-box {
    background: #e84325;
    padding: 15px 0px 15px 0px;
    line-height: 1.4;
    z-index: 1000;
    pointer-events: none;
    color: #e7e7e0;
    font-size: 85%;
    border-bottom: 1px solid #e7e7e0;
    }

    .ns-box2 {
    background: #008E13;
    padding: 15px 0px 15px 0px;
    line-height: 1.4;
    z-index: 1000;
    pointer-events: none;
    color: #e7e7e0;
    font-size: 85%;
    border-bottom: 1px solid #e7e7e0;
    }

    .ns-box.ns-show {
    pointer-events: auto;
    }

    .ns-box a {
    color: inherit;
    opacity: 0.7;
    font-weight: 700;
    }

    .ns-box a:hover,
    .ns-box a:focus {
    opacity: 0;
    }

    .ns-box p {
    margin: 0;
    }

    .ns-box.ns-show,
    .ns-box.ns-visible {
    pointer-events: auto;
    }

    .ns-close {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 4px;
    top: 4px;
    overflow: hidden;
    text-indent: 100%;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    }

    .ns-close:hover,
    .ns-close:focus {
    outline: none;
    }

    .ns-close::before,
    .ns-close::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 60%;
    top: 50%;
    left: 50%;
    background: #6e6e6e;
    }

    .ns-close:hover::before,
    .ns-close:hover::after {
    background: #fff;
    }

    .ns-close::before {
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
    }

    .ns-close::after {
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
    }

    .ns-box-inner i {
    color: #fff;
    font-size: 3.8em;

    }

    .megaphone:before {
    content:'\1F4E3';
    font-family: "entypo";
    font-size: 2.2em;
    display: none;

    }

    /* Top bar notifications */
    .ns-box.ns-bar {
    top: 0;
    left: 0;
    width: 100%;
    }

    .ns-bar .ns-close {
    background: transparent;
    margin-top: 15px;
    right: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none;
    }

    .ns-bar .ns-close::before,
    .ns-bar .ns-close::after {
    background: #b7b5b3;
    }

    [class^="ns-effect-"].ns-bar.ns-hide,
    [class*=" ns-effect-"].ns-bar.ns-hide {
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
    }




    /* Slide on top */

    .ns-effect-slidetop .icon {
    position: absolute;
    display: block;
    font-size: 109%;
    top: 50%;
    left: 1em;
    -webkit-transform: translate3d(0,-20%,0);
    transform: translate3d(0,-20%,0);
    }

    .ns-effect-slidetop p {
    padding: 0 3.2em;
    font-size: 1.2em;
    display: inline-block;
    }

    .ns-effect-slidetop .ns-close::before,
    .ns-effect-slidetop .ns-close::after {
    width: 2px;
    background: #fff;
    }

    .ns-effect-slidetop .ns-close:hover::before,
    .ns-effect-slidetop .ns-close:hover::after {
    background: #fff;
    }

    .ns-effect-slidetop.ns-show .icon,
    .ns-effect-slidetop.ns-show p {
    -webkit-animation-name: animScaleUp;
    animation-name: animScaleUp;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }

    .ns-effect-slidetop.ns-show p {
    -webkit-animation-name: animFade;
    animation-name: animFade;
    }

    @-webkit-keyframes animScaleUp {
    0% { opacity: 0; -webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1); }
    100% { opacity 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1); }
    }

    @keyframes animScaleUp {
    0% { opacity: 0; -webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1); transform: translate3d(0,-50%,0) scale3d(0,0,1); }
    100% { opacity 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1); transform: translate3d(0,-50%,0) scale3d(1,1,1); }
    }

    .ns-effect-slidetop.ns-show,
    .ns-effect-slidetop.ns-hide {
    -webkit-animation-name: animSlideTop;
    animation-name: animSlideTop;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    }

    @-webkit-keyframes animSlideTop {
    0% { -webkit-transform: translate3d(0,-100%,0); }
    100% { -webkit-transform: translate3d(0,0,0); }
    }

    @keyframes animSlideTop {
    0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
    100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
    }

     

    And here is the code from my .js:

     // MW-Notification Banner
    $.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=alert" ).done(function( data ) {

    $.each(data.articles, function(index,item) {

    var style1 = '<div class="ns-box ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><span class="megaphone"></span></i><p><a href="'+ item.html_url + '">' + item.title + '</a>' + item.body + '</p></div><span class="ns-close"></span></div>'

    $('.alertbox').append(style1);
    });
    $('.ns-close').on('click',function(){
    $(".alertbox").remove();
    });

    });
    $.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=alertresolved" ).done(function( data ) {

    $.each(data.articles, function(index,item) {

    var style2 = '<div class="ns-box2 ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><span class="megaphone"></span></i><p><a href="'+ item.html_url + '">' + item.title + '</a>' + item.body + '</p></div><span class="ns-close"></span></div>'

    $('.alertbox').append(style2);
    });
    $('.ns-close').on('click',function(){
    $(".alertbox").remove();
    });

    });

     

    0
  • Kyle B

    After the good ol' "delete and see what happens" troubleshooting, I found that if I delete the padding for ns-box2, the height matches that of ns-box. Could the padding from ns-box affect ns-box2 somehow? That's very strange to me. 

    0

Please sign in to leave a comment.

Powered by Zendesk