super clipper test

super clipper test

by MikeGrace

CSS

#clippings {
    background-color: #c7c7c7;
    padding: 15px;
    font-family: helvetica;
    border-radius: 15px;
    opacity: .9;
    -webkit-box-shadow: rgb(46, 46, 46) 5px 5px 19px; 
    width: 400px;
    position: absolute;
    top:50%;
    left: 50%;
    height: 155px;
    margin: -77px 0 0 -200px;
}

#clippings h1 {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    padding: 0 0 10px 0;
    margin: 0;
}

#current-clipping {
    background-color: white;
    border-radius: 5px;
    padding: 7px;
    margin: 0;
    border: 1px solid #bbb;
    font-weight: normal;
    font-size: 14px;
    -webkit-box-shadow: inset 1px 1px 4px #5e5e5e;
    height: 100px;
    overflow: hidden;
}

JavaScript

var clips = ["These domain names are reserved for use in documentati", "ion and are not ava", "available for registra", " registrati", "not available fo", "able for r", "These domain names are reserved for use in documentation and are not available for registration. See RFC 2606, Section 3."];

    
  $("<div id='clippings' class='single-clipping-mode'><h1>Clipping <span id='clipping-index'>1</span></h1><div id='current-clipping'><div></div>")
    .appendTo(document.body);
  
  $(clips).each(function(index, element) {
    $("#current-clipping").append(element + "<br/>");
  });