JSFiddle

  • Fixed sidebar alongside a centered Bootstrap 3 grid

    Minimal code to have a fixed sidebar outside a Bootstrap 3 grid.

    // using Bootstrap CDN libraries
    
    // http://stackoverflow.com/questions/20557912/creating-a-fixed-sidebar-alongside-a-centered-bootstrap-3-grid
    
  • Embed Tweets Using Twitter widgets.js #32 is the latest revision

    Using createTweet(), programmatically embed multiple tweets on page. Finds all divs with a tweet class and id that contains a valid twitter ID and places an iframe within the div.

    // based on http://ctrlq.org/code/19933-embed-tweet-with-javascript
    
    	var tweets = jQuery(".tweet");
    	
    	jQuery(tweets).each( function( t, tweet ) { 
    
        var id = jQuery ...
  • 2015 Women's World Cup Countdown Clock

    Simple countdown clock to the 2015 Women's World Cup

    // https://mindgrader.com/tutorials/1-how-to-create-a-simple-javascript-countdown-timer
    
    // set the date we're counting down to`
    var target_date = new Date("Jun 6, 2015 ...
  • Share Options Drop-Down Menu

    Proof of concept using jQuery UI of a drop down menu that features sharing tools.

    $(".share-btn").button();
    
    $(".share")
        .mouseenter(function () {
        $(".social")
            .toggleClass("reveal");
    })
        .mouseleave(function () {
        $(".social")
            .removeClass("reveal");
    });
  • Michigan Publishing Branded Footer

    Example HTML and CSS for the footer of a partner's hosted web page. In this example, they are publishing a book with the University of Michigan Press, an imprint of Michigan Publishing.

    <div class="footer">
        
        <div class="col ump"> 
    <a href="http://www.press.umich.edu" title="University of Michigan Press"><img src="http://publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/ump-footer.png" alt="The University of Michigan Press Home Page"/></a>
        </div>
        
        <div class="col text">
        <p>Product of <a href="http://www.publishing.umich.edu">Michigan Publishing</a>, <a href="http://www.lib.umich.edu/">University of Michigan Library</a>  <span class="bull">&#8226;</span>  <a href="mailto:mpublishing@umich.edu">mpublishing@umich.edu</a>  <span class="bull">&#8226;</span> ISBN 978-0-472-XXXXX-X</p>
        </div>
            
        <div class="col mpub"> 
            <a href="http://www.publishing.umich.edu" title="Michigan Publishing"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/mpub-footer.png" alt="Michigan Publishing"/></a>
        </div>
        
    </div>
  • Michigan Publishing Branded Footer

    Example HTML and CSS for the footer of a partner's hosted web page. In this example, they are publishing a book with the Digital Rhetoric Collaborative which is under the Michigan Publishing imprint.

    <div class="footer">
        
        <div class="col drc"> 
            <a href="http://digitalrhetoriccollaborative.org" title="Digital Rhetoric Collaborative"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/drc-footer.png" alt="Digital Rhetoric Collaborative"/></a>
        </div>
        
        <div class="col text">
        <p>Product of <a href="http://www.publishing.umich.edu">Michigan Publishing</a>, <a href="http://www.lib.umich.edu/">University of Michigan Library</a>  <span class="bull">&#8226;</span>  <a href="mailto:mpublishing@umich.edu">mpublishing@umich.edu</a>  <span class="bull">&#8226;</span> ISBN 978-0-472-XXXXX-X</p>
        </div>
            
        <div class="col mpub"> 
            <a href="http://www.publishing.umich.edu" title="Michigan Publishing"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/mpub-footer.png" alt="Michigan Publishing"/></a>
        </div>
        
    </div>
  • Saksaha Logo w/ Mark

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

    <!-- Questrial -->
    <!-- <p class="questrial">Questrial</p> -->
    <div class="masthead"> <a href="#" title="Saksaha: A Journal of Manchu Studies">
            <div class="mark"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/getuken-120px.png" height="115px" alt="Saksaha logo"/></div>
            <div class="logo questrial">Saksaha</div>
        <div class="subtitle lato questrial_spacing">
        <h1>A Journal of Manchu Studies</h1>
        </div>
        </a>
    
    </div>
    <div class="masthead"> <a href="#" title="Saksaha: A Journal of Manchu Studies">
             <div class="mark"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/cover-120px.png" height="100px" alt="Saksaha logo"/></div>
            <div class="logo questrial" style="margin-left: 10px;">Saksaha</div>
        <div class="subtitle lato questrial_spacing" style="margin-left: 10px;">
        <h1>A Journal of Manchu Studies</h1>
        </div>
        </a>
    
    </div>
  • 2014 World Cup Countdown Clock #96 is the latest revision

    Simple countdown clock to the 2014 World Cup

    // https://mindgrader.com/tutorials/1-how-to-create-a-simple-javascript-countdown-timer
    
    // set the date we're counting down to`
    var target_date = new Date("Jun 12, 2014 ...
  • SLOW

    Landing page for slowlistening.org

    <div class="slow">
        <h1>SLOW</h1>
        <h2>coming soon</h2>
    </div>
  • Saksaha Logo

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

    <!-- Questrial -->
    <p class="questrial">Questrial</p>
    <div class="masthead">
        <a href="#" title="Saksaha: A Journal of Manchu Studies">
            <div class="logo questrial">Saksaha</div>
        <div class="subtitle lato questrial_spacing">
        <h1>A Journal of Manchu Studies</h1>
        </div>
        </a>
    </div>
    
    <!-- Lato 700 -->
    <p class="lato700">Lato 700</p>
    <div class="masthead">
        <a href="#" title="Saksaha: A Journal of Manchu Studies">
            <div class="logo lato700">Saksaha</div>
        <div class="subtitle lato lato700_spacing">
        <h1>A Journal of Manchu Studies</h1>
        </div>
        </a>
    </div>
    
    
    <!-- Muli 400 -->
    <p class="muli400">Muli</p>
    <div class="masthead">
        <a href="#" title="Saksaha: A Journal of Manchu Studies">
            <div class="logo muli400">Saksaha</div>
        <div class="subtitle lato muli400_spacing">
        <h1>A Journal of ...</h1></div></a></div></!--></!--></!-->