» » Use Javascript to control the background Close with Cookie

 

Use Javascript to control the background Close with Cookie

Author: bamboo06 on 13-11-2014, 02:38, views: 2938

3
Whenever significant during the holiday season, the major mainstream Home will put festive costumes, designers typically use a substantial background pictures to get a better visual impact, of course, also taking into account that some users are not accustomed to this great background, then place the "Close" button in the background is necessary, users simply click on the "Close background" button, a substantial background image will disappear.

We use javascript to control the background image to show and hide, when you click the close button, so that the page does not load control CSS background image while recording COOKIE parameters and set the cookie is valid, then refresh the page in the cookie is valid, is not reloading background, and if the cookie fails, the background image will reload.
HTML
General background image on the page is the close button of the head, we put off the background of the button at the top of the page, of course, this button is a good picture.
<div id="top">
	<em id="close_btn" title="CLOSE Background"></em>
</div>

CSS
Also need to prepare for the big background image, we find from the Internet queen background use of them, to do simple page with a CSS layout.
*{margin:0; padding:0} 
body{font:12px/18px "Microsoft Yahei",Tahoma,Arial,Verdana,"\5b8b\4f53", sans-serif;color:#808080;} 
#top{clear:both;width:1000px;height:60px;margin:0 auto;overflow:hidden;position:relative;} 
#close_btn{width:60px;height:20px;position:absolute;right:0;bottom:25px;cursor:pointer; 
display:block;z-index:2;} 

After deploying over css, page also plays no effect, so we need to use javascript to load the background image.
javascript
When you first load the page (in this case has not yet set a cookie, etc.), of course we wanted to load background images, display the full results page. When we click on the "Close" button, this time the page has loaded javascript will get rid of background images that do not show up, and set the cookie, the cookie expiration time by controlling a large background image is displayed. That is, when the next refresh the page, if the cookie has not expired, it will not load large background image, otherwise load large background image, see the code:
$(function(){
	if(getCookie("mainbg")==0){
		$("body,html").css("background","none");
		$("#close_btn").hide();
	}else{
		$("body").css("background","url(images/body_bg.jpg) no-repeat 50% 0");
		$("html").css("background","url(images/html_bg.jpg) repeat-x 0 0");
		$("#close_btn").show().css("background","url(images/close_btn.jpg) no-repeat");
	}
	
	$("#close_btn").click(function(){
		$("body,html").css("background","none");
		$("#close_btn").hide();
		SetCookie("mainbg","0");
	});
}

Obviously, we are to control the load background page elements by setting a CSS background background properties, and by getCookie () and setCookie () two custom functions to read and set the cookie.
//set cookie
function SetCookie(name,value){
	var exp = new Date(); 
	exp.setTime(exp.getTime() + 1*60*60*1000);//1h valid
	document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//get cookies function
function getCookie(name){
	var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
	if(arr != null) return unescape(arr[2]); return null;
}

In setting the cookie is valid, we can set according to the actual demand for 10 days, two weeks, etc. The paper is only set one hour in order to set up demo.

Category: Javascript

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
15 December 2017 04:28

Leland Javion

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Great post share it is, indeed we should use javascript to control the background Close with Cookie like shared at ivoryresearch.com reviews site as well. This coding seems really good as well, keep sharing more friend.

<
  • 0 Comments
  • 0 Articles
31 December 2017 00:19

Steven Angelina

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is great, good to know that we should use javascript to control the background Close with Cookie like shared at https://writingpeakcouk.tumblr.com/ site as well. I hope to read more about this thank you.

<
  • 0 Comments
  • 0 Articles
1 February 2018 21:27

ALISE

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our.academic writing services

Information
Comment on the news site is possible only within (days) days from the date of publication.