Menu
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.
<!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: Content slider / fade / ticker using the jQuery javascript library.
*
* Author: Steven Wanderski
* Email: [email protected]
* 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.width;
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();
}
}
}
}
439
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:
You could even do this for every message you want to display.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
