sliding Panel

sliding Panel & return toggle metod

by yoowordpress

HTML

<div class="cr-flip-panel">
    <div class="cr-flip-panel-icon">Х</div>
    <div class="cr-flip-panel-content">
<form action="" style="width: 400px;">
  <div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
</form></div>  
</div>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis quam ac ante mattis convallis fermentum a ipsum. Donec tincidunt tempor volutpat. Maecenas hendrerit tristique mauris, eu pellentesque augue porttitor ut. Mauris ut quam quis turpis lobortis condimentum in id ipsum. Suspendisse varius nunc non ipsum suscipit tempor. Praesent dictum lectus et sem iaculis varius. Maecenas scelerisque interdum mi molestie volutpat. Cras sit amet justo ac mi pellentesque egestas dictum bibendum velit. Duis adipiscing elementum laoreet. Nam nibh nunc, posuere quis venenatis non, luctus vitae tortor. Proin consectetur, lectus eu pretium sodales, nulla nunc varius massa, non gravida lacus mauris vitae nibh. Sed vel nulla id ipsum convallis aliquam. Ut ac laoreet velit. Nulla in metus at orci accumsan pharetra. Duis consectetur nisi eu nunc tincidunt tincidunt.

Etiam pretium dictum hendrerit. Cras vestibulum, sapien id imperdiet consequat, urna metus eleifend magna, ac elementum neque risus non orci. Fusce fermentum imperdiet fermentum. Proin eleifend lacus massa. Pellentesque sodales, ipsum in bibendum vestibulum, neque sapien elementum nisi, sed suscipit est enim quis risus. Aliquam tincidunt erat porttitor est porta hendrerit id et turpis. Vivamus luctus fermentum arcu, at malesuada arcu aliquam nec. Curabitur pellentesque tincidunt faucibus. Phasellus sed lobortis augue.

Praesent pharetra consequat velit cursus semper. In ut tellus a velit mollis sollicitudin. Donec lacus lacus, luctus id porta nec, porttitor a ligula. Donec congue dolor pharetra dui egestas, in tempor augue vehicula. Pellentesque habitant morbi tristique senectus et netus et...

CSS

.cr-flip-panel {
    width: 370px;
     position: absolute;
    margin-left:-320px
}
.cr-flip-panel-icon {
    background-color: #4679BD;
    float: right;
    height: 50px;
    width: 50px;
    cursor:pointer;
}
.cr-flip-panel-content {
    background-color: #F7F7F7;
    padding: 15px;
    text-align: justify;
    width: 290px;
}

/**
 * Farbtastic Color Picker 1.2
 * © 2008 Steven Wittens
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 */
.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 195px;
  height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 47px;
  left: 47px;
  width: 101px;
  height: 101px;
}
.farbtastic .wheel {
  background: url(wheel.png) no-repeat;
  width: 195px;
  height: 195px;
}
.farbtastic .overlay {
  background: url(mask.png) no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: -8px 0 0 -8px;
  overflow: hidden; 
  background: url(marker.png) no-repeat;
}

JavaScript

jQuery(document).ready(function($) {
/* возвращаем метод toggle */
$.fn.toggle = function () {
    var b = arguments;
    return this.each(function (i, el) {
        a = function () {
            var c = 0;
            return function () {
                b[c++ % b.length].apply(el, arguments)
            }
        }();
        $(el).click(a)
    })
};    
/* сам скрипт панели */
$(".cr-flip-panel-icon").toggle(
    function () {
       $('.cr-flip-panel').animate({"margin-left":"0"});
    },
    function () {
       $('.cr-flip-panel').animate({"margin-left":"-320px"});
  });
});

/**
 * Farbtastic Color Picker 1.2
 * © 2008 Steven Wittens
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 */

jQuery.fn.farbtastic = function (callback) {
  $.farbtastic(this, callback);
  return this;
};

jQuery.farbtastic = function (container, callback) {
  var container = $(container).get(0);
  return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback));
}

jQuery._farbtastic = function (container, callback) {
  // Store farbtastic object
  var fb = this;

  // Insert markup
  $(container).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>');
  var...