Zero Clipboard

by ChristopherBurton

HTML

<script src="http://christopherburton.net/dev/ZeroClipboard.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H - Christopher Burton</title>
<script type="text/javascript" src="http://use.typekit.com/xne0bwe.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="http://v2.christopherburton.net/wordpress/wp-content/themes/murtaugh-HTML5-Reset-Wordpress-Theme-8aa6329/_/js/ZeroClipboard.min.js"></script>
</head>

<body class="postid-213">
<div id="page-wrap">
<div id="content">            
    <article class="main">
        <div id="slider">
            <img src="http://placehold.it/650x400" />
            <img src="http://placehold.it/650x400" /> 
            <img src="http://placehold.it/650x400" />            
        </div><!-- End Slider -->
    </article><!-- End Main Content -->

    <div id="sidebar">
    <h1 class="entry-title">H</h1>
        <div class="info">
            <p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        
<br>

        <ul id="process"><span>Process: </span></ul>

<br>

        <ul class="credits">
            <li><span>Typeface:</span> Custom <a href="http://www.myfonts.com/fonts/adobe/myriad/black-semi-ext/">Myriad Pro</a></li>
            
            <li class="shorturl"><span>Short Url: </span>
                <div id="d_clip_container">
                    <input id="fe_text" onChange="clip.setText(this.value)" value="chrisburton.me/6chary" />
                    <div id="d_clip_button" class="my_clip_button"></div>
                </div>
            </li>
            
            <li class="save"><span>Save:</span> <a class="gimmebar" href="#">Gimme Bar</a>
            </li>                
        </ul>
    
    ...

CSS

/*   
Theme Name: The HTML5 Reset Theme
Theme URI: http://html5reset.org
Description: A style-free theme to get you started on an HTML5-based Wordpress theme of your own.
Author: Monkey Do!
Author URI: http://monkeydo.biz
Version: 1
*/


html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}                                    

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
    don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
a:hover, a:active, a:focus {outline: 0; border: none;}
}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align:...

JavaScript

// Red Border is the hidden overlay button

// Blue Border is the short url text to display behind the button

// Pink Border is the alert text that tells the user it has been copied to the clipboard

// ===============================
// SLIDER
// ===============================

$(window).load(function() {
    var slides = $("#slider").children("img");
        currentIndex = 0,
        slideCount = slides.length,
        fadeDuration = 1000,
        navigation = $('#process'),
        navCnt = 0,
        navNumFix = 1;

    for (i = 0; i < slideCount; i++) {
    navigation.append('<li><a href="#" class="navItem" data="' + navCnt+++'">' + navNumFix+++'</a></li>&#32;');
    }
    $('.navItem').click(function () {
    var getNavId = $(this).attr('data');
    var prevIndex = currentIndex;
    currentIndex = getNavId;
    if (prevIndex != currentIndex) {
        $(slides[prevIndex]).fadeOut(fadeDuration);
        $(slides[currentIndex]).fadeIn(fadeDuration);
    }
    });
});


jQuery(function($){

    // ===============================
    // OUTBOUND LINKS IN NEW WINDOW
    // ===============================
    $('a[href^="http://"]')
        .not('[href*="localhost"]')
        .attr('target','_blank');

    // ===============================
    // ZERO CLIP
    // ===============================
    ZeroClipboard.setMoviePath( 'http://v2.christopherburton.net/wordpress/wp-content/themes/murtaugh-HTML5-Reset-Wordpress-Theme-8aa6329/_/flash/ZeroClipboard.swf' );
    var clip = null;

    function initZeroClip() {
        clip = new ZeroClipboard.Client();
        clip.setHandCursor( true );

        clip.addEventListener('mouseOver', function (client) {
            // update the text on mouse over
            clip.setText( $('#fe_text').get(0).value );
        });

        clip.addEventListener('complete', function (client, text) { 
            jQuery(".shorturl").append('<span class="alert">Copied!</span>');
            jQuery('.alert').fadeOut(1500); 
       ...