Announcement Problem

İssue:

I want the announcement part not to be shown again after it is closed once by the user.

in html

<center>
  <div class="m-bar m-red">
    <a class="m-microphone"><i class="material-icons" style="font-size:26px;">mic</i></a>
    <a class="m-content" style="color: white;">Something text</a>
    <a class="m-close" href="#"><i class="material-icons">close</i></a>
  </div> 
</center> <br><br>

announcement.css

        .m-red {background:#E54556; color:#fff; text-decoration:none;}

        .m-bar {width:85%; min-width:600px; max-width:1200px; height:55px; display:inline-block; margin-top:20px; text-align:left;}

        .m-bar a.m-close {display:inline-block; color:#fff; text-decoration:none; overflow:hidden; margin-right:10px;}

        .m-bar a.m-close i {margin-top:15px;}

        .m-bar a.m-microphone {float:left;  margin-top:15px; margin-left:10px; cursor:default;}

        .m-bar a.m-content {font-size:13.5px; font-family:"Noto Sans", sans-serif; margin-left:5px; line-height:54px; display:inline-block;}

announcement.js

$(document).ready(function(){
  $(".m-close").click(function(){
      $(".m-bar").hide(600);
  });
});

lat4732

3 years ago

Level 12

There are multiple ways of doing this. Examples: Save the information in the users table if the user closed the announcement, set a cookie so you can know if the user closed the announcement etc.... It's up to you.

1 like

takix

3 years ago

Level 1

how do this?

johnDoe220

3 years ago

Level 8

My recommendation is to use sessionStorages in JavaScript,for example when click on close button or just show message set one session

sessionStorage.setItem('key', 1)

and check

if(sessionStorage.getItem('key') == false){
	document.querySelector('center').style.display = 'block';
}

<center style="display:hidden">
  <div class="m-bar m-red">
    <a class="m-microphone"><i class="material-icons" style="font-size:26px;">mic</i></a>
    <a class="m-content" style="color: white;">Something text</a>
    <a class="m-close" href="#"><i class="material-icons">close</i></a>
  </div> 
</center> <br><br>

takix

3 years ago

Level 1

@johnDoe220 Where should I paste the first 2 codes?

takix

3 years ago

Level 1

@johnDoe220 hey are you here?

Please or to participate in this conversation.