Tomáš Daněk

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);
      }