1

Below is the pen where i test this code.But i dont know where is the issues in the code.

Here is the pen link where i put this code.

https://codepen.io/codeslide/pen/xvRomW

Is anyone help with this issue i am new in this but keep try to do better. The strip is not close when i click the dismiss button. Thanks for your Suggesstion.

Built in html and css.
CSS code

.headerstrip-wrapper {
  height: 50px;
  position: relative;
}

.headerstrip-wrapper .headerstrip__banner-dismiss {
  width: 12px;
  height: 12px;
  background: none;
  border: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 0;
  position: absolute;
  font: inherit;
  height: 100%;
  line-height: 0;
  cursor: pointer;
  outline: inherit;
  opacity: 0.4;
  padding: 0 16px;
  color: white;
  text-decoration: none;
  -webkit-transition: all 100ms ease;
  -moz-transition: all 100ms ease;
  -o-transition: all 100ms ease;
  transition: all 100ms ease;
  right: 0;
  top: 0;
  z-index: 2;
}

.headerstrip-wrapper .headerstrip__banner-dismiss:hover {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

.headerstrip-wrapper .headerstrip__banner-dismiss svg {
  fill: #000000;
}

.headerstrip {
  display: block;
  height: 50px;
  font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”,sans-serif;
  font-size: 14px;
  position: relative;
  text-decoration: none;
  z-index: 1;
}

.headerstrip .headerstrip-content-background {
  background-color: #fff;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2930b4; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #2930b4, #2a9eb0); /* For Safari 5.1 to 6.0 */
  background: linear-gradient(to right, #2930b4, #2a9eb0); /* Standard syntax */
  background-repeat: repeat-x;
}

.headerstrip .headerstrip-canvas {
  height: 50px;
  margin: auto auto;
}

.headerstrip .headerstrip-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 1000px 50px;
  width: 100%;
  height: 50px;
  max-width: 1408px;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 auto;
}

.headerstrip .headerstrip-text {
  color: #FFFFFF;
  text-decoration: none;
  padding-right: 24px;
  font-weight: 200;
  letter-spacing: 0.8px;
  position: relative;
}

.headerstrip .headerstrip-text strong {
  font-weight: 600;
}

.headerstrip .headerstrip-cta-container {
  display: flex;
}

.headerstrip .headerstrip-cta {
  position: relative;
  background-color: #FC9F97;
  padding: 5px 30px;
  color: #2d2d2d;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  display: block;
  text-align: center;
  min-width: 100px;
}

.headerstrip .headerstrip-cta-mobile {
  color: #FFFFFF;
  text-decoration: underline;
  padding-left: 5px;
}

.headerstrip .headerstrip-cta-mobile:hover {
  color: #FFFFFF;
}


.headerstrip .is-hidden-desktop .headerstrip-content {
  text-align: center;
}

.headerstrip .is-hidden-desktop .headerstrip-text {
  position: relative;
  padding-right: 24px;
}

.headerstrip .is-hidden-desktop .headerstrip__banner-dismiss {
  margin-left: 0;
}

.headerstrip .headerstrip__dismiss-icon {
  width: 12px;
  height: 12px;
  fill: #FFFFFF;
  display: inline-block;
}

@media (max-width: 1024px) {
  .headerstrip .is-hidden-tablet-and-below {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .headerstrip .is-hidden-desktop {
    display: none !important
  }
}
<strong>Html code</strong>

<div class="banner-root">
<div class="banner-container">
<div class="headerstrip-wrapper">

  <button title="dismiss" type="button" class="js-banner__dismiss headerstrip__banner-dismiss">
    <svg class="headerstrip__dismiss-icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

      <path d="M19.8 2.4c.3.3.3.8 0 1.1l-6 6c-.3.3-.3.8 0 1.1l6 6c.3.3.3.8 0 1.1l-2.2 2.2c-.3.3-.8.3-1.1 0l-6-6c-.3-.3-.8-.3-1.1 0l-6 6c-.3.3-.8.3-1.1 0L.1 17.7c-.3-.3-.3-.8 0-1.1l6-6c.3-.3.3-.8 0-1.1l-6-6c-.3-.3-.3-.8 0-1.1L2.3.2c.3-.3.8-.3 1.1 0l6 6c.3.3.8.3 1.1 0l6-6c.3-.3.8-.3 1.1 0l2.2 2.2z"></path>
    </svg>
  </button>

  <a class="headerstrip js-banner__link" href="https://market.codeslide.in/">

    <div class="headerstrip-content-background"></div>
    <div class="headerstrip-canvas is-hidden-desktop">

      <div class="headerstrip-content">
        <div class="headerstrip-text">
          Codeslide!
          <span class="js-banner__link headerstrip-cta-mobile" href="https://market.codeslide.in/">From $0.00/m</span>
        </div>
      </div>

    </div>

    <div class="headerstrip-canvas is-hidden-tablet-and-below">
      <div class="headerstrip-content">

        <div class="headerstrip-text">
          <strong>Codeslide!</strong> Unlimited plugin, WordPress &amp; web template downloads!
        </div>

        <span class="js-banner__link headerstrip-cta" href="https://market.codeslide.in/">From $0.00/m</span>

      </div>
    </div>
  </a>

</div>
</div>
</div>


Ajithraj
  • 433
  • 4
  • 14
Codeslide Creation
  • 27
  • 9

1 Answers1

0

You forgot to add the below script in your code.

var closeButtons = $('.headerstrip__banner-dismiss');
closeButtons.on('click', function() {
  $(this).parent().hide();
});

Here is the snippet:

.headerstrip-wrapper {
  height: 50px;
  position: relative;
}

.headerstrip-wrapper .headerstrip__banner-dismiss {
  width: 12px;
  height: 12px;
  background: none;
  border: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 0;
  position: absolute;
  font: inherit;
  height: 100%;
  line-height: 0;
  cursor: pointer;
  outline: inherit;
  opacity: 0.4;
  padding: 0 16px;
  color: white;
  text-decoration: none;
  -webkit-transition: all 100ms ease;
  -moz-transition: all 100ms ease;
  -o-transition: all 100ms ease;
  transition: all 100ms ease;
  right: 0;
  top: 0;
  z-index: 2;
}

.headerstrip-wrapper .headerstrip__banner-dismiss:hover {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

.headerstrip-wrapper .headerstrip__banner-dismiss svg {
  fill: #000000;
}

.headerstrip {
  display: block;
  height: 50px;
  font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”,sans-serif;
  font-size: 14px;
  position: relative;
  text-decoration: none;
  z-index: 1;
}

.headerstrip .headerstrip-content-background {
  background-color: #fff;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2930b4; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #2930b4, #2a9eb0); /* For Safari 5.1 to 6.0 */
  background: linear-gradient(to right, #2930b4, #2a9eb0); /* Standard syntax */
  background-repeat: repeat-x;
}

.headerstrip .headerstrip-canvas {
  height: 50px;
  margin: auto auto;
}

.headerstrip .headerstrip-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 1000px 50px;
  width: 100%;
  height: 50px;
  max-width: 1408px;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 auto;
}

.headerstrip .headerstrip-text {
  color: #FFFFFF;
  text-decoration: none;
  padding-right: 24px;
  font-weight: 200;
  letter-spacing: 0.8px;
  position: relative;
}

.headerstrip .headerstrip-text strong {
  font-weight: 600;
}

.headerstrip .headerstrip-cta-container {
  display: flex;
}

.headerstrip .headerstrip-cta {
  position: relative;
  background-color: #FC9F97;
  padding: 5px 30px;
  color: #2d2d2d;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  display: block;
  text-align: center;
  min-width: 100px;
}

.headerstrip .headerstrip-cta-mobile {
  color: #FFFFFF;
  text-decoration: underline;
  padding-left: 5px;
}

.headerstrip .headerstrip-cta-mobile:hover {
  color: #FFFFFF;
}


.headerstrip .is-hidden-desktop .headerstrip-content {
  text-align: center;
}

.headerstrip .is-hidden-desktop .headerstrip-text {
  position: relative;
  padding-right: 24px;
}

.headerstrip .is-hidden-desktop .headerstrip__banner-dismiss {
  margin-left: 0;
}

.headerstrip .headerstrip__dismiss-icon {
  width: 12px;
  height: 12px;
  fill: #FFFFFF;
  display: inline-block;
}

@media (max-width: 1024px) {
  .headerstrip .is-hidden-tablet-and-below {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .headerstrip .is-hidden-desktop {
    display: none !important
  }
}
<strong>Html code</strong>

<div class="banner-root">
<div class="banner-container">
<div class="headerstrip-wrapper">

  <button title="dismiss" type="button" class="js-banner__dismiss headerstrip__banner-dismiss">
    <svg class="headerstrip__dismiss-icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

      <path d="M19.8 2.4c.3.3.3.8 0 1.1l-6 6c-.3.3-.3.8 0 1.1l6 6c.3.3.3.8 0 1.1l-2.2 2.2c-.3.3-.8.3-1.1 0l-6-6c-.3-.3-.8-.3-1.1 0l-6 6c-.3.3-.8.3-1.1 0L.1 17.7c-.3-.3-.3-.8 0-1.1l6-6c.3-.3.3-.8 0-1.1l-6-6c-.3-.3-.3-.8 0-1.1L2.3.2c.3-.3.8-.3 1.1 0l6 6c.3.3.8.3 1.1 0l6-6c.3-.3.8-.3 1.1 0l2.2 2.2z"></path>
    </svg>
  </button>

  <a class="headerstrip js-banner__link" href="https://market.codeslide.in/">

    <div class="headerstrip-content-background"></div>
    <div class="headerstrip-canvas is-hidden-desktop">

      <div class="headerstrip-content">
        <div class="headerstrip-text">
          Codeslide!
          <span class="js-banner__link headerstrip-cta-mobile" href="https://market.codeslide.in/">From $0.00/m</span>
        </div>
      </div>

    </div>

    <div class="headerstrip-canvas is-hidden-tablet-and-below">
      <div class="headerstrip-content">

        <div class="headerstrip-text">
          <strong>Codeslide!</strong> Unlimited plugin, WordPress &amp; web template downloads!
        </div>

        <span class="js-banner__link headerstrip-cta" href="https://market.codeslide.in/">From $0.00/m</span>

      </div>
    </div>
  </a>

</div>
</div>
</div>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
var closeButtons = $('.headerstrip__banner-dismiss');
closeButtons.on('click', function() {
  $(this).parent().hide();
});
</script>
Alwin Jose
  • 230
  • 2
  • 8
  • Thanks this problem is solved but it disappear immediately without any animation.can you help me solve this. – Codeslide Creation Jul 28 '19 at 15:11
  • Dude why it appear again on page refresh. – Codeslide Creation Jul 28 '19 at 15:13
  • Its look like same behavior compared to the code-pen which you provided. While closing the strip the changes made locally and you are not saving it anywhere. so subsequent page refresh the strip will automatically appear based on how the code written. – Alwin Jose Jul 28 '19 at 15:27
  • ohk how to get rid of it? – Codeslide Creation Jul 28 '19 at 15:32
  • i Add some code in my pen can you improve it. https://codepen.io/codeslide/pen/xvRomW – Codeslide Creation Jul 28 '19 at 15:41
  • You can store it into a db level respective to the user and its need to be retrieve at application init/ page load. Then you need to make "headerstrip-canvas" to be hide. – Alwin Jose Jul 28 '19 at 15:44
  • Thats fine. But local storage is not persistent, sometimes user will be getting the strip again, if browser cache cleared. Please refer https://stackoverflow.com/questions/9948284/how-persistent-is-localstorage – Alwin Jose Jul 28 '19 at 15:55
  • please find code modification over your latest changes here https://codepen.io/anon/pen/PMWwqw – Alwin Jose Jul 28 '19 at 17:16
  • ohk its work fine but only in codepen & fadein not work.Is there any code missing in css.check here am using this strip in https://codeslide.in/ the strip appear again on page refresh. – Codeslide Creation Jul 28 '19 at 17:38
  • Its seems like working fine in this website https://codeslide.in/ . please cross check with different machine and different browser. – Alwin Jose Jul 28 '19 at 17:45
  • you can also use .show() instead of .fadeIn(). Both will show the thing , but fadeIn will give some animation. – Alwin Jose Jul 28 '19 at 17:48
  • Better you can clear you browser cache before testing. good luck – Alwin Jose Jul 28 '19 at 17:56
  • Thanks alwin Jose you helped me a lot. – Codeslide Creation Jul 28 '19 at 18:01
  • Hey when i use this code at wp header it show [the attribute name of viewbox must be in lowercase] in this line. – Codeslide Creation Jul 28 '19 at 18:18
  • Here is just a viewBox example can you do change in codepen.I didn't understand. – Codeslide Creation Jul 28 '19 at 18:35
  • **"the attribute name of viewbox must be in lowercase"** is error or warning? If its warning means just lgnore and go ahead. If its error means better you can use font-awesome icons or glyphicans instead of that svg – Alwin Jose Jul 29 '19 at 00:44
  • when i use fontawesome class the banner strip appear again mean javascript not work.https://codepen.io/codeslide/pen/xvRomW check it why is this happing to me. – Codeslide Creation Jul 29 '19 at 10:14
  • and can u tell me what is this ```integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">``` – Codeslide Creation Jul 29 '19 at 10:32
  • Integrity attribute is to allow the browser to check the file source to ensure that the code is never loaded if the source has been manipulated. You can refer from https://stackoverflow.com/questions/32039568/what-are-the-integrity-and-crossorigin-attributes – Alwin Jose Jul 29 '19 at 14:34
  • If font-awesome gives issues then you can go with glyphican which is in build with bootstrap, refer here https://getbootstrap.com/docs/3.3/components/ . Please find the latest code-pen with glyphican https://codepen.io/anon/pen/oKBmPz – Alwin Jose Jul 29 '19 at 14:50
  • the issue is with localstorage the banner strip appear again on page refresh – Codeslide Creation Jul 29 '19 at 16:49
  • its working fine in this plunker. please have a look into this https://next.plnkr.co/edit/Q5KsiSbYgM2c0yVi . Please check your code with this plunker. As i said before the local storage will be vanished if we clear cache,etc. This code will work fine unless your localstorage data is cleared. – Alwin Jose Jul 30 '19 at 07:49