JSFiddle

  • slider, touch enabled

    No-Library (pure JS), HTML, CSS, JavaScript

    
    
    
    
    $(document).ready(function() {
    Slider = $('#slider').Swipe({  
        auto: 3000,  
        continuous: false  
    }).data('Swipe'); 
    
    $('.next').on('click', Slider.next);  
    $('.prev').on('click ...
  • image w/ tinted background

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="tinted-image"></div>
  • Fixed position relative to page flow

    Mootools 1.4.4, HTML, CSS, JavaScript

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("#flip").hover(function(){
        $("#panel").stop().slideToggle("slow");
        $(".page").stop().animate({"margin-top":"120px"}, "slow")
        }, function() {
        $(".page").stop().animate ...</script>
  • shrinking nav #3 is the latest revision

    jQuery 1.6.2, HTML, CSS, JavaScript

    $(function(){
        $('#header_nav').data('size','big');
    });
    
    $(window).scroll(function(){
        var $nav = $('#header_nav');
        if ($('body').scrollTop() > 0) {
            if ($nav.data('size') == 'big ...
  • 2 Letterpress Examples #2 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    
    <div id="jazz">
    <h1>HERE IS HTE TITLE</h1>
    <p>And the accompaning text here goes.</p>
    </div>
    <br/>
    <div id="blues">
    <h1>HERE IS HTE TITLE</h1>
    <p>And the accompaning text here goes.</p>
    </div>
  • jquery tut

    lynda - first exercise

    
    
    $("document").ready(function() {
     //   $("p").css("border", "3px solid red");
    //    $(".selectors").css("border", "3px solid red");
    //           $("#intro").css("border", "3px solid ...
  • fixed top

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="page">
    <div id="container">
        <div id="top">
            <header>
                <nav>
                    <ul>
                        <a href="''"><li>jazz</li></a>
                        <a href="''"><li>blues</li></a>
                        <a href="''"><li>folk</li></a>
                    </ul>
                </nav>
            </header>
        </div>
        <div id="feat">
            <section>
                <img src="''" />
                <h1>WELCOME</h1>
                <p>Message of additional legneth size.</p>
            </section>
        </div>
    </div>
    </div>
  • Workshop Layout #2 #1 is the latest revision

    Recoding of Mobile-to-desk friendly layout.

    <div id="container">
        <div id="page">
            <header id="header" role="banner" class="clearfix">
                <img src="''" class="logo" />
                <nav role="menu">
                    <ul>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                    </ul>
                </nav>
            </header>
            <section id="feature">
                <figure>
                    <img src="''"/>
                </figure>
                <h1>HELLO SITE VISITOR</h1>
                <h2>Additional text to bring visitors into the mix, and explain the situation.</h2>
                <div id="fbg">
                <span class="button"><a href="''">Number ...</a></span></div></section></div></div>