title: Intro Bar like Stack Overflow
body: <p>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.</p>
  
  <h2>The HTML:</h2>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="bxSlider.js"&gt;&lt;/script&gt;
          &lt;title&gt;topbar&lt;/title&gt;
  
          &lt;style type="text/css" media="screen"&gt;
              #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;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;DIV ID='message' style="display: none;"&gt;
              &lt;DIV ID="example1"&gt;
                  &lt;DIV CLASS="item"&gt;
                      &lt;h4&gt;Head 1&lt;/h4&gt;
                      &lt;p&gt;Text 1&lt;/p&gt;
                  &lt;/div&gt;&lt;!-- end item --&gt;
  
                  &lt;DIV CLASS="item"&gt;
                      &lt;h4&gt;Head 2&lt;/h4&gt;
                      &lt;p&gt;Text 2&lt;/p&gt;
                  &lt;/div&gt;&lt;!-- end item --&gt;
              &lt;/div&gt;&lt;!-- end example1 --&gt;
              &lt;a href="#" CLASS="close-notify" onclick="closeNotice()"&gt;X&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
               $("#message").fadeIn("slow");
               $('#example1').bxSlider({
                mode: 'slide',
                speed: 250,
                wrapper_CLASS: 'example1_container'
                });
              });
  
              function closeNotice() {
                  $("#message").fadeOut("slow");
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>bxSlider.js:</h2>
  
  <pre><code>/**
  *
  *
  * 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.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('&lt;a class="slider_prev" href=""&gt;&lt;img src="' + options.prev_img + '" alt=""/&gt;&lt;/a&gt;&lt;a class="slider_next" href=""&gt;&lt;img src="' + options.next_img + '" alt="" /&gt;&lt;/a&gt;');
          }else{
              $this.parent().append('&lt;a class="slider_prev" href=""&gt;' + options.prev_text + '&lt;/a&gt;&lt;a class="slider_next" href=""&gt;' + options.next_text + '&lt;/a&gt;');
          }
  
          $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('&lt;div class="' + options.wrapper_class + '"&gt;&lt;/div&gt;');
      //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();
              }
          }
      }
  }
  </code></pre>