JSFiddle

  • Early Transition Excercise

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

    <button>
    Click 'ems
    </button>
    
    <br><br>
    <code>transition: [property] [duration] [delay] [timing-function];</code>
    
    <ul>
    <li>Property</li>
    <ul>
    <li>all</li><li>background</li>
    </ul>
    <li>Duration</li>
    <ul>
    <li>Seconds are typically written 0.2 or 0.8 ...</li></ul></ul>
  • Defer JS Loading Code

    Snippet of JS to setup deferring of js upon page load.

    var cb = function() {
      var l = document.createElement('link');
      l.rel = 'stylesheet';
      l.href = 'small.css';
      var h = document.getElementsByTagName('head ...
  • Nested toggle w/ jQuery Ui #1 is the latest revision

    Content that expands upon click inside other content that expands upon click.

    $(document).ready(function(){
        $("button").click(function(){
            $("nav").slideToggle(1200,"easeOutBounce");
        });
    });
    
    $(document).ready(function(){
        $(".way").click(function(){
            $(".now").toggle();
        });
    });
    
    
    
  • Nested toggle #2 is the latest revision

    Content that expands upon click inside other content that expands upon click.

    $(document).ready(function(){
        $("button").click(function(){
            $("nav").slideToggle();
        });
    });
    
    $(document).ready(function(){
        $(".way").click(function(){
            $(".now").toggle();
        });
    });
  • CSS Toggle #1 is the latest revision

    Demo of a :Check Hack

    <!-- source: http://clearleft.com/thinks/260 -->
    
    <div class="tooltip">  
      <input type="checkbox" value="selected" id="someID-1" class="tooltip-input">
      <label for="someID-1" class="tooltip-label">Tooltip +</label> 
      <div role="tooltip" id="tooltipID" class="tooltip-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum autem nemo, et odit officia ut illo provident fuga excepturi ...</div></div></!-->
  • weather widget

    api geolocation and weather

    
            $(function() {
               
               var status = $('#status');
               
               (function getGeoLocation() {
                    status.text('Getting Location...');
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(function(position) {
                            var lat ...
  • a simple smooth scroll setup (star)

    no external files required nice

     $(".scroll").click(function(event){
             event.preventDefault();
             //calculate destination place
             var dest=0;
             if($(this.hash).offset().top > $(document).height()-$(window ...
  • a smooth scroll setup #2 is the latest revision

    jQuery 1.7.2, HTML, CSS, JavaScript

     $(document).ready(function() {
    
          $('body').smoothScroll({
            delegateSelector: 'ul.mainnav a'
          });
    
          $('p.subnav a').click(function(event) {
            event.preventDefault();
            var link = this ...
  • Site Starter - Single Column Blog Roll

    Potential single page blog site layout draft.

    
    <article id="page">
    <header>
    
    <section id="intro">
    <div id="imgWrap">
      <img src="https://pbs.twimg.com/profile_images/674691175836684288/wIl5rwfc.png" alt="chris">
      </div>
      <div id="intro">
    Hello, I'm CMD. I write command-line script, strategize and execute copy, code, SEO and UX projects. How can I ...</div></section></header></article>
  • d'em old buttons #1 is the latest revision

    action hover setup

    <header>
      <ul>
      <a href="''"><li>one</li></a>
        <li>two</li>
      </ul>
    </header>
    
    <article>
    <div class="actionWrap">
    <div class="action">H</div>
    <div class="action">I</div>  
    <div class="action">J</div>
    </div>
    </article>
    
    <footer>End</footer>