Intro Bar like Stack Overflow
<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>
