小编Cai*_*ifa的帖子

我有一个小挑战,我没有在Stack Overflow上找到任何解决方案.

这就是我得到的:

这就是我喜欢它的方式:

为了产生这种标题效果,我正在使用绝对位置.我甚至不知道标题的宽度和高度.因此,使用此解决方案时大文本会中断.

我的HTML:

<div class="content">
  <h1 class="title">February 2015</h1>
  <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>

我的CSS:

.content { …

我正在学习CSS3的动画/过渡,但在这段代码中过渡不起作用......为什么？

HTML:

<div id="test">
</div>

CSS:

#test {
    background-color: #333;
    background-image: -webkit-linear-gradient(top, #333, #666);
    width: 100px;
    height: 100px;
    -webkit-transition: background 1s linear;
}

#test:hover {
    background-image: -webkit-linear-gradient(top, #666, #999);
}

http://jsfiddle.net/LLRfN/

我使用这个脚本在Rails 3.2.8应用程序中使用HTML5 FormData上传文件(逐个).

http://jsfiddle.net/RamPr/

$('.uploader input:file').on('change', function() {
  $this = $(this);

  $('.alert').remove();

  $.each($this[0].files, function(key, file) {
    $('.files').append('<li>' + file.name + '</li>');

    data = new FormData();
    data.append(file.name, file);

    $.ajax({
      url: $('.uploader').attr('action'),
      contentType: 'multipart/form-data',
      type: 'POST',
      dataType: 'json',
      data: data,
      processData: false
    });
  });
});

但是当我上传文件时,我在控制台中收到此错误:

webrick/server.rb:191:in `block in start_thread' ERROR ArgumentError: invalid %-encoding ("filename.jpeg" Content-Type: image/jpeg

我该如何解决这个错误？

我不知道萨斯是否能够做到这一点,但问问题并没有什么坏处.

问题

基本上我有三种颜色模式,在应用的多个部分重复,比如blue,green和orange.有时是组件background-color或border-color组件的变化......有时是color子元素的文本等.

我在想什么？

1.替换内容中的字符串模式.

.my-class {
  @include colorize {
    background-color: _COLOR_;

    .button {
      border-color: _COLOR_;
      color: _COLOR_;
    }
  }
}

2.为.提供回调变量@content.

// This is just a concept, IT DOESN'T WORK.
@mixin colorize {
  $colors: blue, green, orange;

  @each $colors in $color {
    // ...
    @content($color); // <-- The Magic?!
    // ...
  }  
}

// Usage
@include colorize {
  background-color: $color;
} …

我正在尝试使用ScrollSpy Bootstrap插件,但它无法正常工作.请参阅下面的代码,它始终突出显示最后一项.

http://jsfiddle.net/bRYMC/

<nav id="navbar">
  <ul class="nav">
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
    <li><a href="#page3">Page 3</a></li>
    <li><a href="#page4">Page 4</a></li>
    <li><a href="#page5">Page 5</a></li>
  </ul>
</nav>

<div data-spy="scroll">
  <section id="page1" class="page">
    <h1>Page 1</h1>
  </section>

  <section id="page2" class="page">
    <h1>Page 2</h1>
  </section>

  <section id="page3" class="page">
    <h1>Page 3</h1>
  </section>

  <section id="page4" class="page">
    <h1>Page 4</h1>
  </section>

  <section id="page5" class="page">
    <h1>Page 5</h1>
  </section>
</div>

你能救我吗？

我需要将Imperavi Redactor与Amazon S3集成.但是,我希望我的RubyOnRails应用程序能够执行上传过程,而不是JavaScript,我已经使用了fog,carrierwave和imperavi-rails.

你能帮助我吗？

以下是资源:

JSON

{
  "badges":{
    "unlocked": [
      {"name": "Win 1"},
      {"name": "Win 2"},
      {"name": "Win 3"}
    ],
    "locked":[
      {"name": "Lose 1"},
      {"name": "Lose 2"},
      {"name": "Lose 3"}
    ]
  }
}

算法

{{ if_has_badges }}
<div class="badges">
  <h1>Badges</h1>

  {{ if_has_badges_unlocked }}
    <div class="badges-unlocked">
      <h2>Unlocked!</h2>
      {{ loop_badges_unlocked }}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
      {{ end_loop_badges_unlocked }}
    </div>
  {{ end_if_has_badges_unlocked }}

  {{ if_has_badges_locked }}
    <div class="badges-locked">
      <h2>Locked!</h2>
      {{ loop_badges_locked }}
      <a href="#" class="badge">
        <strong>{{ name }}</strong>
      </a>
      {{ end_loop_badges_locked }}
    </div>
  {{ …

好的,所以将preventDefault放在我的提交按钮上可以阻止表单提交.这样做的结果是它不会告诉用户必需的字段,只是在按钮上执行click事件.

将preventDefault添加到提交处理程序会向用户显示必需的字段,但仍会触发与该按钮关联的单击事件.

我需要两个.

<form action="" method="post">
  <input type="text" class="class" id="id" name="name" required="required" />
</form>

现在js:

$("button").click(function(event){
  event.preventDefault();
  //performs function
});

无论所需的表单输入如何,这都将触发click事件.

$("form").submit(function(event){
  event.preventDefault();
});
$("button").click(function(){
  //performs function
});

这将向用户显示所需的消息,但仍然执行提交按钮功能.我怎么做两个？我已经查看了其他一些我可以在此找到的SO问题,但似乎最多可以通过将preventDefault添加到form.submit来解决.

我正在尝试一些疯狂的东西,我想实现一个Instagram功能:两次点击喜欢.

所以,我正在使用最新版本的jQuery和Hammer.js.我不是高级专业人士,但我试图编写一个JavaScript代码来识别哪个事件.

var postDoubleTapped;
postDoubleTapped = false;

Hammer($('.post').get(0)).on('doubletap', function(event) {
  event.preventDefault();
  postDoubleTapped = true;

  console.log('Double tap!');
  return false;
});

$(document).on('click', '.post a', function(event) {
  event.preventDefault();
  console.log(postDoubleTapped);

  setTimeout((function(_this) {
    return function() {
      if (!postDoubleTapped) {
        location.href = $(_this).attr('href');
      }
      postDoubleTapped = false;
    };
  })(this), 500);
  return false;
});

正如您在示例(http://codepen.io/caio/pen/vqEjc)上看到的那样,它不起作用.控制台返回:

还有一个问题,我无法_blank在a标签上重现目标.

这是更好的方法吗？我是正确的吗？我该如何解决？

我正在使用该clip-path属性来塑造我的块元素。

clip-path: polygon(0 0, 100% 0, 100% 100px, 50% 100%, 0 100px);

我想在该元素中添加一个“阴影”。因此，我尝试了一些技术，例如：

box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);

要么...

filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));

在CodePen上查看我的测试环境。

CSS或SVG是否可能？