Javascript Cookie Yardım

15-07-2020, 12:14:06

Merhaba yapmak istediğim aşağıdaki metin gösteriliyor, herhangi bir yere tıklayınca kayboluyor f5 yapınca yeniden gösterilmesini istemiyorum.
Yani bir defa göstersin yeter
Bunun için cookie yapabilirmiyiz acaba, şimdiden teşekkür ederim.

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Vanilla JavaScript: Hide Element When Clicking Outside of It</title>
<style>
.box {
margin: 1rem auto 1rem auto;
max-width: 300px;
border: 1px solid #555;
border-radius: 4px;
padding: 1rem 1.5rem;
font-size: 1.5rem;
}

.js-is-hidden {
display: none;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="box">
If you click anywhere outside of me, Im gone faster than you can snap your fingers.
</div>


<!-- partial -->


</body>
</html>

var box = document.querySelector(".box");


document.addEventListener("click", function(event) {
// If user clicks inside the element, do nothing
if (event.target.closest(".box")) return;

// If user clicks outside the element, hide it!
box.classList.add("js-is-hidden");
});

15-07-2020, 12:27:13

#2

dnaz

Peki sekme kapandıktan sonra önceki değerler hatırlanacak mi yoksa her sekme kapanıp yeniden açılınca sifirlanacak mı?

İlk durum için localstorage ikinci durum için session kullanmalısınız.

15-07-2020, 12:28:13

#3

azizarslan

JavaScript'in en altına ekleyin;

var isBoxViewed = localStorage.getItem('isBoxViewed');
if (isBoxViewed) {
box.classList.add("js-is-hidden");
} else {
localStorage.setItem('isBoxViewed', true);
}

15-07-2020, 12:32:53

#4

Amxmodx

Kimlik doğrulama veya yönetimden onay bekliyor.

localStorage kullanarak yapabiliriz

const box = document.querySelector('.box');

document.addEventListener('click', function (event) {
  // If user clicks inside the element, do nothing
  if (event.target.closest('.box')) return;

  // If user clicks outside the element, hide it!
  box.classList.add('js-is-hidden');
  localStorage.setItem('boxHidden', true);
});

document.addEventListener(
  'DOMContentLoaded',
  () => {
    const isHidden = localStorage.getItem('boxHidden');
    if (isHidden) {
      box.classList.add('js-is-hidden');
    }
  },
  false
);

15-07-2020, 14:31:39

#5

ahsullda

azizarslan adlı üyeden alıntı: mesajı görüntüle

JavaScript'in en altına ekleyin;

var isBoxViewed = localStorage.getItem('isBoxViewed');
if (isBoxViewed) {
box.classList.add("js-is-hidden");
} else {
localStorage.setItem('isBoxViewed', true);
}

Çalıştı sağolasın

Amxmodx adlı üyeden alıntı: mesajı görüntüle

localStorage kullanarak yapabiliriz

const box = document.querySelector('.box');

document.addEventListener('click', function (event) {
  // If user clicks inside the element, do nothing
  if (event.target.closest('.box')) return;

  // If user clicks outside the element, hide it!
  box.classList.add('js-is-hidden');
  localStorage.setItem('boxHidden', true);
});

document.addEventListener(
  'DOMContentLoaded',
  () => {
    const isHidden = localStorage.getItem('boxHidden');
    if (isHidden) {
      box.classList.add('js-is-hidden');
    }
  },
  false
);

Bu kodda çalıştı ama dreamweaver 14. satırı hata olarak gösterdi, emeğinize sağlık.

ahsullda adlı üyeden alıntı: mesajı görüntüle

Çalıştı sağolasın

Bu kodda çalıştı ama dreamweaver 14. satırı hata olarak gösterdi, emeğinize sağlık.

Peki aynı ilmei bunu için nasıl yapabilirim. bu 5 saniye görünüyor ve kayboluyor, ve f5 yapınca yine görünüyor.

<div id="hideDiv">
This div will hide automatically after 5 seconds

</div>

#hideDiv{background:red; width:400px; margin:0 auto; color:#fff; padding:10px; text-align:center;}

$(function() {
setTimeout(function() { $("#hideDiv").fadeOut(1500); }, 5000)

})

15-07-2020, 15:54:44

#6

Amxmodx

ahsullda adlı üyeden alıntı: mesajı görüntüle

Çalıştı sağolasın

Bu kodda çalıştı ama dreamweaver 14. satırı hata olarak gösterdi, emeğinize sağlık.

Peki aynı ilmei bunu için nasıl yapabilirim. bu 5 saniye görünüyor ve kayboluyor, ve f5 yapınca yine görünüyor.

<div id="hideDiv">
This div will hide automatically after 5 seconds

</div>

#hideDiv{background:red; width:400px; margin:0 auto; color:#fff; padding:10px; text-align:center;}

$(function() {
setTimeout(function() { $("#hideDiv").fadeOut(1500); }, 5000)

})

Dreamweaver i çabucak silin bilgisayardan. Visual Studio Code ücretsiz

15-07-2020, 15:59:31

#7

ahsullda

Amxmodx adlı üyeden alıntı: mesajı görüntüle

localStorage kullanarak yapabiliriz

const box = document.querySelector('.box');

document.addEventListener('click', function (event) {
  // If user clicks inside the element, do nothing
  if (event.target.closest('.box')) return;

  // If user clicks outside the element, hide it!
  box.classList.add('js-is-hidden');
  localStorage.setItem('boxHidden', true);
});

document.addEventListener(
  'DOMContentLoaded',
  () => {
    const isHidden = localStorage.getItem('boxHidden');
    if (isHidden) {
      box.classList.add('js-is-hidden');
    }
  },
  false
);

Amxmodx adlı üyeden alıntı: mesajı görüntüle

Dreamweaver i çabucak silin bilgisayardan. Visual Studio Code ücretsiz

Peki buna yardım edermisin buda tek sefer gösterilsin f5 yapılınca görünmesin.
Bu arada visul studio code'ye bakacağım.