Ik ben bezig met een popup. Deze moet het volgende doen:
1) check of schermbreedte < 960 px
2) Als dit zo is dan:
* controleren of er een cookie is, zo ja dan niets doen.
* Zo nee, dan div tonen.
* Als de div gesloten wordt via de X, dan een cookie plaatsen.
De controle werkt goed maar nadat ik de functies voor de cookies erbij heb gezet wordt de div altijd getoond. Van cookies weet ik onvoldoende om te zien waar de fout zit. Graag jullie hulp.
1) check of schermbreedte < 960 px
2) Als dit zo is dan:
* controleren of er een cookie is, zo ja dan niets doen.
* Zo nee, dan div tonen.
* Als de div gesloten wordt via de X, dan een cookie plaatsen.
De controle werkt goed maar nadat ik de functies voor de cookies erbij heb gezet wordt de div altijd getoond. Van cookies weet ik onvoldoende om te zien waar de fout zit. Graag jullie hulp.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<style>
#SmallScreenWarn {width: 100%;position: absolute;left: 0;top: 0;padding: 30px 0;background-color: #de5656;font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;text-align: center;color:#3d0f0f}
a:hover, a:visited, a:link, a:active {text-decoration: none;color:#3d0f0f;float: right;padding-right:20px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// cookies
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
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 "";
}
// start check for size
window.addEventListener('resize', FunctionSWShow);
// Do actions based upon size
function FunctionSWShow() {
var x = document.getElementById("SmallScreenWarn");
if ($(window).width() < 960) {
var hasbeenset = getCookie("SWcheck");
if (hasbeenset != "") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function FunctionSWHide() {
var x = document.getElementById("SmallScreenWarn");
x.style.display = "none";
}
</script>
</head>
<body>
<div id="SmallScreenWarn">
This is the popup element.<br />
<a href="javascript:setCookie("SWcheck", hasbeenset, 1);">x<a/>
</div>
<script>FunctionSWShow();</script>
En andere tekst.
</body></html>