Popup window Reveal plugin wont popup on pageload - javascript

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.

Related

Javascript cookie doesn't work on all page

Live site- http://chitrchatr.com
I successfully add setCookie function on exit button & another link. So, if anyone close popup or click on that link then cookie will be stored & popup never appears for him/her.
It works perfectly, i close/go to link it, it store cookie but when i try to go another page/link of website it appears again(cookie is already stored but it appers). Any idea how to fix it so it will never appears if anyone go to another page after storing cookie.
My HTML-
<div id="popupBox">
<div id='popupContent' class='visiblebox' style='width:500px;height:446px;z-index:999999;left: 31%; top: 15%;'>
<a onClick="document.getElementById('popupBox').style.display='none'; setCookie('abc', 'def', 1)" href='#' id='closebox' title='Close this box'>X</a>
....
PopUp content here
....
<a onClick="document.getElementById('popupBox').style.display='none'; setCookie('abc', 'def', 1)" href="http://chitrchatr.com/signup-and-win-new-smartphones-and-get-our-service-for-free/" target="_blank"><img class="alignnone size-full wp-image-1548" alt="Promotion_06" src="http://chitrchatr.com/wp-content/uploads/2014/01/Promotion_06.png" width="243" height="61" /></a>
</div>
</div>
Javascript-
<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;
}
if(getCookie('abc')=="def" && document.getElementById('popupBox'))
document.getElementById('popupBox').style.display='none';
</script>
add path to your cookie
function setCookie(name, value, days, secure) {
var expires = '';
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = '; expires='+date.toGMTString();
}
var domain = locDomain;
document.cookie = name + '='+escape(value) + expires + '; path=/' + (domain ? '; domain=.' + domain : '') + ((secure && locProtocol == 'https:') ? '; secure' : '');
}
Try setting the location of cookie as '/'

How to set variable once for different pages in one window

I want set boolean flag for current window. I will use this flag on all pages in this window. LocalStorage bad idea, becouse it set flag permanently for all windows. How can I do it?
Like jQuery, jQuery attached to window and work as a global variable that can access from any window
you can do something like...
window.my_flag = false
You could use the window’s name window.name to store the information. This method is often used to modify the name of a window, after the window has been created. It only works as long as the same window/tab is used.
For more info: https://developer.mozilla.org/en-US/docs/Web/API/Window.name
Use PHP or JSP session and then retrieve your value in any page using AJAX.
You should have an ajax request to initialize your value first. Then you should set/update/read your boolean value accordingly using AJAX.
Let me know if you need details.
Use cookies:
set the cookie :
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;
}
Get the cookie:
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;
}
Reference

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;
}

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>

jQuery cookie value is %5Bobject%20Object%5D

I have a simple html page and a js script:
HTML page:
<body>
<input type="text" id = "content">
<button type="button" id="btn"> Save </button>
</body>
Javascript:
$(document).ready( function(){
var cook = $.cookie('theName', { path: '/'});
if ( cook )
alert(cook);
$('#btn').click(function(){
var theName = $('#content').val();
alert(v.val());
$.cookie('theName', theName, { path: '/', expires: 7 });
alert("Cookie done");
});
});
Libraries:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script type="text/javascript" src = "https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"> </script>
It should save my name and when I hit refresh to show my name. The only problem is when I try to read the cookie, instead of name shows %5Bobject%20Object%5D.
Thank you.
do:
$(document).ready( function(){
var cook = $.cookie('theName'); //get from cookie if exists
if ( cook )
alert(cook);
$('#but').click(function(){
var theName = $('#content').val();
alert(theName);
$.cookie('theName', theName, { expires: 7, path: '/' }); //set the cookie
alert("Cookie done");
});
});
Updated:
try adding:
$.cookie.raw = true;
var cook = $.cookie('theName', { path: '/'});
This overwrites the cookie with the string representation of { path: '/'}.
To actually retrieve the existing cookie just pass the name:
var cook = $.cookie('theName');
There is no point in passing the path anyway - if you are outside the path for which the cookie is set you simply don't get it at all.
Try This.
<!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>
</html>
Hope this helps.
Source:Here

Categories

Resources