Intro Bar like Stack Overflow
I have a simple top bar using jQuery like the one on Stack Overflow, but I want it to only appear on the first time a person visits the website.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="bxSlider.js"></script>
<title>topbar</title>
<style type="text/css" media="screen">
#message {
font-family:Arial,Helvetica,sans-serif;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:105;
text-align:center;
color:white;
padding:2px 0px 2px 0px;
background-color:#8E1609;
}
#example1 {
text-align: center;
width: 80%;
}
.close-notify {
white-space: nowrap;
float:right;
margin-right:10px;
color:#fff;
text-decoration:none;
padding-left:3px;
padding-right:3px
}
.close-notify a {
color: #fff;
}
h4, p {
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<DIV ID='message' style="display: none;">
<DIV ID="example1">
<DIV CLASS="item">
<h4>Head 1</h4>
<p>Text 1</p>
</div><!-- end item -->
<DIV CLASS="item">
<h4>Head 2</h4>
<p>Text 2</p>
</div><!-- end item -->
</div><!-- end example1 -->
<a href="#" CLASS="close-notify" onclick="closeNotice()">X</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#message").fadeIn("slow");
$('#example1').bxSlider({
mode: 'slide',
speed: 250,
wrapper_CLASS: 'example1_container'
});
});
function closeNotice() {
$("#message").fadeOut("slow");
}
</script>
</body>
</html>
bxSlider.js:
/**
*
*
* bxSlider: Content slider / fade / ticker using the jQuery javascript library.
*
* Author: Steven Wanderski
* Email: wandoledzep@gmail.com
* URL: http://bxslider.com
*
*
**/
jQuery.fn.bxSlider = function(options){
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Declare variables and functions
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
var defaults = {
mode: 'slide',
speed: 500,
auto: false,
auto_direction: 'left',
pause: 2500,
controls: true,
prev_text: 'prev',
next_text: 'next',
width: $(this).children().width(),
prev_img: '',
next_img: '',
ticker_direction: 'left',
wrapper_class: 'container'
};
options = $.extend(defaults, options);
if(options.mode == 'ticker'){
options.auto = true;
}
var $this = $(this);
var $parent_width = options.wid开发者_运维知识库th;
var current = 0;
var is_working = false;
var child_count = $this.children().size();
var i = 0;
var j = 0;
var k = 0;
function animate_next(){
is_working = true;
$this.animate({'left':'-' + $parent_width * 2 + 'px'}, options.speed, function(){
$this.css({'left':'-' + $parent_width + 'px'}).children(':first').appendTo($this);
is_working = false;
});
}
function animate_prev(){
is_working = true;
$this.animate({'left': 0}, options.speed, function(){
$this.css({'left':'-' + $parent_width + 'px'}).children(':last').insertBefore($this.children(':first'));
is_working = false;
});
}
function fade(direction){
if(direction == 'next'){
var last_before_switch = child_count - 1;
var start_over = 0;
var incr = k + 1;
}else if(direction == 'prev'){
var last_before_switch = 0;
var start_over = child_count -1;
var incr = k - 1;
}
is_working = true;
if(k == last_before_switch){
$this.children().eq(k).fadeTo(options.speed, 0);
$this.children().eq(start_over).fadeTo(options.speed, 1, function(){
is_working = false;
k = start_over;
});
}else{
$this.children().eq(k).fadeTo(options.speed, 0);
$this.children().eq(incr).fadeTo(options.speed, 1, function(){
is_working = false;
k = incr;
});
}
}
function add_controls(){
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Check if user selected images to use for next / prev
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(options.prev_img != '' || options.next_img != ''){
$this.parent().append('<a class="slider_prev" href=""><img src="' + options.prev_img + '" alt=""/></a><a class="slider_next" href=""><img src="' + options.next_img + '" alt="" /></a>');
}else{
$this.parent().append('<a class="slider_prev" href="">' + options.prev_text + '</a><a class="slider_next" href="">' + options.next_text + '</a>');
}
$this.parent().find('.slider_prev').css({'float':'left', 'outline':'0', 'color':'yellow'});
$this.parent().find('.slider_next').css({'float':'right', 'outline':'0', 'color':'yellow'});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Accomodate padding-top for controls when elements are absolutely positioned (only in fade mode)
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(options.mode == 'fade'){
$this.parent().find('.slider_prev').css({'paddingTop' : $this.children().height()})
$this.parent().find('.slider_next').css({'paddingTop' : $this.children().height()})
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Actions when user clicks next / prev buttons
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
$this.parent().find('.slider_next').click(function(){
if(!is_working){
if(options.mode == 'slide'){
animate_next();
if(options.auto){
clearInterval($.t);
$.t = setInterval(function(){animate_next();}, options.pause);
}
}else if(options.mode == 'fade'){
fade('next');
if(options.auto){
clearInterval($.t);
$.t = setInterval(function(){fade('next');}, options.pause);
}
}
}
return false;
});
$this.parent().find('.slider_prev').click(function(){
if(!is_working){
if(options.mode == 'slide'){
animate_prev();
if(options.auto){
clearInterval($.t);
$.t = setInterval(function(){animate_prev();}, options.pause);
}
}else if(options.mode == 'fade'){
fade('prev');
if(options.auto){
clearInterval($.t);
$.t = setInterval(function(){fade('prev');}, options.pause);
}
}
}
return false;
});
}
function ticker() {
if(options.ticker_direction == 'left'){
$this.animate({'left':'-' + $parent_width * 2 + 'px'}, options.speed, 'linear', function(){
$this.css({'left':'-' + $parent_width + 'px'}).children(':first').appendTo($this);
ticker();
});
}else if(options.ticker_direction == 'right'){
$this.animate({'left': 0}, options.speed, 'linear', function(){
$this.css({'left':'-' + $parent_width + 'px'}).children(':last').insertBefore($this.children(':first'));
ticker();
});
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Create content wrapper and set CSS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
$this.wrap('<div class="' + options.wrapper_class + '"></div>');
//console.log($this.parent().css('paddingTop'));
if(options.mode == 'slide' || options.mode == 'ticker'){
$this.parent().css({
'overflow' : 'hidden',
'position' : 'relative',
'margin' : '0 auto',
'width' : options.width + 'px'
});
$this.css({
'width' : '999999px',
'position' : 'relative',
'left' : '-' + $parent_width + 'px'
});
$this.children().css({
'float' : 'left',
'width' : $parent_width
});
$this.children(':last').insertBefore($this.children(':first'));
}else if(options.mode == 'fade'){
$this.parent().css({
'overflow' : 'hidden',
'position' : 'relative',
'width' : options.width + 'px'
//'height' : $this.children().height()
});
if(!options.controls){
$this.parent().css({'height' : $this.children().height()});
}
$this.children().css({
'position' : 'absolute',
'width' : $parent_width,
'listStyle' : 'none',
'opacity' : 0
});
$this.children(':first').css({
'opacity' : 1
});
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Check if user selected "auto"
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(!options.auto){
add_controls();
}else{
if(options.mode == 'ticker'){
ticker();
}else{
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Set a timed interval
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(options.mode == 'slide'){
if(options.auto_direction == 'left'){
$.t = setInterval(function(){animate_next();}, options.pause);
}else if(options.auto_direction == 'right'){
$.t = setInterval(function(){animate_prev();}, options.pause);
}
}else if(options.mode == 'fade'){
if(options.auto_direction == 'left'){
$.t = setInterval(function(){fade('next');}, options.pause);
}else if(options.auto_direction == 'right'){
$.t = setInterval(function(){fade('prev');}, options.pause);
}
}
if(options.controls){
add_controls();
}
}
}
}
You can use JavaScript to set cookies.
When the page loads, check for a cookie. If the cookie exists, they've been to the site. If it doesn't, they haven't. This isn't perfect (you can easily delete cookies), but it works.
Then, either change the value of that same cookie, or set a new cookie that states whether the user has clicked the x.
I don't want to just copy and paste the code, but the W3C schools example is almost exactly what you're looking for.
So essentially you'll have three states:
- Never been here (no cookie)
- Been here but not clicked the x (cookie name = "new_user_status", value = "new" or something)
- Clicked the x (cookie name = "new_user_status", value = "they're good". or whatever)
You could even do this for every message you want to display.
- cookie name = [whatever your message title is]
- cookie value = show / hide
Cookies are a start, but they can easily be cleared and they might not be enabled. A more robust solution would be to use other forms of local storage and fallback to cookies if they are not available. Some of your other options are:
- HTML5 Local Storage
- Flash Persistent Storage
- IE local storage
- Google Gears
- Cookies
It would be a pain to implement this if someone hadn't already done it for you. Checkout Persist-Js if you feel that cookies aren't enough. It's probably overkill for just detecting a new user, but if you're not happy with cookies then this provides you with some more options.
You will have to use sort of session to store the value that user has been shown the bar once. An alternative is to use cookies too. Once they are set, you check whether it is set or not if not you show the bar not otherwise.
session_start();
if (!isset($_SESSION['bar_shown']))
{
// show your info bar
// finally set the session
$_SESSION['bar_shown'] = true;
}
So I'd say cookies are the way to go here rather than sessions. It's slightly ambiguous from your wording but I think you only want to display this bar on the very first visit to the website.
You're using jQuery so I'd recommend the jQuery cookie plugin to do the actual cookie reading and writing. Get it at http://plugins.jquery.com/project/cookie.
Once the user clicks the x on your bar call the close notice function as before but with an added cookie set:
function closeNotice() {
$("#message").fadeOut("slow");
var date = new Date();
//Here we set the expire time to 999 days worth of milliseconds
date.setTime(date.getTime() + (999 * 24 * 60 * 60 * 1000));
$.cookie("NO_BAR", 1, { path: '/', expires: date });
}
Then your document ready function becomes
$(document).ready(function() {
if (!$.cookie("NO_BAR")) {
$("#message").fadeIn("slow");
$('#example1').bxSlider({
mode: 'slide',
speed: 250,
wrapper_CLASS: 'example1_container'
});
}
});
If I misunderstood your question and you actually want the bar to be displayed the first time on EVERY VISIT then you want a session cookie instead. To do that just remove the expire date all together like so:
$.cookie("NO_BAR", 1, { path: '/'});
加载中,请稍侯......
精彩评论