Vysouvání

Vysouvání (Slide Out and In):

  • funkce slideToggle()
  • funkce animate()
    • ​vysunutí zespodu nahoru
      • <!-- Slide Toggle -->
        <div class="slide-toggle">
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      • /**
        * Slide Toggle
        */
        var jQuery = jQuery.noConflict();
        jQuery("document").ready(function($){
          var toggle = $('.slide-toggle');
          $(toggle).click(function(){
            if(toggle.css("bottom") == "0px") {
              toggle.animate({bottom: "-60px"}, 1000);
            } else {
              toggle.animate({bottom: "0px"}, 1000);
            }
            return false;
          });
        });
      • /**
        * Slide Toggle
        */
        .slide-toggle {
          position: fixed;
          bottom: -60px;
          left: 60%;
          z-index: 99;
          margin: 0;
          height: 300px;
          cursor: pointer;
        }
    • boční vysunutí
      • přidána detekce RTL, upraven směr a přidáván (odebíran) CSS styl
      • <div id="block-block-2">
          <h2 class="block-title">Announcement Area</h2>
          <div class="content">
            <p>Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
      • /**
        * Slide Toggle
        */
        $('#block-block-2 .block-title').click(function(){
          if ($("body").css("direction").toLowerCase() == "rtl") {
            if($("#block-block-2").css("right") == "-170px") {
              $("#block-block-2").animate({right: "0"}, 1000);
              $("#block-block-2").addClass('in');
            } else {
              $("#block-block-2").animate({right: "-170px"}, 1000);
              $("#block-block-2").removeClass('in');
            }
          } else {
            if($("#block-block-2").css("left") == "-170px") {
              $("#block-block-2").animate({left: "0"}, 1000);
              $("#block-block-2").addClass('in');
            } else {
              $("#block-block-2").animate({left: "-170px"}, 1000);
              $("#block-block-2").removeClass('in');
            }
          }
          return false;
        });
      • /**
        * Slide Toggle
        */
        #block-block-2 {
          position: absolute;
          top: 100px;
          left: -170px; /* LTR */
          width: 200px;
        }
        #block-block-2 .block-title {
          position: absolute;
          left: 70px; /* LTR */
          top: 99px;
          width: 228px;
          height: 30px;
          line-height: 27px;
          cursor: pointer;
          text-align: center;
          font-weight: normal;
          font-size: 16px;
          background: #ff0000;
          color: #fff;
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -o-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          writing-mode: lr-tb;
          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }