Adding a notification banner to your Help Center v2

220 コメント

  • Alejandro Colon

    Chris Horroll

    Glad I could help. :)

    Have a great rest of your day!

    1
  • 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
  • Alejandro Colon

    Kyle B

    There might be a couple of issues you are experiencing. The first thing I see 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.

    CSS Issue

    To fix the CSS 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-box2" 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-box2"
    1
  • Joshua Bentley

    Is there any reason why this wouldn't work on the Sandbox? I've followed the instructions from Wes, and I think I've done it right, but the banner is not displaying. URL: https://medbridge1603833747.zendesk.com/

    What would be most helpful for me to provide here?

    0
  • Harriet Klymchuk

    Hey Joshua,

    It should work in a sandbox. When you preview the changes as an Admin, does your banner show regardless of the publication state of the alert banner article? For example, this is the preview on one of ours - neither of the articles are published to be visible to end-users, but both banners (we have two articles set as templates for banners) are visible in the preview.

    If it's not showing on Admin preview, that suggests something's not quite working for you in the html, js or css (for me it was something like a missing comma or bracket in script.js).  If it is showing in Admin preview, then check your visibility permissions and published state of your article with the alert label :)

    Hope that helps!

    0
  • Joshua Bentley

    Harriet Klymchuk - thanks for the response. No, it's not showing at all. I'm not a coder - I just know enough to be dangerous. I'll comb through it and see if I'm missing a bracket or comma somewhere. A lot of the text is red in the js code and I assumed it was just part of the syntax coloring. XD

    I'll have a look and see if I can figure it out. If not, you know I'll be back. :)

    Thanks again!

    0
  • Joshua Bentley

    Harriet Klymchuk In the JS code, there are dollar signs and when I run the code through a javascript checker it says the $ is undefined. I checked the remainder of the JS code and there are no other $ occurring. Is that something that's defined in the CSS?

    0
  • Harriet Klymchuk

    Joshua Bentley Your summary of "I'm not a coder - I just know enough to be dangerous" is very much applicable to me as well (I love that description though and I'll be using that myself more often :D), so I'm not able to answer your question unfortunately! My js has dollar signs in though, so it the directions in the GitHub from Wes should work for you.

    If it helps, I put the CSS and script at the very bottom of both respective files, after everything else (rows 331-344 below).  If I recall, I think the issues I had the first time around were trying to fit this in before the widget customisation, as I thought it would have to be higher up the script to be in order, but it can just go at the end no problem :)

     

    0
  • Joshua Bentley

    Harriet Klymchuk Thank you for that. And glad I could give you a new phrase. :)

    It turns out that this code did NOT work on our sandbox. When I added it to a test version of our actual (non-Sandbox) site, it worked fine. I've been tweaking it to make it look the way we want. I still have some work to do to make it look good on mobile. And I'll probably be tweaking the code a little so we can have multiple alerts with different colors and icons.

    Thanks for all your help!

    0

サインインしてコメントを残してください。

Powered by Zendesk