Popup div bij schermbreedte <960 px (javasript vraag)

Status
Niet open voor verdere reacties.

erpee

Gebruiker
Lid geworden
21 jan 2009
Berichten
102
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.

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>
 
Is het niet verstandiger om de popup eerst met CSS onzichtbaar te maken.
 
Dat doet niet zoveel.
(heb nog een fout uit de code gehaald ...:d)
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");
  x.style.display = "none";
  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>
 
Als je met de "resize" event gaat werken dan moet je met timers werken om knipperen van het scherm te voorkomen. Je kan dit simpel oplossen met
Code:
#SmallScreenWarn {
    display: block; /* shoow always ... */
}
@media (min-width: 960px) {
    #SmallScreenWarn {
        display: none; /* ... but hide if >= 960 */
    }
}

In de Javascript hoef je dan alleen maar de cookie test te doen.
 
Laatst bewerkt:
EDIT: code vervangen door nieuwe code

Code:
<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:active, a:focus {
    text-decoration: none;
    color:#3d0f0f;
    float: right;
    padding-right: 20px;
}
#SmallScreenWarn {
    display: block; /* shoow always ... */
}
@media (min-width: 960px) {
    #SmallScreenWarn {
        display: none; /* ... but hide if >= 960 */
    }
}
</style>

<script>

// setCookie
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=/";
}

// getCookie
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.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 "";
}

// testCookie
function testCookie(elem) {
    if (getCookie("SWcheck") !== "") {
        elem.style.display = "none";
    } else {
        elem.style.display = "block";
    }
}

// click event listener
function setClickListener (elem) {
    elem.addEventListener("click", function(event) {
        event.preventDefault();
        setCookie('SWcheck', 'wat_voor_waarde', 365);
    });
}
</script>
</head>
<body>

<div id="SmallScreenWarn">
    This is the popup element.<br />
    <a href="#" title="close" style="font-size:48px;">x</a>
</div>

<script>
var elmPopup = document.querySelector("#SmallScreenWarn");
testCookie(elmPopup)
var elmPopupBtn = document.querySelector("#SmallScreenWarn a");
setClickListener (elmPopupBtn);
</script>

In het algemeen kan je beter alle scripts vlak boven </body> zetten voor een betere performance.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan