CodingForums.com - Help? Show JavaScript Once Per Day Only?

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Help? Show JavaScript Once Per Day Only? (http://www.codingforums.com/showthread.php?t=204571)

Help? Show JavaScript Once Per Day Only?

Help. How do I show the below JavaScript code to each unique visitor only once per day or any amount of days I want to set?

PHP Code:


		
			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>

    <title>Untitled</title>

</head>



<body>



<!-- this goes anywhere in the root of the -->

<div id="slideIn" style="position:absolute; width: 720px; height: 320px; left: 0; top: -600px; z-index: 100; border: 1px solid gray; padding: 20px; font-family: 14px Verdana, sans-serif, Tahoma, Arial; font-color: black;"

    <div style="text-align:right"><input type="button" value="CLOSE" onclick="f_slideOut()" style="background: black; color: white; border: 2px solid #dcdcdc;"></div>

This is where the content goes blah blah

Blah Blah

Blah Blah



Please help :(

</div>

<div id="slideInShade" style="position:absolute;z-index:99;visibility:hidden;"></div>

<script>

var s_userAgent = navigator.userAgent.toLowerCase(),

    s_location = String(window.location).toLowerCase(); // copyright protection



var b_mac = s_userAgent.indexOf('mac') != -1,

    b_ie5    = s_userAgent.indexOf('msie 5') != -1,

    b_ie6    = s_userAgent.indexOf('msie 6') != -1 && s_userAgent.indexOf('opera') == -1,

    b_ieMac  = b_mac && b_ie5,

    b_safari = b_mac && s_userAgent.indexOf('safari') != -1,

    b_opera6 = s_userAgent.indexOf('opera 6') != -1;



var e_slideIn = document.getElementById('slideIn');

var e_slideInShade = document.getElementById('slideInShade');



function f_slideIn() {

    if (!window.e_slideIn) return;

    var n_width  = e_slideIn.offsetWidth;

    var n_height = e_slideIn.offsetHeight;

    var n_left   = (f_clientWidth() - n_width) / 2;

    var n_top    = parseInt(e_slideIn.style.top);

    var n_moveTo = (f_clientHeight() - n_height) / 2;



    e_slideIn.style.left = n_left + 'px';

    e_slideIn.style.visibility = 'visible';

    f_customShade(n_width, n_height, n_left, n_top);

    e_slideInShade.style.visibility = 'visible';



    n_slideMove (n_top, n_moveTo);

}



function n_slideMove (n_top, n_moveTo) {

    n_inc = Math.round((n_moveTo - n_top) / 20);

    if (!n_inc) return;

    n_top += n_inc;

    f_customShade(null, null, null, n_top);

    e_slideIn.style.top  = n_top + 'px';

    setTimeout('n_slideMove(' + n_top + ',' + n_moveTo + ')', 10);

}



function f_slideOut() {

    if (!window.e_slideIn) return;

    e_slideIn.style.visibility = 'hidden';

    e_slideInShade.style.visibility = 'hidden';

}



function f_clientWidth() {

    if (typeof(window.innerWidth) == 'number')

        return window.innerWidth;

    if (document.documentElement && document.documentElement.clientWidth)

        return document.documentElement.clientWidth;

    if (document.body && document.body.clientWidth)

        return document.body.clientWidth;

    return null;

}

function f_clientHeight() {

    if (typeof(window.innerHeight) == 'number')

        return window.innerHeight;

    if (document.documentElement && document.documentElement.clientHeight)

        return document.documentElement.clientHeight;

    if (document.body && document.body.clientHeight)

        return document.body.clientHeight;

    return null;

}

function f_customShade (n_width, n_height, n_left, n_top) {

    if (!e_slideInShade) return;

    if (n_width != null) e_slideInShade.style.width = (n_width + 8) + 'px';

    if (n_left != null) e_slideInShade.style.left = (n_left - 1) + 'px';

    e_slideInShade.style.top = (n_top - 1) + 'px';

    if (!e_slideInShade.innerHTML) {

        if (b_ie5 || b_ie6)

            e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" colspan="2" width="6"><img src="images/pixel.gif"></td><td width="7" height="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_tr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td height="' + (n_height - 7) + '" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_mr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td width="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bl.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bm.png\', sizingMethod=\'scale\');" height="7" align="left"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_br.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr></table>';

        else

            e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" width="6"><img src="images/pixel.gif"></td><td rowspan="2"><img src="images/pixel.gif"></td><td width="7" height="7"><img src="images/shade_tr.png"></td></tr><tr><td background="images/shade_mr.png" height="' + (n_height - 7) + '"><img src="images/pixel.gif"></td></tr><tr><td><img src="images/shade_bl.png"></td><td background="images/shade_bm.png" height="7" align="left"><img src="images/pixel.gif"></td><td><img src="images/shade_br.png"></td></tr></table>';

    }

}

f_slideIn();

</script>



</body>

</html>

You need to set a cookie. Many examples have been posted in this forum - here is one of them. You set the expiry date to the desired number of days ahead (here 365 days - change yours to 1 or whatever).

Code:

<html>

<head>

<title>Welcome Message Displays Once Only</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<script type="text/javascript">

function createCookie(name,value,days) {

if (days) {

var date = new Date();

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = "; expires="+date.toGMTString();

}

else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}



function readCookie(name) {

var nameEQ = name + "=";

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,c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

}

return null;

}



function eraseCookie(name) {

createCookie(name,"",-1);

}



</script>



</head>

<body>

<script type="text/javascript">

if(!readCookie('visitedPreviously')){

document.write(' Your Message Goes Here And You See It Only Once ');

createCookie('visitedPreviously', 'visitedPreviously', 365);  // 365 days persistence

}



//eraseCookie('visitedPreviously');  // FOR TEST PURPOSES



</script>

</body>

</html>

Note that "a day" means 24 hours, not exactly the same thing as the next day starting at midnight.

Quizmaster: What is the only prime number between 75 and 80?
Contestant: 99

Please help. :o

I don't know how to set a cookie with my particular code. Can someone help me & provide it in my code and paste it here? I have no idea what to do.

:(

What is wrong with the code I gave you in Post #2? And why are you shouting?
Presumably you would not attempt to service or repair a machine or appliance without any experience or understanding of how it worked.

Quote:

Originally Posted by Philip M (Post 993165)

Please help. I need the code put in my code somehow. I don't know how to put JavaScript into a JavaScript; my code is a slide-in ad & I don't know how to make it only show once to a visitor per session. I'd also like to know how to do it per day.

I've tried codes like yours I can't figure it out & need help getting it working with my code specifically.. :(

Is the <div> you want to show/hide

<div id="slideInShade" style="position:absolute;z-index:99;visibility:hidden;"></div>

(that is the rectangle with a "close" button)?

Make up your mind. Do you want it to display once per browser session or once per day?

It is not difficult to do what you want.

a) delete this line f_slideIn(); which you will find right in front of </script>

b) place the two scripts which I gave you in Post#2 in the <head> and <body> respectively of your page. Right after the <head> and the <body> tags.

c) change the script in the body as follows:-

Code:

<body>



<script type="text/javascript">

if (!readCookie('visitedPreviously')) {

//document.write(' Your Message Goes Here And You See It Only Once ');  // comment this line out but you may care to retain it for test purposes

createCookie('visitedPreviously', 'visitedPreviously', 1);  // 1 days persistence

f_slideIn();  // call the function 

}

Help; this doesn't work. The code above doesn't work with my code. Here is what I did to combine my code with the above code & it does NOT work :(

PHP Code:


		
			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

<script type="text/javascript">
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
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,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

</script>

</head>

<body>



<script type="text/javascript">
if(!readCookie('visitedPreviously')){
document.write('
<div id="slideIn" style="position:absolute; width: 720px; height: 320px; left: 0; top: -600px; z-index: 100; border: 1px solid gray; padding: 20px; font-family: 14px Verdana, sans-serif, Tahoma, Arial; font-color: black;"
    <div style="text-align:right"><input type="button" value="CLOSE" onclick="f_slideOut()" style="background: black; color: white; border: 2px solid #dcdcdc;"></div>
<span style="font-family: Verdana, sans-serif, Tahoma, Arial; font-size: 13px; text-align: center;">
<b>Buying/Selling/Trading MMORPG Accounts?</b>
<br /><br />
<b>YOU HAVE A <u>70% PROBABILITY OF BEING SCAMMED</u> OUT OF YOUR MMORPG ACCOUNT AND/OR MONEY.</b> Whether you're a MMORPG account buyer, seller, and/or trader, the odds are against you; MMORPG-related transactions statistically hold a 70% fraud probability. Since 2006, EGS has served many thousands of MMORPG gamers overcome fraud. <b>Our <a href="http://www.egamingsupply.com/middleman-service-order-page" title="Middleman Service" style="color: #336699; text-decoration: underline;">Middleman Service</a> provides 99.9% safer transactions.</b> <i>SPECIAL: Save 20%! Use coupon code "<u>Monarch20Bday</u>" at check-out.</i>
    <a href="http://www.egs.us/buy/middleman-service" title="EGS Middleman Service"><img src="images/egsldr3.gif" style="border: none;" alt="EGS Middleman Service" /></a>
</div>
<div id="slideInShade" style="position:absolute;z-index:99;visibility:hidden;"></div>
');
createCookie('visitedPreviously', 'visitedPreviously', 1);  // 365 days persistence
}

eraseCookie('visitedPreviously');  // FOR TEST PURPOSES

</script>

<script>
var s_userAgent = navigator.userAgent.toLowerCase(),
    s_location = String(window.location).toLowerCase(); // copyright protection

var b_mac = s_userAgent.indexOf('mac') != -1,
    b_ie5    = s_userAgent.indexOf('msie 5') != -1,
    b_ie6    = s_userAgent.indexOf('msie 6') != -1 && s_userAgent.indexOf('opera') == -1,
    b_ieMac  = b_mac && b_ie5,
    b_safari = b_mac && s_userAgent.indexOf('safari') != -1,
    b_opera6 = s_userAgent.indexOf('opera 6') != -1;

var e_slideIn = document.getElementById('slideIn');
var e_slideInShade = document.getElementById('slideInShade');

function f_slideIn() {
    if (!window.e_slideIn) return;
    var n_width  = e_slideIn.offsetWidth;
    var n_height = e_slideIn.offsetHeight;
    var n_left   = (f_clientWidth() - n_width) / 2;
    var n_top    = parseInt(e_slideIn.style.top);
    var n_moveTo = (f_clientHeight() - n_height) / 2;

    e_slideIn.style.left = n_left + 'px';
    e_slideIn.style.visibility = 'visible';
    f_customShade(n_width, n_height, n_left, n_top);
    e_slideInShade.style.visibility = 'visible';

    n_slideMove (n_top, n_moveTo);
}

function n_slideMove (n_top, n_moveTo) {
    n_inc = Math.round((n_moveTo - n_top) / 20);
    if (!n_inc) return;
    n_top += n_inc;
    f_customShade(null, null, null, n_top);
    e_slideIn.style.top  = n_top + 'px';
    setTimeout('n_slideMove(' + n_top + ',' + n_moveTo + ')', 10);
}

function f_slideOut() {
    if (!window.e_slideIn) return;
    e_slideIn.style.visibility = 'hidden';
    e_slideInShade.style.visibility = 'hidden';
}

function f_clientWidth() {
    if (typeof(window.innerWidth) == 'number')
        return window.innerWidth;
    if (document.documentElement && document.documentElement.clientWidth)
        return document.documentElement.clientWidth;
    if (document.body && document.body.clientWidth)
        return document.body.clientWidth;
    return null;
}
function f_clientHeight() {
    if (typeof(window.innerHeight) == 'number')
        return window.innerHeight;
    if (document.documentElement && document.documentElement.clientHeight)
        return document.documentElement.clientHeight;
    if (document.body && document.body.clientHeight)
        return document.body.clientHeight;
    return null;
}
function f_customShade (n_width, n_height, n_left, n_top) {
    if (!e_slideInShade) return;
    if (n_width != null) e_slideInShade.style.width = (n_width + 8) + 'px';
    if (n_left != null) e_slideInShade.style.left = (n_left - 1) + 'px';
    e_slideInShade.style.top = (n_top - 1) + 'px';
    if (!e_slideInShade.innerHTML) {
        if (b_ie5 || b_ie6)
            e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" colspan="2" width="6"><img src="images/pixel.gif"></td><td width="7" height="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_tr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td height="' + (n_height - 7) + '" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_mr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td width="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bl.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bm.png\', sizingMethod=\'scale\');" height="7" align="left"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_br.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr></table>';
        else
            e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" width="6"><img src="images/pixel.gif"></td><td rowspan="2"><img src="images/pixel.gif"></td><td width="7" height="7"><img src="images/shade_tr.png"></td></tr><tr><td background="images/shade_mr.png" height="' + (n_height - 7) + '"><img src="images/pixel.gif"></td></tr><tr><td><img src="images/shade_bl.png"></td><td background="images/shade_bm.png" height="7" align="left"><img src="images/pixel.gif"></td><td><img src="images/shade_br.png"></td></tr></table>';
    }
}
f_slideIn();
</script>

</body>
</html>

Can someone please help? Can someone please paste a code that works with my code or better yet combine a working code for me?

I'd like to to show this to each user on each browser session and/or every day. Please help.

Quote:

Originally Posted by Philip M (Post 993424)

Code:

<body>



<script type="text/javascript">

if (!readCookie('visitedPreviously')) {

//document.write(' Your Message Goes Here And You See It Only Once ');  // comment this line out but you may care to retain it for test purposes

createCookie('visitedPreviously', 'visitedPreviously', 1);  // 1 days persistence

f_slideIn();  // call the function 

}

wtf? The whole point is to combine two scripts. I want teh slide in functino this is a slide in window that I want to show only once per day/once per session.

Help

Sorry, you have not done what I suggested, and your boorish ill-manners means that I am not interested in helping you further. I don't like it when people shout at me. :mad:

In any case you are obviously too inexperienced and lacking in knowledge of JavaScript to make use of any advice given.

Hi Philip M, wanted to express my gratitude for posting this answer and greatly helped me to achieve what i was looking for even if this a 9 months old thread. i am an inexperienced coder my self (not even a coder) i am a web designer but polite and have always learned to give credit to people like you , sharing knowledge is what is driving all of us to go forward..
i got here via google and this was exactly what i was looking for just i want this to modify it to accept lesser period than a day eg 1 hour.
you can see the use of it on this website www.myfxcentral.gr it uses your code to show the jpopup in joomla only once per user per day, but i want this to set it a lesser period.

thank you.
john

btw if you need anything to see how i used your code or anything i will provide asap thanks

Quote:

Originally Posted by EGS (Post 993163)

Please help. :o
I don't know how to set a cookie with my particular code. Can someone help me & provide it in my code and paste it here? I have no idea what to do.
:(

Here's a set of functions that will save or retrieve data from a cookie or from local storage:

Code for cookies:

Code:

/***

 * write a cookie: name, value, lifetime in days

 **/

var writeCookie = function (name, value, days) {

    if (days) {

        var date = new Date();

        date.setTime(date.getTime() + (days * 86400000));

        var expires = '; expires=' + date.toGMTString();

    } else {

        expires = '';

    }

    var content = name + '=' + value + expires;

    document.cookie = content;

    return content;

}



/***

 * read a cookie: name. returns value or false if not found

 **/

var readCookie = function (name) {

    var nameEQ = name + '=';

    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, c.length);

        }

        if (c.indexOf(nameEQ) == 0) {

            return c.substring(nameEQ.length, c.length);

        }

    }

    return false;

}

Example for a cookie:
(1) var name = 'Joe Smith';
(2) writeCookie('username', name, 30); (a cookie named 'username' with a value of 'Joe Smith' is saved on the client's machine and it stays there for 30 days.
(3) .... sometime later.....
(4) var name = readCookie('username');
(5) alert(name); (displays 'Joe Smith' retrieved from the client's machine).

Code for local storage:

Code:

/***

 * read data from local storage, return false if not there

 ***/

var getLocal = function (name) {

    return localStorage.getItem(name) || false;

}



/***

 * save data to local storage, return false if failed

 ***/

var setLocal = function (name, value) {

    localStorage.setItem(name, value);

    if (getLocal(name) !== value) {

        return false;

    }

    return value;

}



/***

 * clear one entry from local storage

 ***/

var clrLocal = function (name) {

    return localStorage.removeItem(name);

}



/***

 * completely wipe all local storage clean

 ***/

var nukeLocal = function () {

    var n = localStorage.length;

    if (n) {

        while (n--) {

            localStorage.removeItem(localStorage[n]);

        }

    }

}

Note that you cannot store OBJECTS in a cookie or in local storage. You must first use JSON.stringifier (to convert an object into a storable form) and JSON.parse (to convert a cookie or local storage string back into an object).

Hope this helps you.......

-- Roger

To set a cookie which will expire in one hour:-

Code:

<script type = "text/javascript">



function createCookie(name, value){

var today = new Date;

today.setTime(today.getTime()+ 3600000);  // = 1 hour

document.cookie = name + "=" + value + "; expires=" + today.toGMTString();

alert (name + " value is: "+ value + "\nExpires in: " + today);

}



createCookie("myName", "myValue");



</script>

Then start by reading the cookie - if it is found do this, if it is not found do that.

If you have a server side language you can use I would recommend doing this server side as any cookies and/or javascript solutions will not work if they are disabled in the visitors' browser.

Quote:

Originally Posted by bullant (Post 1103168)

If you have a server side language you can use I would recommend doing this server side as any cookies and/or javascript solutions will not work if they are disabled in the visitors' browser.

You keep making this infantile observation. Only a tiny minority of people disable Javascript in their browser - and if they do they do it deliberately and at their own risk. And if Javascript is disabled than pretty obviously kegra's site (reliant on many scripts including jQuery and mootools!) will not work at all.

Disabled cookies is a more plausable situation, but in that case the cookies are disabled both from client-side and from server-side.