Zipper

by secretgspot

HTML

<div id="zip" style="display: block; opacity: 1; ">
      <div class="container" style="">
        <div class="zip-close">
          <div class="closing" style="width: 170.5px; ">
              <img src="http://www.bagigia.com/img/zip-flap.png" alt="" class="ui-draggable" style="left: auto; ">
          </div>
        </div>
      </div>
    </div>

CSS

#zip{
  position: fixed;
  right: 0px; left: 0px;bottom: 25px;
  z-index: 9999;
  height: 53px;
}

#zip .container{
  position: relative;
  margin: 0 auto;
  width: 372px;
  height: 53px;
  background: transparent url(http://www.bagigia.com/img/zip-open.png) no-repeat;
}

#zip .container .zip-close{
  position: relative;
  width: 320px;
  height: 20px;
  top: 17px;
  left: 24px;
}

#zip .container .closing{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0%;
  height: 20px;
  background: transparent url(http://www.bagigia.com/img/zip-close.png) no-repeat;
}

#zip .container .closing img{
  position: absolute;
  top: 2px;
  right: -15px;
  cursor: col-resize;
}

JavaScript

var $window = $(window);
var $document = $(document);
var $zip = $('#zip');
var enableDrag = false;
var scrollStatus = 0;

$zip.css({
    opacity: 1
});

$zip.find('img').draggable({
    axis: 'x',       
    containment: [
      ($window.width() / 2) - (($('#zip .container').width() / 2) - 14),  //x1
      0,              //y1
      ($window.width() / 2) + (($('#zip .container').width() / 2) - 45),  //x2
      0                     //y2
    ],
        
        drag: function(event, ui) {
        var newWidth = (ui.position.left + ($zip.find('img').width() / 2));
        $zip.find('.closing').width(newWidth);
    },

    start: function(event, ui) {
        enableDrag = true;
    },

    stop: function(event, ui) {
        enableDrag = false;
        $zip.find('img').css({
            'left': 'auto'
        });
    }
    });