cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body class='tintColor'>
<div class='container-fluid tintColor'> 
  <div class=''>
    <div class='container'>
       <label id='quote'><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 生活的理想,就是为了理想的生活。</label>
      <label id='owner' style='float:right;'>- 张闻天</label>
      <div style="margin-top:50px;">
<!--         <a href="https://twitter.com/share" id="twitter-button" class="btn btn-primary twitter-share-button" style="float:left;" data-text="生活的理想,就是为了理想的生活。" data-size="large">Tweet</a> -->
        <a id="twitter-button" class="twitter-share-button"
  href="https://twitter.com/intent/tweet"
  data-size="large">
Tweet</a>

        <button type="button" class="btn btn-primary" style="float:right;" onclick="newQuote()">New quote</button>
      </div>
    </div>
    <div style=''>
      <label style='color:white; text-align:center; width:100%;margin-top:20px;'>by Eric</label>
    </div>
  </div>
  <div class='bottomFloat'>
    <label style='position:fixed;color:white;text-align:center; width:100%;'>Thanks <a href='http://glyphicons.com/'>Glyphicons</a></label>
  </div>
</div>
</body>
            
          
!
            
              .container {
  background-color: #FFFFFF;
  border-radius: 10px;
  margin-top: 156px;
  padding: 30px;
  width: 50%;
  float: center;
}

.tintColor {
  color:#333333;
/*   background-color: #333333; */
}

.bottomFloat {
  position: absolute;
  bottom: 20px;
}

#quote {
  font-family: 'Bookman Old Style', serif;
  font-size: 24px;
  width: 100%;
}

            
          
!
            
              var quotes = [
  {"quote":"生活的理想,就是为了理想的生活。", "owner":"张闻天", "color":"#003253"}, 
  {"quote":"没有理想的生活,路上就会耸着生活的墓碑。", "owner":"佚名", "color":"#533253"},
  {"quote":"人的强烈愿望一旦产生,就很快会转变成信念。", "owner":"爱·杨格", "color":"#702633"},
  {"quote":"一个没有受到献身的热情所鼓舞的人,永远不会做出什么伟大的事情来。", "owner":"车尔尼雪夫斯基", "color":"#502633"},
  {"quote":"在真理和认识方面,任何以权威者自居的人,必将在上帝的戏笑中垮台!", "owner":"爱因斯坦", "color":"#302633"}
];
var currentQuoteIndex = 0;
var twitterMsg = "生活的理想,就是为了理想的生活。";

// default tint color
$(".tintColor").css('background-color', '#003253');
$(".tintColor").css('color', '#003253');

function newQuote() {
  console.log('new quote.');
  
  var quote = nextQuote();
  
  var color = quote.color;
  $(".tintColor").css('background-color', color);
  $(".tintColor").css('color', color);
  
  var owner = quote.owner;
  $("#owner").html("- " + owner);
  
  var quoteInfo = quote.quote;
  $("#quote").html('<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> ' + quoteInfo);
  
  // update twitter msg
  twitterMsg = quoteInfo;
  console.log(twitterMsg);
  $("#twitter-button").target.href += "?text=" + urlencode(twitterMsg);
}

// $(document).ready(function() {
//   console.log( "ready!" );
//   document.getElementById('twitter-button').addEventListener('click', function (el) {
//     console.log(twitterMsg);
//     el.target.href += "?text=" + urlencode(twitterMsg);
//   });
// });

function nextQuote() {
  if (++currentQuoteIndex < quotes.length) {
    return quotes[currentQuoteIndex];
  } else {
    currentQuoteIndex = 0;
    return quotes[currentQuoteIndex];
  }
}

// twitter button
! function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    p = /^http:/.test(d.location) ? 'http' : 'https';
  if (!d.getElementById(id)) {
    js = d.createElement(s);
    js.id = id;
    js.src = p + '://platform.twitter.com/widgets.js';
    fjs.parentNode.insertBefore(js, fjs);
  }
}(document, 'script', 'twitter-wjs');

// youziku
$youzikuapi.asyncLoad("https://api.youziku.com/webfont/FastJS/yzk_59370BD35FF9B41C", function () { 
  $youziku.load("#quote", "ee66555c3f50419b859f9a730f7794f9", "lixukexingshu"); 
  $youziku.draw();  
});


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console