Chris Horroll

Hi All, 

One minor issue i'm having and i'm convinced its a quick positioning fix.. I'm just not seeing it!!

I have 2 banners, the orange for announcements (ns-box) and the blue for promoted info (ns-boxpromoted). I want the X to be in that position for both banners so users can close them.

However, after a second, the X for the blue banner moves from the top right position of the blue banner and sits on top of the orange X on the orange banner. Rather than having 2 X's on the orange where the first click clears the blue banner and the second click clears the orange, how can I get the X to stay fixed in the top right of the blue banner.

My js code..

// MW-Notification Banner
if (window.location.href == "https://help.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 = '
Announcement 📣
' + item.title + '' + '
'

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

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

$.each(data.articles, function(index,item) {
var stylepromoted = '
Promoted Article ⭐
' + item.title + '' + '
'

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

});
}

My css code..

/*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: rgba(255,87,34,100);
padding: 10px 20px 20px 20px;
line-height: 1.5;
z-index: 1000;
pointer-events: none;
color: rgba(255, 255, 255, 1);
font-size: 85%;
border-bottom: 1px solid #DDD;
}
.ns-boxpromoted {
background: rgba(26,155,224,1);
padding: 10px 20px 20px 20px;
line-height: 1.5;
z-index: 1000;
pointer-events: none;
color: rgba(255, 255, 255, 1);
font-size: 85%;
border-bottom: 1px solid #DDD;
}

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

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

.ns-box a {
color: rgba(255, 255, 255, 1);
opacity: 0.7;
font-weight: 700;
}

.ns-boxpromoted a {
color: rgba(255, 255, 255, 1);
opacity: 0.7;
font-weight: 700;
}

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

.ns-boxpromoted a:hover,
.ns-boxpromoted a:focus {
opacity: 1;
}

.ns-box p {
margin: 0;
}

.ns-boxpromoted p {
margin: 0;
}

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

.ns-boxpromoted.ns-show,
.ns-boxpromoted.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: 2.2em;
}

.ns-boxpromoted-inner i {
color: #fff;
font-size: 2.2em;
}

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




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

.ns-boxpromoted.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%);
}

.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 {
box-shadow: inset 5.4em 0 rgba(0,0,0,0.1);
}

.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); }
}

.custom-iframe {
height: 1050px!important;
border: none!important;
}

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

@...

Thanks for your reply, really helpful. I was actually hoping to be able to use multiple labels at the same time, it's been a bit hit and miss but I've managed to get it to a point.
(Essentially I want to be able to have the announcements up, but also, have one below it for weekly tips. They won't always be both on display at the same time but i'm sure it will occur at some point)

So far:

the js

// 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 = '

the 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: rgba(255,87,34,100);
padding: 10px 20px 20px 20px;
line-height: 1.5;
z-index: 1000;
pointer-events: none;
color: rgba(255, 255, 255, 1);
font-size: 85%;
border-bottom: 1px solid #DDD;
}
.ns-boxtip {
background: rgba(26,155,224,1);
padding: 10px 20px 20px 20px;
line-height: 1.5;
z-index: 1000;
pointer-events: none;
color: rgba(255, 255, 255, 1);
font-size: 85%;
border-bottom: 1px solid #DDD;
}

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

.ns-box a {
color: rgba(255, 255, 255, 1);
opacity: 0.7;
font-weight: 700;
}

The Announcement bar is fine and has worked well, but the tip one:

• Doubled in size
• Not centred
• Text colour doesn't follow suit as per the code

Do you have any suggestions? Much appreciated

Out of interest, and apologies if i'm in the wrong place, I've been using the banner for some time now on the homepage of a help centre using the label of 'announcement'. Is it possible to use multiple labels and have each banner coded differently - ie an announcement banner in an orange, and a hints and tips one in blue for example?

Thanks

+1

@...

Out of interest, and apologies if i'm in the wrong place, I've been using the banner for some time now on the homepage of a help centre using the label of 'announcement'. Is it possible to use multiple labels and have each banner coded differently - ie an announcement banner in an orange, and a hints and tips one in blue for example?

Thanks