Jump to content

[Job] jQuery newsletter block animation


Recommended Posts



I managed to make the newsletter block slide up from bottom after x seconds. If you click the "close" button, it will stay closed as long as you're still hanging around ;-)

If you subscribe, it will send you to a thank you page and set a cookie to not animate the newsletter the next 365 days.

If you click "Close and never show again" the same will happen with a cookie to never show again the next 365 days.


Now I'm trying to let the newsletter animate if you click on the newsletter teaser which always is at the bottom. So if you click, animate, if not and cookie is not set, animate after x seconds. I couldn't manage to do this, can anyone point me to the right direction or explain how I can do it?


Here's my animation code

//******* Newsletter slide animation********
		    $(function() {
		        // Checks if any cookies is set, then don't show (if closed or "never show" choosed else do animation
		        if ($.cookie("mailingListClosed") == null && $.cookie("mailingListNeverShow") == null) {
				// If user clicks on teaser
		        $("#newsletter_teaser").click(function () {
		        	$("#newsletter_teaser").animate({bottom:'-=63px'}, 300);
		            $("#newsletter_block_left").delay(300).animate({bottom:'+=335px'}, 300);
		        // Trigger for close panel button. Close panel and set session (sets cookie to not show newsletter this session )
		        $("#newsletter_close_button").click(function () {
		            $("#newsletter_block_left").animate({bottom:'-=335px'}, 300);
		            $.cookie("mailingListClosed", "true", { path: "/" });
				// Set persistent cookie if user clicks on the newsletter button as well
		        $("#vis_ikke_igen").click(function () {
		            $("#newsletter_block_left").animate({bottom:'-=335px'}, 300);
		            $.cookie("mailingListNeverShow", "true", { expires: 365, path: "/" });
		        // Set persistent cookie if user subscribe to the newsletter
		        $(".subscribe_newsletter").click(function () {
		            $("#newsletter_block_left").animate({bottom:'-=335px'}, 300);
		            $.cookie("mailingListNeverShow", "true", { expires: 365, path: "/" });

I tried with the code "If user clicks on teaser" but it just remembers that click, so when the animation happens after x seconds, it animates twice so it goes higher up than it was supposed to.


I'm on version

Edited by Davallen (see edit history)

Share this post

Link to post
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...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More