小编Mar*_*der的帖子

如何将这个 SVG 水平居中.svg_wrapper？

.svg_wrapper {
  border: 1px solid grey;
  width: 200px;
}

<div class="svg_wrapper">
  <svg viewBox="0 0 600 425">
            <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 0,150 a 75,75 0 1,0 0,-150" fill="none" stroke="black" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000">
                <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze" />
            </path>
        </svg>
</div>

http://jsfiddle.net/frank_o/fj7Xc/

margin: 0 auto尝试过诸如、text-align: center以及 flexbox 之类的东西，但没有成功。

有没有人有一个很好的方法来添加*到所需的表单标签,而不必转向像SimpleForm这样的工具？

我不喜欢SimpleForm将所有这些奇怪的包装器和类添加到我的东西的方式.我认为SimpleForm的重点是允许你编写简单的语义形式ERB(它肯定会这样做) - 但不会同时通过随机添加包装器和类来搞乱现有的布局.在将它们带到Rails之前,我总是将我的表单设置为样式,所以我想告诉它使用哪些类,而不是相反.

扩展Pure CSS:在悬停文本上方的中心工具提示 - 如果工具提示比所述容器宽,如何使工具提示悬停在相对于其容器的中心？

http://jsbin.com/idudal/24/edit

IE浏览器.这(在哪里drag drag drag被切断):

应该显示为:

HTML:

<span id="test" class="drag-hint"><span>drag drag drag drag drag</span>Hover me</span>

CSS:

.drag-hint {
  position:relative;
  margin: 50px;
}
.drag-hint > span {
  background: black;
  color: white;
  white-space: nowrap;
  display:none;
}
.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

ruby-2.2.0有了chruby，为什么在工作中不会.ruby-version，而chruby ruby-2.2.0会呢？

% whoami
mark
% sudo su myapp
% cd /home/www/myapp/
% whoami
chruby: unknown Ruby: ruby-2.2.0
myapp
% cat .ruby-version
ruby-2.2.0
% which ruby
/usr/local/bin/ruby
% chruby ruby-2.2.0
% which ruby
/home/www/myapp/.rubies/ruby-2.2.0/bin/ruby 

Ruby on Rails 部署的完整记录：

https://gist.github.com/dt1973/7b99dfb75bd26e1e5ed7

jQuery Masonry的网站在其展示中包含Beyonce的网站:

http://iam.beyonce.com

但它没有显示她是如何实现自动调整大小的效果的.我通过美化器运行她的代码,但它看起来仍然非常混乱:

function resize() {
  1024 < $(window).width() ? 0 == headerNavOpen && $("#header").css({left:-$(window).width()}) : 0 == headerNavOpen && $("#header").css({left:-1024});
  $(".index .post.video").css({width:"33.2%", height:0.332 * $("#container").width() / 1.778})
}

有人知道一种更简单的方法来达到同样的效果吗？

这是一个基本设置的小提琴:http://jsfiddle.net/CfsEb/

我应该什么时候这样做:

$.test = {
  foo: function() {
    this.bar();
  },
  bar: function() {
  }
}

$.test.foo();

我应该什么时候这样做？

$.testFoo = function() {
  $.testBar();
}
$.testBar = function() {
}

$.testFoo();

使用jQuery animate(),我如何滑动每个图像一次(使用类似Slick.js的CSS动画)然后停在最后一个？

<div class="slideshow" style="height: 100px; width: 200px; overflow: hidden;">
    <img src="http://lorempixel.com/200/100" />
    <img src="http://lorempixel.com/200/101" />
    <img src="http://lorempixel.com/200/102" />
</div>

这显然不会起作用,但是:

var slide = $('.slideshow img'),
  delay = 500;

slide.each(function () {
    setTimeout(function () {
        $(this).animate({
            right: slide.width()
        });
    }, delay);
});

我在这里使用Slick,但我觉得这对我正在做的事情有点过分:

http://jsfiddle.net/frank_o/eku4Lwt1/2/

$('.slideshow').slick({
    slide: 'img',
    autoplay: true,
    autoplaySpeed: 3000,
    accessibility: false,
    arrows: false,
    infinite: false,
    pauseonhover: false,
    responsive: false,
    swipe: false,
    touchmove: false,
}); 

如何传递$(this).find('.option')和$(this).find('.prev_next')对Slick.js？以下产生:Syntax error, unrecognized expression: [object Object]:not(.slick-cloned) in jquery-2.1.0.js:1429

http://jsfiddle.net/frank_o/Lr30ngo1/4/

$('.test').each(function () {
    var option = $(this).find('.option'),
        prev_next = $(this).find('.prev_next');

    $(this).slick({
        slide: option,
        appendArrows: prev_next,
        prevArrow: '<a>Previous</a>',
        nextArrow: '<a>Next</a>'
    });
});

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>

<script …

有人知道为什么我不能让这个线性渐变淡出这个 div 的右侧吗？

• http://jsfiddle.net/yykv5mLz/
• http://colorzilla.com/gradient-editor/#ffffff+72,ffffff+100&0+72,1+100

.main a {
  display: inline;
}
.main {
  height: 50px;
  overflow-x: scroll;
  white-space: nowrap;
}
.fader {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+72,ffffff+100&0+72,1+100 */
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(72%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 1) 100%); …

类似于使用C#从日期,时间,价格创建OHLC数据,如何将基本贸易数据转换为OHLC(或开放,高,低,关闭)并将其应用于此独特案例？

var data = [{
    "tid": 283945,
    "date": 1384934366,
    "amount": "0.08180000",
    "price": "501.30"
}, {
    "tid": 283947,
    "date": 1384934066,
    "amount": "0.06110000",
    "price": "490.66"
},
...
];

function convertToOHLC(data) {
    // What goes here?
}
convertToOHLC(data);

这是小提琴:https://jsfiddle.net/5dfjhnLw/