ShadowBox Breaks With Cookie

classic Classic list List threaded Threaded
21 messages Options
12
Reply | Threaded
Open this post in threaded view
|

ShadowBox Breaks With Cookie

staricco
This post was updated on .
Hello,
brand new to ShadowBox, but got it to work, and have been using it.
Not a coder, but can digest and work with it in small chunks.

Step 1. - Get SB to work
DONE


Step 2. - Get it to open when page loads
DONE


Step 3. - Set a cookie so it only opens once
AAAA CRAP!


When I add the cookie script, it doesn't open on page load, just sits there, and when I try to "force" SB to open with the href link, it doesn't work IN FIREFOX, but works fine in IE (that's a first).

Help is always greatly appreciated, especially the kind that get it to work.
Thanks in advance.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />

<title>Shadow Box w/Onload and Cookie</title>

<link href="../site/scripts/css/portal.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../site/scripts/shadowbox/shadowbox.css">
<script type="text/javascript" src="../site/scripts/jscript/jquery.js"></script><script type="text/javascript" src="../site/scripts/jscript/jquery.cookie.js"></script><script type="text/javascript" src="../site/scripts/shadowbox/shadowbox.js"></script>
<script type="text/javascript"> <!-- If I DO want to provide all close options, use Shadowbox.init(); --> <!-- If I DON'T want to provide all close options, use Shadowbox.init({language: 'en', players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'], modal: true, enableKeys: false}); AND REMEMBER to change the display property of the closing X in shadowbox.css to #shadowbox_nav_close {display:none;}--> Shadowbox.init({ }); </script>


<script type="text/javascript"> $(document).ready(function(){ if ($.cookie('guest') != '1') { Shadowbox.open(document.getElementById('googlize')); $.cookie('guest', '1', { expires: 0 }); } }); </script>
</head>
<body>
Open ShadowBox
</body>
</html>
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

staricco
So what's the deal?? No one knows why this is happening? Or no one wants to help?
Haven't received a reply in days since I posted.

Little help here?
Would be appreciated.
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

dataload
It's because you calling the code in the DOM ready event.  Shadowbox contains it's own code for initialising the shadowbox onDOMready (which is based on the code in JQuery), so when you're calling shadowbox.open shadowbox hasn't been setup yet.  If you move the entire block of code into the onload event you have commented out it works as expected including the cookie.
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

staricco
Hello,
finally thanks for a reply.

So would this be the correct syntax?
(Probably not since I am a "noob")

<script type="text/javascript"> window.onload = function(){ Shadowbox.init(); $(document).ready(function(){ if ($.cookie('guest') != '1') { Shadowbox.open(document.getElementById('googlize')); $.cookie('guest', '1', { expires: 0 }); </script>
I keep getting a syntax error, but like I said, noob.
You're help again is much appreciated, and thanks for finally replying.
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

dataload

Almost, but you don't need to initialise shadowbox again and you can't put the domready function in the onload, so you should just need:

<script type="text/javascript">
Shadowbox.init();
window.onload = function(){
    if ($.cookie('guest') != '1') {
        Shadowbox.open(document.getElementById('googlize'));
        $.cookie('guest', '1', { expires: 0 });
    };
};
</script>
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

staricco
Hello,
want to thank you (only person that helped).

It seems to be working perfectly.
Thanks for the assist and sharing your knowledge.

This post is considered "ANSWERED"
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

dandan
Can somebody write out a full code to embed with the cookie?

I am a real retard when it comes to coding and I can't get this cookie function to work with my script.

Here is my code:

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.cookie.js"></script><script type="text/javascript" src="shadowbox.js"></script> 
<script type="text/javascript"> Shadowbox.init(); window.onload = function(){ if ($.cookie('guest') != '1') { Shadowbox.open(document.getElementById('googlize')); $.cookie('guest', '1', { expires: 0 }); }; }; </script><script type="text/javascript"> Shadowbox.open({ content: '<img src="AOB_3000Plant_695x257_en.gif">', player: "html", height: 257, width: 695 }); }; </script>
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

dataload

There are a few variations on how you could do it but this would be about the simplest

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shadow Box w/Onload and Cookie</title>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
window.onload = function(){
	if ($.cookie('guest') != '1') {
		Shadowbox.open(document.getElementById('googlize'));
		$.cookie('guest', '1', { expires: 0 })
	};
};
</script>
</head>
<body>
<a link="external" title="It's Google!" rel="shadowbox" id="googlize" href="http://www.google.com">Open ShadowBox</a>
</body>
</html>
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

Andy
Hey, this is exactly the thread I was looking for. I'm using Wordpress and I'm wanting to use Shadowbox to popup a mailing list form the first time a user visits the page.

I used the code you suggested with the exception of a few changes, but I'm getting no love. Here's what I have:

<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('stylesheet_directory') ?>/js/shadowbox-3.0.3/shadowbox.css">
        <script type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/js/shadowbox-3.0.3/shadowbox.js"></script>
        <script type="text/javascript" src="<?php echo bloginfo('stylesheet_directory') ?>/js/shadowbox-3.0.3/jquery.cookie.js"></script>
        <script type="text/javascript"> Shadowbox.init ({ // let's skip the automatic setup because we don't have any // properly configured link elements on the page skipSetup: true }); window.onload = function(){ if ($.cookie('guest') != '1') { Shadowbox.open({ content: '<div id="welcome-msg">Welcome to my website!</div>', player: "html", title: "Welcome", height: 350, width: 350 }); $.cookie('guest', '1', { expires: 0 }); }; }; </script>
Note: Wordpress automatically adds in the link to jquery in the head, so i didn't include it above. Also, I downloaded jquery.cookie.js from the jquery website, which I'm assuming is the correct procedure.
I wonder what I'm missing here. Ideas?
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

dataload
Your code works for me.  Maybe you could put a link to a live example?
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

Andy
Thanks for the quick response, petemitch.

I set up a test page on the live Wordpress site to use as a dummy for the popup at:
stemtutoring.org/popup-test-page

I included the code as listed above. I'm wondering if this has something to do with me being ignorant about clearing the browser's caches/cookies. I mean, I've cleared them in Firefox and refreshed, and also used a number of different browsers without any success, but it's a possibility.

Thanks for any helpful tips you might come up with.
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

dataload
Looks like you're running jQuery in noConflict mode which means it relinquishes control of the $ variable, try using jQuery.cookie instead for both instances.  Also you have links to 2 versions of jQuery (1.3.2 and 1.4.2) - don't think it's causing an issue but it's probably safer to just use one.
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

Andy
Ah! noconflict mode was indeed the problem. I just replaced instances of $ with jQuery, and all is well now, as it should be. Thanks so much for your help!
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

Andy
In reply to this post by dataload
One more question:

I'm using a slideshow script as well from the Dynamic Drive website. When a Shadowbox window is active, everything on the page sits nicely behind it EXCEPT for the slideshow, which is layered on top of everything else. Is there a way to tell Shadowbox to treat the slideshow like everything else?

The site where this problem is happening: http://stemtutoring.org

The script for the DD slideshow can be found here: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Thanks for your help,
- Andy
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

dataload
it's just a z-index issue, try bumping the z-index of #sb-container up in shadowbox.css
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

Arames
This post is exactly wha I was looking for, and thank you Pete for being the only to answer us.

Please can you take a look at my code and see what is the error? Cookies are NOT being recorded properly ...

<script type="text/javascript"> //<![CDATA[ Mage.Cookies.path = '/'; Mage.Cookies.domain = '.mydomain.com'; //]]> </script>


<script type="text/javascript"> Shadowbox.init({ skipSetup: true }); window.onload = function() { Shadowbox.open({ player: 'iframe', title: 'Choose your version', type: 'iframe', content: 'http://www.mydomain.com/select_language.shtml', width: 800, height: 150, options: { onClose: function() { setCookie('version', true, 7); }, animate: false, fadeDuration: 0.15 } }); }; 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.toUTCString() + ";path=/"); } </script>
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

arttronics
This post was updated on .
I noticed that when using Shadowbox.open as you written, the use of Options is required for Options.

It might sound confusing at first, but if you take a look at the Shadowbox API for buildObject, in this case the Shadowbox.open you are using, you'll soon see the syntax.

If I'm not mistaken, the Function should be called before Shadowbox.open is. JavaScript likes to process everything in series, top items first. I have absolutely no experience with cookies, so this markup example with corrected cookie expiredays value will either work or not. You can also wrap the onClose function into a setTimeout with 0 delay because sometimes Shadowbox needs to remove the hook handle it still has.  

Shadowbox.init({
    skipSetup: true
});


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.toUTCString() + ";path=/");
}


window.onload = function() {
    Shadowbox.open({
        player: 'iframe',
        title: 'Choose your version',
        type: 'iframe',
        content: 'http://www.mydomain.com/select_language.shtml',
        width: 800,
        height: 150,

        options: {
            animate: false,
            fadeDuration: 0.15,
        
            options: {
                onClose: function(){setCookie('version', true, 7);}
            }
        }
    });
};


Edit: the use of Options is sometimes required for Options.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

Arames
Thank you so much for your kind reply, time and help.

Unfortunately it is still NOT working, the pop up window is still showing up everytime you visit that page ...

Please can you make ANY test page and post the URL so we can ALL learn from you and take some live example?

Thank you again for your help.

Warm regards,
Arames T.
Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

arttronics
You must have missed that I wrote "I have absolutely no experience with cookies" but that's okay.

I don't post URL's since I don't have a web site.

Here in the forums there's plenty of other topics on cookie use.

Hopefully someone can post a solution for your markup.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: ShadowBox Breaks With Cookie

dataload
In reply to this post by Arames
you need an if statement in there somewhere to check if the cookie already exists, otherwise you're just creating the cookie and never doing anything with it.  Have a look at the examples way back up near the top of this thread.
12