Parallax

Parallax efekt – obrázky a video na pozadí:

• Implement a Simple Parallax Effect

  • jQuery(document).ready(function($) {
        // Set the background-attachment for body to "fixed" so that
        // we can control it's scroll speed.
        $('body').css('background-attachment', 'fixed');
    
        // Attach a function to watch the window.scroll event, and
        // move the background image slower than the content scroll.
        $(window).scroll(function () {
            document.body.style.backgroundPosition = "0px " + (0 – (Math.max(document.documentElement.scrollTop, document.body.scrollTop) / 4)) + "px";
        });
    });

• Wordpress
  • Super Simple jQuery Parallax Background
  • Dante – Responsive Multi-Purpose WordPress Theme 
• Drupal
  • HTML5 parallax effect with Drupal
• Další
  • Skrollr
  • sequencejs.com/themes/sliding-horizontal-parallax
  • github.com/IanLunn/jQuery-Parallax
  • pixelcog.github.io/parallax.js
  • github.com/flesler/jquery.scrollTo

Příklad parallax efektu: wwws.superfish.com

Plovoucí blok - Skyscraper

julianware.com/jquery-scroll-follow-sticky-fixed-sidebar 

• // Float block + Sticky navigation
  $(function() {
    scrollPoint       = 100,             // Distance to scroll before sticking
    topPadding        = 100,             // Fixed minimum distance from top of window
    bottomPadding     = 40,              // Adjustment to scrolling element point of deactivation at footer
    $window           = $(window),
    documentHeight    = $(document).height(),
    $sticky           = $('.float-block'),    // Scrolling element
    $footer           = $('footer'),     // Footer container
    $sidebar          = $('.content'),      // Sidebar Container
    sidebarHeight     = $sidebar.outerHeight(),
    footerHeight      = $footer.outerHeight(),
    offset            = $sticky.offset(),
    stop       = sidebarHeight - $sticky.height() - 15,
    $menu = $('#main-menu');
  });
  function floatBlock() {
    if (($window.scrollTop() > offset.top - scrollPoint) && ($window.scrollTop() < (documentHeight - footerHeight) - sidebarHeight + bottomPadding)) {
      if (($window.scrollTop() - offset.top + topPadding) < stop) {
        $sticky.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding},0);   // Last number is drag animation duration     
      }
      else {
        $sticky.stop().animate({marginTop: stop},0);
      }
      $menu.addClass('affix'); // Sticky navigation
    } else {
      $sticky.stop().animate({marginTop: 0},0);   // Input same drag animation duration as above
      $menu.removeClass('affix'); // Sticky navigation
    }
  }
  $(window).scroll(function(){
    floatBlock();
  });

Plovoucí (floating div) SkyScraper reklama

• respektuje výchozí umístění od horního okraje
• nepřekryje obsah patičky
• pohyb obsahuje efekt animace

JS:

$(document).ready(function(){
  var skyscraperAd = $("#skyscraper");
  var skyscraperOffset = skyscraperAd.offset().top;
  var skyscraperBottom = $("#footer").offset().top – skyscraperAd.height();
  $(window).scroll(function() {
    skyscraperAd.stop();
    var windowTop = $(window).scrollTop();
    if (windowTop > skyscraperOffset) {
      if (windowTop > skyscraperBottom) windowTop = skyscraperBottom;
      if (windowTop < 0) windowTop = 0;
      skyscraperAd.animate({top: windowTop + 'px'}, 'fast');
    } else
      skyscraperAd.animate({top: skyscraperOffset + 'px'}, 'fast');
  });
});

CSS:

#skyscraper {
  position: absolute;
  top: 300px;
  left: 50%;
  margin-left: 500px;
  width: 120px;
  height: 600px;
}

Plovoucí blok respektující obklopující prvek (např. postranní sloupec – sidebar)

• respektuje rozměry obklopujícího prvku
• Demo viz příloha

JS:

/**
 * Sticky element in the wrapper on scroll
 */
var jQuery = jQuery.noConflict();
jQuery("document").ready(function($){ 
  $(window).scroll(function () {
    var sticky = $(".sticky");
    var wrapper = $(".wrapper");
    var top = $(window).scrollTop();
    var wrapperTop = wrapper.offset().top;
    var wrapperBottom = wrapperTop + wrapper.height();
    var normalPosition = wrapperBottom - sticky.height();
    if (wrapperTop < top && normalPosition > top) {
     sticky.addClass("sticky-top");
      sticky.removeClass("sticky-bottom");
    } else {
      sticky.removeClass("sticky-top");
      if (wrapperBottom > top && normalPosition < top) {
        sticky.addClass("sticky-bottom");    
     } else {
        sticky.removeClass("sticky-bottom");
     }
    }
  });
});

CSS:

/**
 * Sticky element in the wrapper on scroll
 */
body {
  min-height: 2000px; /* optional */
}
.wrapper {
  position: relative;
  height: 300px; /* optional */
  background: #eee; /* optional */
}
.sticky {
  width: 300px; /* optional */
  background: #ccc; /* optional */
}
.sticky-top {
  position:fixed;
  top: 0;
}
.sticky-bottom {
  position: absolute;
  bottom: 0;
}

Akordeon

Efekt rozbalování s sbalování obsahu využívající jQuery rozšíření Collapser.

Demo viz přiložený archiv akordeon.zip.

Zjednodušenou variantou (samozřemě vyžaduje jQuery knihovnu) může být také:

<!-- show-hide -->
<script type="text/javascript">
  $(document).ready(function() {
    $('.show-hide').hide();
    $('a.toggle_link').click(function() {
      $(this).next('div.show-hide').toggle();
      return false;
    });
  });
</script>

Kdy se po kliku na odkaz:

<a href="#" class="toggle_link">Více</a>

Skryje obsah elementu s třídou .show-hide:

<div class="show-hide">...</div>

Dynamické chování

jQuery Waypoints

• Sticky Elements
• Infinite Scroll
• Dial Controls
• Scroll Analytics

Dynamické rozmístění obsahu

Masonry automaticky "skládá" obsah stránky dle volného místa (jQuery).

Columnizer umožňuje zalomit dlouhý úzký obsah do více sloupců (jQuery).

Google API

Google Maps Marker Animations

• ukázka: znamylekar.cz/chirurg/praha 
• příklad "hover" animace

Grafické efekty

jQuery Flat Shadow – vržený stín

Intro Loader

factory.brainleaf.eu/jqueryIntroLoader

Obtékání textu okolo obrázku

http://www.jwf.us/projects/jQSlickWrap/

Odpočet

Odpočítávání času:

• jquery countdown
• 25+ Cool jQuery Countdown Scripts – Add Dynamic Timers!

Ovládání pomocí klávesnice

• Jquery-spinner - ovládání číselných polí pomocí klávesnice

Posun obsahu (scrolling)

• SimplyScroll v2 (20 efektů včetně RTL)
  • Manual Vertical scrolling

Slider

Posuvník (JqueryUI Slider) se používá pro změnu číselných hodnot v určitém rozsahu.

Výhodou posuvníku je, že všechny zvolené hodnoty jsou platné (brání vložení chybné hodnoty).

Příklady:

• Multiple sliders

Slideshow

jQuery Slideshow podporující dotyková gesta.

Stejná výška prvků

Pokud potřebujete zajistit na stránce stejnou výšku některých prvků (tj. zjistit maximální výšku a nastavit ji u všech ostatních) jistě se Vám bude hodit níže uvedené řešení.

1. Do stránky připojte jQuery knihovnu, skripty jquery.equalHeights.js a jquery.pxem.js (převod z px na em v em-based layoutech) skripty obsažené v arichvu eaualheights.zip.
   

     ...
     <meta http-equiv="content-script-type" content="text/javascript" />
     <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
     <script type="text/javascript" src="jquery.equalHeights.js"></script>
     <script type="text/javascript" src="jquery.pxem.js"></script>
     <script type="text/javascript" src="jquery.settings.js"></script>
   </head>
   <body>
     ...

2. Vytvořte soubor jquery.settings.js s níže uvedeným obsahem a upravte požadované selektory dle potřeb (skript se spustí automaticky po načtení celé stránky):
   

   $(document).ready(function(){
     // vyber selektoru
     $("#box1, #box2, .boxes ... etc.").equalHeights({ relative: true });  
   });

Další možnosti:

• CSS Demo of Equal Height Columns - Full Cross-Browser CSS. No CSS Hacks. No Images. No JavaScript.
• Unify Heights

• /*
  * Unify Heights
  *
  * <div id="container">
  *   <div id="sidebar"></div>
  *   <div id="content"></div>
  * </div>
  *
  *//*
  $(function() {
    function unifyHeights() {
      var maxHeight = 0;
        $('#container').children('#sidebar, #content').each(function() {
          var height = $(this).outerHeight();
          // alert(height);
          if (height > maxHeight) {
            maxHeight = height;
          }
        });
      $('#sidebar, #content').css('height', maxHeight);
    }
    unifyHeights();
  });

• Resize iFrame to Fit Content (Same Domain Only)
• iframe Auto Adjust Height as content changes

• /*
  * iframe Auto Adjust Height as content changes
  *
  * <div id="main">
  *   <div id="navigation"></div>
  *   <div id="content">
  *     <iframe></iframe>
  *   </div>
  * </div>
  *
  * html, body, #main {
  *   margin: 0;
  *   padding: 0;
  *   height: 100%;
  * }
  *
  */
  $(function() { 
    // Resize iFrame Height to Fit Content
    function ResizeIframe() {
      var mainHeight = $('#main').outerHeight();
      var navHeight = $('#navigation').outerHeight();
      var contenHeight = mainHeight - navHeight;
      $('iframe').css('height', contenHeight);
    }
    // Resize
    ResizeIframe();
    // Try to change the iframe size every 2 seconds
    setInterval(function() {
      ResizeIframe();
    }, 2000); 
  });

Text a odkazy

Práce s textem (odstranění, úprava, vložení):

$(document).ready(function(){
  $('#block-1 .text').remove();
  $('#block-1 .title').text('Nadpis');
  $('#block-1 .link').append('<a href="#">Odkaz</a>');
});

Příklad úpravy URL adresy:

$(document).ready(function(){
  $('#block-1 .content a').each(function(){
    $(this).attr('href', 'http://www.myweb.cz' + $(this).attr('href'));
  });
});

Změna velikosti textu zvoleného prvku:

• jFontSize – jque.re/plugins/effects-ui/jfontsize

Twitter

Zobrazení příspěvku zvoleného uživatele:

• coda.co.za/content/projects/jquery.twitter

Validace formuláře

• Validate – jqueryvalidation.org
• Validity – validity.thatscaptaintoyou.com

Trvalé zobrazení hlavní navigace pomocí jQuery a CSS

Ukázka Fixed menu on scroll (soubory ke stažení).

Zdroj:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta charset="utf-8" />
    <title>Fixed menu on scroll</title>
    <meta name="description" content="How to make fixed menu on scroll with jQuery and CSS" />
    <meta name="keywords" content="fixed,menu,scroll" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/fixed-menu-on-scroll.js"></script>
   
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
   <div class="header">Brand</div>
   <div class="main-menu">
     <ul class="clearfix">
      <li><a href="#">Home</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">CSS</a></li>
     </ul>
    </div>
    <h1>Fixed menu on scroll</h1>
    <p>Make fixed menu on scroll with jQuery and CSS.</p>
  </body>
</html>

jQuery:

/**
* Fixed menu on scroll
*/
var jQuery = jQuery.noConflict();
jQuery("document").ready(function($){

var nav = $('.main-menu');

$(window).scroll(function () {
   if ($(this).scrollTop() > 110) {
     nav.addClass("fixed");
    } else {
     nav.removeClass("fixed");
    }
  });
});

CSS:

/**
* Fixed menu top on scroll
*/
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

Upozornění a dialog

Modální upozornění:

• $("#alert").hover(
    function() {
      alert("Your book is overdue.");
    }
  );

Modální upozornění vytvořené pomocí jQuery Dialog:

• // Inserting modal information message when clicking on the link
    $('#dialog a').click(function(event) {
      var link = $(this).attr('href');
      // create message
      $(this).append('<div id="message" title="AKCE">Výprodej!</div>');
      // show message as dialog
      $(function() {
        $("#message").dialog({
          modal: true,
          resizable: false,
          buttons: {
            Ok: function() {
            // close dialog
            $(this).dialog("close");
            // execute a link
            location.href = link;
          }
        }
      });
    });
    // stop link execution
    return false; //event.preventDefault();
  });
  

• Příklad CSS

• .ui-dialog .ui-widget-header {
    background: #ffb321;
    color: #7f3300;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  .ui-dialog .ui-button {
    background: #d6007f;
    color: #fff;
    box-shadow: none;
  }

Další možnosti:

• jAlert
• jConfirm
• jPrompt
• Apprise v2
• jReject: jQuery Browser Rejection
• jQuery MSG Plugin
• Subscriber Traffic Pop
• WowWindow Plugin
• jQuery-toastmessage-plugin
• jPopIt Plugin
• SimpleModal
• Freeow

Video

Fullscreen Video Slideshow with BigVideo.js

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

Zvýraznění obrázkové mapy

Efekt grafického zvýraznění obrázkové mapy využívající jQuery rozšíření Map Hilight.

• ukázka obrázkové mapy reagující i na události odkazů v menu

Řazení dat v tabulce

Pomocí jQuery pluginu TableSort je možné řadit data v tabulce dle záhlaví:

• detekce typu dat (datum, číslo atd.)
• současné řazení více sloupců (klávesa Shift)