DylanLacey/gist:1199528

## gistfile1.html
<html>
  <head>
    <title>Slide Example</title>
    <style>
      .viewport {
        position: relative;
        overflow: hidden;
        width: 150px;
        height: 200px;
        border: 1px solid maroon;
      }

      .box {
        position: absolute;
        width: 150px;
        height: 200px;

        /* All just message formatting. */
        color: white;
        font-weight: bold;
        text-align: center;
      }

      .box p {
        margin: 10px;
        margin-top: 50%;
        font-family: Tahoma;
        font-size: 15px;
      }

      #green {
        top: 0px;
        background-color: darkgreen;
      }

      #red {
        left: 150px;
        background-color: red;
      }

    </style>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript">

      var COUNTER = 1;

      var StatusBox = {
        boxes: ['#green', '#red'],
        currentBox: 0,
        zIndex: 100,
        sliding: false,
        update: function (message) {
          if (!StatusBox.sliding) {
            StatusBox.sliding = true;

            var currentBox = $(StatusBox.boxes[StatusBox.currentBox]);
            var boxIndex = StatusBox.currentBox ? 0 : 1;
            var box = $(StatusBox.boxes[boxIndex]);
            StatusBox.currentBox = boxIndex;

            box.html("<p>" + message + "</p>");
            box.animate({left: 0}, 1500, function () {
              currentBox.hide().css({zIndex: StatusBox.zIndex++, left: 150}).show();
              StatusBox.sliding = false;
            });
          }
        }
      };

    </script>
  </head>
  <body>
    <div class="viewport">
      <div class="box" id="green"><p></p></div>
      <div class="box" id="red"><p></p></div>
    </div>
    <p>
      <a href="#" onclick="StatusBox.update('Updated status of counter = ' + (COUNTER++)); return false;">Update Status</a>
    </p>
  </body>
</html>
	<html>
	<head>
	<title>Slide Example</title>
	<style>
	.viewport {
	position: relative;
	overflow: hidden;
	width: 150px;
	height: 200px;
	border: 1px solid maroon;
	}

	.box {
	position: absolute;
	width: 150px;
	height: 200px;

	/* All just message formatting. */
	color: white;
	font-weight: bold;
	text-align: center;
	}

	.box p {
	margin: 10px;
	margin-top: 50%;
	font-family: Tahoma;
	font-size: 15px;
	}

	#green {
	top: 0px;
	background-color: darkgreen;
	}

	#red {
	left: 150px;
	background-color: red;
	}

	</style>
	<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
	<script type="text/javascript">

	var COUNTER = 1;

	var StatusBox = {
	boxes: ['#green', '#red'],
	currentBox: 0,
	zIndex: 100,
	sliding: false,
	update: function (message) {
	if (!StatusBox.sliding) {
	StatusBox.sliding = true;

	var currentBox = $(StatusBox.boxes[StatusBox.currentBox]);
	var boxIndex = StatusBox.currentBox ? 0 : 1;
	var box = $(StatusBox.boxes[boxIndex]);
	StatusBox.currentBox = boxIndex;

	box.html("<p>" + message + "</p>");
	box.animate({left: 0}, 1500, function () {
	currentBox.hide().css({zIndex: StatusBox.zIndex++, left: 150}).show();
	StatusBox.sliding = false;
	});
	}
	}
	};

	</script>
	</head>
	<body>
	<div class="viewport">
	<div class="box" id="green"><p></p></div>
	<div class="box" id="red"><p></p></div>
	</div>
	<p>
	<a href="#" onclick="StatusBox.update('Updated status of counter = ' + (COUNTER++)); return false;">Update Status</a>
	</p>
	</body>
	</html>