Intro Bar like stack overflow
Posted
by Dasa
on Stack Overflow
See other posts from Stack Overflow
or by Dasa
Published on 2010-04-09T10:36:39Z
Indexed on
2010/04/09
10:43 UTC
Read the original article
Hit count: 262
I have a simple top bar using jquery like the one on stackoverflow, but i want it to only appear on the first time a person visits the website.
below is the HTML followed by the "bxSlider.js" file
<!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();
}
}
}
}
© Stack Overflow or respective owner
