Check if cookie exists, and if not open modal - javascript

I have a cookie set when client closes the modal, what I need is, the modal should only open when cookie is not set. My cookie is set for secure connection only, do you think that javascript can't access the cookie because of SSL? Thank you in advance.
function getCookie(c_name) {
var c_value = document.cookie,
c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start, c_end));
}
return c_value;
}
$(document).ready(function() {
var acookie = getCookie("mycookie");
if (!acookie) {
var count=-1; // initially -1 as we are having a delay of 1000ms
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
function timer()
{
count=count+1;
if (count >=6) //+1 than the req time as we have a delay of 1000ms
{
clearInterval(counter);
var modal2 = document.getElementById('booking-modal-2');
if (modal2.style.display !== 'block') {
$("#booking-modal").fadeIn("slow");
$("#booking-modal").css("display", "block");
}
return;
}
// document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}
}
});

Related

Disable checkbox and keep it disabled using cookies

This will keep the checkbox checked:
function setCookie(c_name, value, expiredays) {
var exdate = new Date()
exdate.setDate(exdate.getDate() + expiredays)
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate)
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=")
if (c_start != -1) {
c_start = c_start + c_name.length + 1
c_end = document.cookie.indexOf(";", c_start)
if (c_end == -1) c_end = document.cookie.length
return unescape(document.cookie.substring(c_start, c_end))
}
}
return null
}
onload = function() {
document.getElementById('myCheck').checked = getCookie('myCheck') == 1 ? true : false;
}
function set_check() {
setCookie('myCheck', document.getElementById('myCheck').checked ? 1 : 0, 100);
}
<input type="checkbox" value="1" id="myCheck" onclick="set_check();">
I would also like to disable the checkbox after it's checked and keep it disabled using the cookies. How would I add that function to the existing code? Thanks!
onload = function() {
document.getElementById('myCheck').addEventListener('change', function(e) {
e.target.disabled = (getCookie('myCheck') == 1);
}
document.getElementById('myCheck').checked = (getCookie('myCheck') == 1);
}

Show hide javascript cookie

function showhide() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = 'table-row'; // set to table-row instead of an empty string
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
I have this working javascript function to hide a row in a table - like this
<tr id="hidethis" style="display:table-row;">
It works fine but i want to use cookies to remember which option user chose. I cant figure out how to properly set cookies, some advice would be much appreciated.
Try this:
You need to store the value in cookies and read those values on DOMContentLoaded event ad set your style accordingly
Reference used to create and read cookies values
var createCookie = function(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
};
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
document.addEventListener('DOMContentLoaded', function() {
var cookieVal = getCookie('display');
if (cookieVal) {
document.getElementById("hidethis").style.display = cookieVal;
}
});
function showhide() {
if (document.getElementById("hidethis").style.display == 'none') {
document.getElementById("hidethis").style.display = 'table-row'; // set to table-row instead of an empty string
createCookie('display', 'table-row', 365);
} else {
document.getElementById("hidethis").style.display = 'none';
createCookie('display', 'none', 365);
}
}
<table>
<tr id="hidethis" style="display:table-row;">
</table>

How can I get a webpage to display once and never show to the user again?

Im currently using a javascript code to check for a cookie and its working. But I want the user to be directed to another page once they have entered in their user ID (cookie). Is there another function that I can add so that the user can be directed to another page once I have the cookie? The code is set up where they wont see this window for a year.
I'm not sure what to add. Please help.
<script>
function getCookie(c_name) {
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) {
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start, c_end));
}
return c_value;
}
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function checkCookie() {
var username = getCookie("username");
if (username != null && username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != null && username != "") {
setCookie("username", username, 365);
}
}
}
</script>
if(localStorage.beenHere){
//Been here before
}else{
localStorage.beenHere = 1;
}

Popup window Reveal plugin wont popup on pageload

Hello I am using Reveal popup plugin combined with cookies to show popup only once a day.
This is my code
<head>
..
<script type="text/javascript">
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name) {
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) {
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1) {
c_value = null;
}
else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start, c_end));
}
return c_value;
}
function showModal() {
// Check if cookie existes
var expireDate = getCookie("showpopup");
var today = new Date().toUTCString();
if (expireDate != null && expireDate > today) {
//Do nothing!
}
else {
//ShowPopup here!
$('a.reveal-link').trigger('click');
//Create cookie
setCookie("showpopup", "anything", 1);
}
}
</script>
</head>
<body onLoad="showModal()">
Click Me For A Modal
<div id="myModal" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
...other code
</body>
So basicaly on page load, the cookie is created but no popup shows. When I manualy click on link "Click Me For A Modal", window is shown so there is no problem with window. When I tried javascript alert message that worked.
The important part of code is:
//ShowPopup here!
$('a.reveal-link').trigger('click');
I have tried diffrent variations for start the script like $('#myModal').foundation('reveal', 'open'); or $('#myModal').reveal(); but nothing worked.
Can you help me ?
Thanks
I´ve found it. The problem just occur on my page due more jquery libraries in conflict.

How to write a cookie to remember a username in JavaScript

I am working on a login page for a project and I am wondering how I would go about setting a cookie just to remember the username ?
Here is the sample code. for html Cookies.
<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your username:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>

Categories

Resources