Jump to content

jQuery cookie - Newsletter module slide from bottom animation


Recommended Posts

Hello!

 

I have been tweaking the newsletter module to slide up from bottom of page after 3 seconds.

 

It works all good and slides up and down just fine, but I tried to set a cookie so it wont show up on every page once a visitor has subscribed the newsletter or hit the "close" button and "of course" it doesn't work.

 

I put the "jquery.cookie.js" into my "js" folder in my theme and I get no error in the console.

 

The code have been implemented directly into the "header.tpl file " right before "</head>" since I didn't no how to do it otherwise.

 

If i keep the original code like this, the animation works all fine

{literal}
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script>
	    $(function() {
	        // MAILING LIST SLIDER //
	        // set a delay of 3 seconds before mailing list panel appears 
	            $("#newsletter_block_left").delay(1000).animate({
	                   bottom:'+=280px'}, 500);
	    
	            // set triggers to close the mailing list panel & set cookie
	            $("#newsletter_close_button").click(function(){
	                $("#newsletter_block_left").animate({
	                   bottom:'-=280px'}, 500);
	                });
			});
        //END MAILING LIST SLIDER // 
        </script>        
{/literal}

but when I try to implement the cookie function, the animation don't even work and still no errors in console.

 

Here is the code I attempt to use:

{literal}
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"</script>
		<script>
	    $(function() {
	        // MAILING LIST SLIDER //
	        // set a delay of 3 seconds before mailing list panel appears 
	            $("#newsletter_block_left").delay(1000).animate({
	                   bottom:'+=280px'}, 500);
	    
	            // set triggers to close the mailing list panel & set cookie
	            $("#newsletter_close_button").click(function(){
	                $("#newsletter_block_left").animate({
	                   bottom:'-=280px'}, 500);
	                });
		 		if ($.cookie("mailingListClosed") == null && $.cookie("mailingListNeverShow") == null) {
		            $("#newsletter_block_left").css({
		                   bottom:'+=280px'}, 500);
		        };
		
		        // Trigger for close panel button. Close panel and set session cookie
		        $("#newsletter_close_button").click(function () {
		            $("#newsletter_block_left").css({
		                   bottom:'-=280px'}, 500);
		            $.cookie("mailingListClosed", "true", { path: "/" });
		        });
	 
			});
        //END MAILING LIST SLIDER // 
        </script>        
{/literal}

Really hope that you can help me out :)

 

URL: http://www.freshsmoke.dk

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...