» » Use CSS + Cookie to realize fixed footer banner

 

Use CSS + Cookie to realize fixed footer banner

Author: bamboo06 on 8-08-2015, 01:05, views: 2870

7
Often see some sites in order to attract the user's attention fixed place banner ads at the bottom of the page, the user scrolls the page, banner ads have been fixed in bottom of the page, not with the page scrolling and scrolling, of course, generally allow users to turn off the banner, and set certain Do not show this banner time. This article describes the use of CSS + Cookie to achieve this effect.

HTML
First, we'll banner advertising html code into bottom of the page, because it is finally loaded. You can also use an external js dynamically inserted into the bottom of the page. Entire HTML structure consists of a mask layer .float_layer, content layer .float_content, of which .float_bg ad section, the content can be images, text and other elements in any form of html, .float_close is the Close button, the user can turn off the display do not like advertising.
<div class="float_mask" id="float_mask">
    <div class="float_layer">
    </div>
    <div class="float_content clearfix">
        <div class="float_bg">
            <a target="_blank" href="http://www.goocode.net/" title='ads part'>
                <div class="float_slogan"><!--advert--></div>
            </a>
        </div>
        <div class="float_close">
            <a onclick="closeFootAd()" href="#" title="Get it"></a>
        </div>
    </div>
</div>


CSS
We use CSS to a fixed banner in the footer, and show a translucent mask effects, advertising Close button effects. We know that position: fixed element is fixed position, with the bottom, right and other property can be elements of a fixed position on the page, not with the page scrolling and scrolling. Opacity property can be achieved using the transparent effect. We give .float_slogan a background attribute, advertising picture as a background to join, of course, you can also do not need to do this, add images or text directly above the html.
.float_mask{position: fixed;z-index: 19999;display:none;width: 100%;right: 0; bottom: 0;height: 105px;_bottom: auto;_width: 100%;_position: absolute; 
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));} 
.float_layer{position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;background: #071828;filter: alpha(opacity=80);opacity: 0.80;} 
.float_content{ position: relative;z-index: 2;width: 1005px;height: 100%;margin: 0 auto;padding-left: 70px;} 
.float_bg, .float_close{ float: left;} 
.float_bg{position: relative;width: 820px;height: 135px;margin-top: -27px;} 
.float_slogan {position: absolute; background: url("footer_ad.png") 0 0 no-repeat;} 
.float_slogan{left: 0;bottom: 0;width: 800px;height: 135px;cursor: pointer;} 
.float_close{width: 60px;margin-top: 30px;} 
.float_close a {display: block;width: 53px; height: 52px; margin-left: 7px; background: url("close.png") 0 0 no-repeat;-webkit-transition: all 400ms;} 


javascript

When we first opened the page, cookie information detected javascript bottom of the page to go banner ads associated information indicated if the cookie is closed, bottom of the page does not display advertising, and vice versa bottom of the page display ads. We will call you click the Close button when closeFootAd () function, click the Close button, the banner is hidden, that is closed, and set the cookie-related values. The following is the entire operation code javascript:
window.onload = function(){
	if(getCookie("footad")==0){
		document.getElementById("float_mask").style.display="none";
	}else{
		document.getElementById("float_mask").style.display="block";
	}
}
//close footer banner
function closeFootAd() {
	document.getElementById("float_mask").style.display="none";
	setCookie("footad","0"); 
}
   
//set cookie 
function setCookie(name,value){ 
    var exp = new Date();  
    exp.setTime(exp.getTime() + 1*60*60*1000);//valid time 1 hour 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
//get cookies fun 
function getCookie(name){ 
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
    if(arr != null) return unescape(arr[2]); return null; 
} 


Knowledge about the cookie, the site has made detailed introduction articles, please click the tags: cookie session

Category: Javascript / CSS

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
27 July 2017 05:33

gree

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Wow howcome there isnt any essay writing service work here because the last time i checked it was provided on the top left corner in this site, please dont tell me you guys made some changes and dropped it out?

<
  • 0 Comments
  • 0 Articles
4 August 2017 21:03

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I would recommend my profile is important to me, I invite you to discuss this topic. Natto

I should assert barely that its astounding! The blog is informational also always fabricate amazing entitys. Infatuation Scripts

<
  • 0 Comments
  • 0 Articles
6 August 2017 09:39

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people. Questions to ask

<
  • 0 Comments
  • 0 Articles
21 September 2017 22:20

david

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is an incredible article a debt of gratitude is in order for sharing this educational data. I will visit your site consistently for some most recent post. I will visit your online journal routinely for Some most recent post. alexa traffic

<
  • 0 Comments
  • 0 Articles
9 December 2017 22:13

Female Escorts in Kolkata

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Beauti Queen amazing kolkata escorts agency alwyas ready for you at your doorstep. Beauti Queen provide you high profile independent girl in kolkata, escorts service in kolkata, kolkata escorts. If you are looking for the ultimate encounter in Kolkata then I am your sophisticated young Kolkata escorts that provides upscale companionship for making your night becomes true.
escorts service in kolkata, kolkata escorts, escorts in kolkata, independent escorts in kolkata, female escorts in kolkata

<
  • 0 Comments
  • 0 Articles
27 January 2018 05:39

Escorts in Kolkata

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Renu Das Kolkata Escorts Services has gorgeous females provides Independent Escorts Service in Kolkata call girls at 100% satisfaction with VIP models. Provided Kolkata escorts at our agency are professional in nature and are eager to serve you at your place.
kolkata escorts, escorts in kolkata, escorts service in kolkata, female escorts in kolkata, escorts agency in kolkata, independent escorts in kolkata

<
  • 0 Comments
  • 0 Articles
27 February 2018 01:02

Delhi Escorts

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Riya Chaudhary is an Independent Delhi Escort girl, who offers dazzling hot Delhi Escorts Service, incall or outcall services both to complete your dreams in real entertainment. We offers high class Independent Escorts in Delhi at Riya Chaudhary Delhi Escorts service agency for elite peoples in the city to avail ultimate satisfaction. you can spend your beautiful moments.
delhi escorts, independent escorts in delhi, escorts in delhi

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