Lorsqu'un utilisateur ferme un <div> , cache ça <div> sur toutes les pages du site

Question

J'ai développé un couple de boîtes d'alerte que l'affichage sur toutes les pages du site.

L'utilisateur est en mesure de la clôture de chaque zone séparément:

$(document).ready(function() {
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    $("#alert-box-maintenance").hide(800);
  });
});

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

jsFiddle

Maintenant, j'ai besoin pour s'assurer que la boîte de l'utilisateur ferme (qui pourrait être un, pourrait être les deux), ne pas ré-apparaissent comme il/elle navigue sur le site, ou recharge une page.

Je pense que je pourrais être un PHP cookie expirera dans les 24 heures. Mais la plupart des messages sur ce site recommander un JavaScript cookie. Malheureusement, mes efforts pour mettre en œuvre une solution d'activer JavaScript n'ai pas travaillé (les boîtes de ré-apparaissent après la fermeture). J'ai essayé diverses méthodes, comme indiqué ici:

• Placer le biscuit à cacher div lorsque le bouton est cliqué
• Set cookie lors de mon div est caché
• jQuery Cookie masquer/afficher la div
• Masquer div 24h cookie en javascript?

Ce serait une méthode simple pour masquer chaque zone, au niveau du site, pendant 24 heures?

Je suis ouvert à jQuery, plaine JavaScript, PHP, cookies, sessions, ou quelque chose d'autre.

Answer 1

Utiliser localStorage().

Local de stockage est par origine (par domaine et protocole)

• Sur cliquez de DIV proche, vous pouvez obtenir l'heure actuelle-timbre
• Ajouter un nombre d'heures (24) pour que l'horodatage
• Stocker cette valeur en localStorage comme localStorage.setItem('desiredTime', time)
• Vérifier le courant d'horodatage enregistré d'horodatage localStorage.getItem('desiredTime')sur la base de la show/hide

jQuery

$(document).ready(function(){
        //Get current time
        var currentTime = new Date().getTime();
        //Add hours function
        Date.prototype.addHours = function(h) {    
           this.setTime(this.getTime() + (h*60*60*1000)); 
           return this;   
        }
        //Get time after 24 hours
        var after24 = new Date().addHours(10).getTime();
        //Hide div click
        $('.hide24').click(function(){
            //Hide div
            $(this).hide();
            //Set desired time till you want to hide that div
            localStorage.setItem('desiredTime', after24); 
        });
        //If desired time >= currentTime, based on that HIDE / SHOW
        if(localStorage.getItem('desiredTime') >= currentTime)
        {
            $('.hide24').hide();
        }
        else
        {
            $('.hide24').show();
        }
});

HTML

<div>DIV-1</div>
<div class='hide24'>DIV-2</div>

Choses à noter

• Vous pouvez utiliser $.cookie , mais c'est une méthode plus ancienne maintenant.
• <div> classe hide24 sera caché seulement.
• Assurez-vous que vous mettez ce code JavaScript, qui charge sur chaque requête HTTP de votre site web.
• Pour localStorage, vous devriez avoir les navigateurs HTML5.

De Stockage Web HTML5

Espérons que cette aide.

Answer 2

La suite sur @Chargement.. réponse:

les boîtes d'alerte toujours ré-apparaissent brièvement sur la recharger avant de en voie de disparition. Des idées?

---

Pourquoi est-ce?

Les fonctions à l'intérieur d' $(document).ready() exécutera jusqu'à ce que le DOM est chargé. C'est pourquoi les alertes sont rendus, puis dès que la fonction s'exécute, il les cache.

---

Solution:

Vous pouvez masquer vos alertes avec une classe juste pour prendre avantage que le navigateur n'est pas de rendre le contenu jusqu'à ce que le CSSOM a été construit.

La classe que nous utilisons est juste la définition de la propriété display: none;.

.hidden {
  display: none;
}

Ce sera bien sûr de la cause de redessiner dans le navigateur. (voir les notes)

Votre logique est déjà à montrer le qui-vive avec

    if (localStorage.getItem('desiredTime') >= currentTime) {
      $('#alert-box-news').hide();
    } else {
      $('#alert-box-news').show();
    }

Parce que l'utilisation d' .show() va ajouter une ligne au style display: block; il aura une spécificité plus élevée que l' .hidden classe, montrant l'alerte.

---

jsFiddle

---

Notes:

• À l'aide de display: none; va pousser le contenu ci-dessous l'alerte ou vers le bas. Vous pouvez utiliser d'autres méthodes si vous le souhaitez, comme visibility: hidden; ou transform ce qui n'est pas dans le champ d'application de cette réponse.

  ---

EDIT:

Une illustration est présentée ci-après faisant les étapes suivantes:

• Démo compteur est augmenté à 20 secondes pour le test.
• Nous cliquez pour désactiver l'alerte et de déclenchement de l' localStorage de la fonction, le réglage de l' desiredTime - clés.
• Après que la clé a été de définir, de nous rafraîchir le navigateur et cliquez sur exécuter plusieurs fois pour voir si la clé fonctionne.

• Enfin, juste pour vérifier que la clé est en effet en cours de définition, nous allons à:

  DevTools (F12) -> Onglet Application -> Stockage Local -> jsFiddle shell.

• Run est de frapper une fois de plus, après le compte à rebours est terminé, montrant l'alerte de nouveau.

Illustration:

---

Nous pourrions avoir besoin de plus de détails pour résoudre le problème avec cette approche, si elle n'est pas un travail en direct.

Answer 3

Autant je comprends votre question, en cachant les alertes pour les 24 heures (puis par la suite leur montrer à tous , après un jour) sera une mauvaise expérience utilisateur.

Je suppose que vous êtes en train de charger ces alertes à partir d'un type de base de données. Si donc, la bonne réponse serait de stocker un statut. Que ce soit une status colonne ou un deleted_at timestamp, les implémentations sont infinies.

De toute façon, je voudrais stocker état d'alerte dans la base de données et filtrer vos données lorsque vous tirez en conséquence.

Donc à votre avis, vous auriez (en supposant que php ici):

<?php

<?php if(!empty($newlyFilteredAlerts)): ?>
    <article class="alert-box" id="alert-box-news">
        <h1>News Alerts</h1>
        <?php foreach(newlyFilteredAlerts as $alert): ?>
            <p><?= $alert ?></p>
        <?php endforeach;?
        <a class="alert-box-close" id="close-alert-box-news">
          <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""  >
        </a>
    </article>
<?php endif; ?>

Ensuite, vous en conséquence souhaitez ajouter une sorte de point de terminaison de modifier la base de données d'état:

$(document).ready(function() {
    $("#close-alert-box-news").click(function() {
        $.post({
            url: '/alerts',
            type: 'DELETE',
            success: function () {
                $("#alert-box-news").hide(800);                    
            },
        });
    });
});

NOTE: Cette réponse est destinée à vous diriger dans la bonne direction, ne pas écrire votre code

Answer 4

il ne fonctionnera pas dans stackoverflow. vous pouvez le tester en démo lien

Démo

$(document).ready(function() {
  checkCookie("alertDisplayed")
  $("#close-alert-box-news").click(function() {
    setCookie("alertDisplayed", 'yes', 1);
    $(".alert-box").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    setCookie("alertDisplayed", 'yes', 1);
    $(".alert-box").hide(800);
  });
});

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function checkCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      $(".alert-box").hide();
    }
  }
  return;
}

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

Answer 5

Essayez cette solution jsfiddle et lire les commentaires concernant le chemin de stockage. Si vous travaillez sur sub domain ensuite, vous devez spécifier le domaine de cookie écrit comme en setCookie() commentaires. si vous êtes en working on localhost alors le cookie de domaine doit être réglé sur "" ou NULL ou FALSE à la place de "localhost". Pour le domaine de référence, vous pouvez étudier cette question stackoverflow

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    // document.cookie = cname + "=" + cvalue + ";" + expires + ";domain=.example.com;path=/"; if you are trying in any sub-domain
} 
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}
$(document).ready(function() {
  if(getCookie('news')==1) { //check if cookie news exist if exist then hide.
    $("#alert-box-news").hide();
  }
  if(getCookie('maintenance')==1) { //check if cookie maintenance exist if exist then hide.
    $("#alert-box-maintenance").hide();
  }
  $("#close-alert-box-news").click(function() {
    setCookie('news',1,1); // set cookie news to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    setCookie('maintenance',1,1); // set cookie maintenance to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
    $("#alert-box-maintenance").hide(800);
  });
});