CODEWITHSUNDEEP
javascriptjquerycsshtml
user10916795
user10916795

Reputation:

CSS kills HTML and JavaScript - Why?

I'm working on a Cookie Banner Project for my Website and I got everything I need (HTML, CSS, JavaScript,JQuery)and I guess I do have a problem within the Css because theeverything else works.

The Idea is: first time user visits Website -> Sees the CookieBanner which he has to Accept -> As soon as he clicks the accept button the Information will be saved with LocalStorage and the Banner disappears and he never sees it again (even if he goes to the next page of mine or reloads it)

Somewhere along the CSS line I have a problem. If anybody has Ideas or sees the Problem it would be great ;)

Here is my Code:

$(document).ready(function() {
  if (window.localStorage.getItem('accept_cookies')) {
    $('#CookieBanner').hide();
  }

  $("#Accept").click(function() {
    window.localStorage.setItem('accept_cookies', true);
    $('#CookieBanner').hide();
  });
});
#CookieBanner {
  background: rgba(0, 0, 0, .5) !important;
  bottom: 0!important;
  left: 0!important;
  position: fixed!important;
  right: 0!important;
  top: 0!important;
  transition: opacity .15s ease;
  z-index: 2147483647!important;
}

.agj,
#CookieBanner {
  opacity: 0;
  overflow-y: scroll;
  will-change: visibility, opacity
}

.agj {
  background-color: #ffffff;
  bottom: 0;
  box-sizing: border-box;
  color: #000000;
  font-family: Arial, Verdana, sans-serif;
  justify-content: space-between;
  left: 0;
  max-height: 100vh;
  min-height: 300px!important;
  overflow-x: hidden;
  position: fixed;
  right: 0;
  -webkit-font-smoothing: antialiased
}

.agj-content {
  display: flex;
  padding: 60px;
  overflow-y: scroll
}

.title {
  color: #000000;
  font-size: 34px;
  font-weight: 700;
  line-height: 41px;
  margin: 0 0 24px
}

.message {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  margin: 0;
  -webkit-font-smoothing: antialiased
}

.buttons {
  display: flex!important;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  padding-left: 60px
}

#Accept {
  background-color: #000000;
  border: 2px solid #000000;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer!important;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  height: 55px!important;
  letter-spacing: 2px;
  line-height: 34px;
  margin: 0 0 15px;
  padding: 0 13px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .2s ease-in-out;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased
}

#Accept:hover {
  background-color: #ffffff;
  color: #000000;
}

.buttons #Accept {
  min-width: 315px!important
}

.link {
  color: #000000;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  font-size: 14px;
  line-height: 21px;
  margin: 0 15px
}

.link:hover {
  opacity: .6
}

.link {
  margin: 0
}

.link+.link {
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid #ffffff
}

@media screen and (max-width:850px) {
  .agj-content {
    flex-wrap: wrap
  }
  .initial-info {
    width: 100%
  }
  .buttons {
    width: 100%;
    padding: 60px 0 0
  }
  .buttons #Accept {
    width: 100%
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="CookieBanner">
  <div class="agj">
    <div class="agj-content">
      <div class="initial-info">
        <h2 class="title">Privacy</h2>
        <p class="message">This website uses cookies to provide you with the best possible service and website functionality, and to provide social media features and analyse the traffic to our website. If you continue to use our website, you agree to our using cookies.</p>
      </div>
      <div class="buttons">
        <button id="Accept">Accept</button>
        <a class="link" href="#" title="Get more Information about Cookies and how we use them">Show Purposes</a>
      </div>
    </div>
  </div>
</div>

</head>

<body>
  <h1>Test WEbsite</h1>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <br><br><br><br><br><br><br><br>

  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
</body>

</html>

Upvotes: 1

Views: 159

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28573

Because you have your opacity set to 0 at the start of your css (and errors in your html, your tag starts after the banner in your code! Move it up!), your cookie won't display at the start. You need to show the banner at the start and then if the user accepts, hide it (but have the css set to visible to begin with so that it will display again).

In the snippet the cookie banner shows, but there is an error on click of accept. The error occurs here [in the snippet] because it cannot read the property of the window 'accept cookies'. "The document is sandboxed and lacks the 'allow-same-origin' flag." The initial 'script error' was occurring in the first part of your javascript. More about getting/setting cookies

Hope this helps

$(document).ready(function() {
 /* $('#CookieBanner').show();*/
  $("#Accept").click(function() {
    window.localStorage.setItem('accept_cookies', true);
    $('#CookieBanner').css({"opacity": "0", "visibility": "hidden"});
  });
});
#CookieBanner {
  background: rgba(0, 0, 0, .5) !important;
  bottom: 0!important;
  left: 0!important;
  position: fixed!important;
  right: 0!important;
  top: 0!important;
  transition: opacity .15s ease;
  z-index: 2147483647!important;
}

.agj,
#CookieBanner {
  opacity: .8;
  visibility:visible;
  overflow-y: scroll;
  will-change: visibility, opacity;
}

.agj {
  background-color: #ffffff;
  bottom: 0;
  box-sizing: border-box;
  color: #000000;
  font-family: Arial, Verdana, sans-serif;
  justify-content: space-between;
  left: 0;
  max-height: 100vh;
  min-height: 300px!important;
  overflow-x: hidden;
  position: fixed;
  right: 0;
  /*-webkit-font-smoothing: antialiased;*/
}

.agj-content {
  display: flex;
  padding: 60px;
  overflow-y: scroll
}

.title {
  color: #000000;
  font-size: 34px;
  font-weight: 700;
  line-height: 41px;
  margin: 0 0 24px
}

.message {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  margin: 0;
  /*-webkit-font-smoothing: antialiased*/
}

.buttons {
  display: flex!important;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  padding-left: 60px;
}

#Accept {
  background-color: #000000;
  border: 2px solid #000000;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer!important;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  height: 55px!important;
  letter-spacing: 2px;
  line-height: 34px;
  margin: 0 0 15px;
  padding: 0 13px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .2s ease-in-out;
  white-space: nowrap;
  /*-webkit-font-smoothing: antialiased*/
}

#Accept:hover {
  background-color: #ffffff;
  color: #000000;
}

.buttons #Accept {
  min-width: 315px!important;
}

.link {
  color: #000000;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  font-size: 14px;
  line-height: 21px;
  margin: 0 15px;
}

.link:hover {
  opacity: .6
}

.link {
  margin: 0;
}

.link+.link {
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid #ffffff
}

@media screen and (max-width:850px) {
  .agj-content {
    flex-wrap: wrap
  }
  .initial-info {
    width: 100%
  }
  .buttons {
    width: 100%;
    padding: 60px 0 0
  }
  .buttons #Accept {
    width: 100%
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <h1>Test Website</h1>
  
  <div id="CookieBanner">
  <div class="agj">
    <div class="agj-content">
      <div class="initial-info">
        <h2 class="title">Privacy</h2>
        <p class="message">This website uses cookies to provide you with the best possible service and website functionality, and to provide social media features and analyse the traffic to our website. If you continue to use our website, you agree to our using cookies.</p>
      </div>
      <div class="buttons">
        <button id="Accept">Accept</button>
        <a class="link" href="#" title="Get more Information about Cookies and how we use them">Show Purposes</a>
      </div>
    </div>
  </div>
</div>

  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <br>

  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
</body>

Upvotes: 0

Rab&#239; Ben Youssef
Rab&#239; Ben Youssef

Reputation: 157

The CookieBanner block should be in the body and not in the head section. Also, you should change the opacity to another value differentt than 0 in the block:

.agj,#CookieBanner{
    opacity: 0; // change this to 1 or remove it
    ...
}

This should do the trick.

Upvotes: 1

Related Questions