I have developed this code which is working well.
The problem is that it loads on every page even when I close it. Is there a way, maybe cookie based, to stay closed for a certain amount of time?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function() {
$("#ModalMessage").dialog({modal: true, autoOpen : true});
});
</script>
Add this method to your HTML file.
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 "";
}
Then, you can use something like this on Close dialog:
createCookie("closed", "1", 30);
On load your page:
$(document).ready(function() {
if(getCookie("closed") != ""){
//show my dialog box;
$("#ModalMessage").dialog({modal: true, autoOpen : true});
}
});
More about functions createCookie and getCookie here.
Related
Is it possible? I want to save the state of the radio.. like : enabled or disabled.
if(dis == "dis1"){document.getElementById(dis).disabled=true;}
This does not last till the code it completed.
Once it is disabled, I want it to be disabled till the code is completed!
Here is a really nice implementation
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 "";
}
So in your case
createCookie("radio", "checked/notchecked", 30);
and then to read it
getCookie("radio") === 'checked' or !== 'checked'
Source: How do I create and read a value from cookie? There are also some other solutions mentioned there, make sure you check them.
Hi guys I've been trying to have this code work for a while now, I checked if my cookies were enabled on http://www.whatismybrowser.com/are-cookies-enabled, and they are working.
Any ideas as to why this code isn't working for me?
<html>
<body>
<button id="delCookie">DELETE COOKIE</button>
<script type="text/javascript">
$(document).ready(function () {
$("#delCookie").click(function(){
del_cookie("cookie");
});
console.log(document.cookie);
var visit = getCookie("cookie");
if (visit == null) {
alert("First popup");
var expire = new Date();
expire = new Date(expire.getTime() + 7776000000);
document.cookie = "cookie=here; expires=" + expire;
}
});
function del_cookie(name)
{
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
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;
}
</script>
</body>
</html>
You didn't include jQuery - insert it in your head tag!
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
And that's all there is to it, through common sense and (I admit) using a console.
I was trying to make a simple program that displays a welcome message if a cookie is set and if the cookie is not set it will display a prompt box, asking for the user name.
It doesn't work and I don't understand why. Can anyone tell me where is the problem in the code?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(c_name,value,expiredays){
var exdate = new Date();
exdate.setDate(exdate.getDate()+expiredays);
if(expiredays==null)
document.cookie = c_name + "=" + escape(value) +"";
else
document.cookie = c_name + "=" + escape(value) + ";expires="
+exdate.toGMTString());
}
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;
//index of the value's end
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1)//if it's the last cookie
c_end = document.cookie.length;
return unescape (document.cookie.substring(c_start,c_end));
}
}
return "";
}
function checkCookie(){
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>
</head>
<body onload="checkCookie()">
</body>
</html>
http://jsbin.com/AcanusA/12/edit
There're two errors in your code. One unclosed ")" (in setCookie() function just after last toGMTString();) and one unclosed "}" (in getCookie() function, just after if(c_start!=-1){).
Just take a look in your javascript console to check this errors. Here's the correction:
<html>
<head>
<script>
function setCookie(c_name,value,expiredays){
var exdate = new Date();
exdate.setDate(exdate.getDate()+expiredays);
if(expiredays==null)
document.cookie = c_name + "=" + escape(value) +"";
else
document.cookie = c_name + "=" + escape(value) + ";expires="
+exdate.toGMTString();
}
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;
//index of the value's end
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1)//if it's the last cookie
c_end = document.cookie.length;
return unescape (document.cookie.substring(c_start,c_end));
}
}
return "";
}
function checkCookie(){
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>
</head>
<body onload="checkCookie()">
za
</body>
</html>
Here's an optimized version of your code:
function getCookie(name) {
var setPos = document.cookie.indexOf(name + '='), stopPos = document.cookie.indexOf(';', setPos);
return !~setPos ? null : document.cookie.substring(
setPos, ~stopPos ? stopPos : undefined).split('=')[1];
}
function setCookie(name, val, days, path) {
var cookie = name + "=" + escape(val) + "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
cookie += ";expires=" + date.toGMTString();
}
cookie += ";" + (path || "path=/");
console.log(cookie);
document.cookie = cookie;
}
var username = getCookie("username");
if (!username) {
setCookie("username", prompt("please enter your name:"), 365);
} else {
alert("welcome again " + username);
}
See test case on jsFiddle.
on my page I need to set up a pop up window with special offer but I dont want to harass my customer everytime they go on homepage so I want to use cookies for chcecking and show popup up for specific period. For example once a week woud be great. I am a newbie in javascript, I just downloaded and use Reveal pop up plugin but I dodnt know how to set up it.
here is my code:
<head>
<link rel="stylesheet" href="reveal.css">
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.reveal.js" type="text/javascript"></script>
</head>
This is pop up window
<body>
....
<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>
</body>
And now I can run it just by clicking on link that looks like thaht
Click Me For A Modal
But I want to load it on pageload with cookies.
You can view sample on page page by clicking on orange label Click Me For A Modal below the header.
http://mmiuris.sk
Thanks for any ideas.
Edit:
The script is working finr but I cant make reveal plugin box to appear (it doesnt even make cookie file)
The code looks like this, see any error ?
<head>
<link rel="stylesheet" href="reveal.css">
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.reveal.js" type="text/javascript"></script>
<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();
alert(today);
if (expireDate != null && expireDate > today) {
//Do nothing!
}
else {
//ShowPopup here!
$(document).ready(function() {
$('#myModal').reveal();
});
//Create cookie
setCookie("showpopup", "anything", 1);
}
}
</script>
</head>
<body onLoad="showModal()">
<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>
...
</body>
Add this code on you homepage. Modify it to show the popup instead of the alert in the show modal. This example sets the cookie to expire everyday. Change it to 7 days or whatever value you want...
<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();
alert(today);
if (expireDate != null && expireDate > today) {
//Do nothing!
}
else {
//ShowPopup here!
alert('This is the popup!');
//Create cookie
setCookie("showpopup", "anything", 1);
}
}
</script>
can anyone tell me about automatic cookies in JavaScript while clicking a button or URL of a webpage?
It sets for me and I can't delete that also...
var expDate = new Date();
expDate.setYear( parseInt(expDate.getYear())+10);
document.cookie="";
var x = "$user=$val; expires="+expDate.toUTCString();
Here i have two buttons called 'view' and 'save'. If i click the 'save' button this cookie should be set... but when i click the 'view' button a cookie is set. i cant delete tht cookie too
I find the method explained in this article at quirksmode.org to be working just fine. — Mabye give that a try?
Best code to understand cookie in javascript
Just save my code as html file and open into browser you willeasily understand cookie concept
<!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 name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>