小编zaz*_*iki的帖子

仅使用css为禁用的输入设置样式

我有点奇怪的情况.我正在尝试设置一个禁用的输入按钮,因为我有一个恼人的悬停将文本转为白色.这使得用户感到困惑,因为它的作用就像普通按钮一样.

我尝试了一些东西,主要是css和一些jQuery的东西.如果可能的话,我想把它保存在CSS中.

这是我的HTML,对不起,它是一个简单的形式帮手.

{{ Form::submit('Change', array_merge($design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3'])) }}
Run Code Online (Sandbox Code Playgroud)

这就是浏览器生成的内容

<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change">
Run Code Online (Sandbox Code Playgroud)

而我正在做这样的事情

.btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{
  color:green
}
Run Code Online (Sandbox Code Playgroud)

任何帮助都会很精彩!

html css

26
推荐指数
2
解决办法
10万
查看次数

在thead上创建一个粘性标题

我有一个表可以在页面上变得很长,所以标题会丢失,所以我认为一个粘性标题会解决这个问题.向下滚动太远,标题仍在那里,让你知道字段是什么.

我知道用jQuery做粘贴头的传统方法,但我想用css尝试不同的方法.

我发现这个在网络上,它应该工作,但是我似乎无法让它做什么它应该是.

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 15px;
}
Run Code Online (Sandbox Code Playgroud)

和帮助将是伟大的或任何其他css技巧,以帮助这项工作将是伟大的.

我在这里设置了一个jsFiddel表示我的表格,这样你就可以很好地了解发生了什么.

html css3

13
推荐指数
2
解决办法
2万
查看次数

Bootstrap 3在输入字段内放置图标

我在Bootstrap 3工作,我试图在输入框的右侧获得一个日历图标.

我的HTML看起来像这样:

<div class="col-md-12">
    <div class='right-inner-addon col-md-2 date datepicker' 
         data-date-format="yyyy-mm-dd">
        <input name='name' value="" type="text" class="form-control date-picker"
               data-date-format="yyyy-mm-dd"/>
        <i class="fa fa-calendar"></i>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我试过position: absolute这样的:

.right-inner-addon i {
    position: absolute;
    right: 5px;
    top: 10px;
    pointer-events: none;
    font-size: 1.5em;
}
.right-inner-addon {
    position: relative;
}
Run Code Online (Sandbox Code Playgroud)

但是当我这样做时,它会在一个地方看起来很棒,但在另一个实例中不能正确定位.

我也试着看看我是否可以用它text-indent来看看它是否会起作用,但它有同样的效果.

.right-inner-addon i, 
.form-group .right-inner-addon i {
    display: inline-block;
    z-index: 3;
    text-indent: -15px;
    font-size: 1.3em;
}
Run Code Online (Sandbox Code Playgroud)

这是一个可能有帮助的jsFiddle

css twitter-bootstrap font-awesome glyphicons twitter-bootstrap-3

11
推荐指数
2
解决办法
6万
查看次数

屏蔽社会安全号码输入

对于Web应用程序,我构建隐私非常重要,用户输入数据的格式也是如此.

为了帮助解决这个问题,我已经插入了一个jquery库来帮助掩盖字段http://igorescobar.github.io/jQuery-Mask-Plugin/

但是,我似乎无法掩盖社会安全号码.例如,格式很好地通过567-78-7890,但我似乎无法弄清楚如何掩盖或隐藏前四个数字......如* - -7890.

我的html只是一个输入字段

<input class='social' />
Run Code Online (Sandbox Code Playgroud)

我用这个插件尝试将其屏蔽为

$('.social').mask('000-00-0000');
Run Code Online (Sandbox Code Playgroud)

这只是提供格式

$('.newsocial').mask('xxx-xx-0000');
Run Code Online (Sandbox Code Playgroud)

这只会替换他们用x输入的数字.

我还设置了一个jsFiddle帮助 http://jsfiddle.net/w2sccqwy/1/

任何帮助都会很精彩!

PS我无法使用密码字段,因为必须向用户显示最后四个数字,并且我不能有多个字段.这是公司的要求.我不能像我想的那样改变公司的要求.

javascript jquery

11
推荐指数
1
解决办法
3万
查看次数

d3在饼图上显示数字而不是百分比

我正在绘制一个图表,以显示有多少人完成了我们的应用程序以及有多少人未能完成所有步骤.为此,我的公司决定使用库d3来显示图表.但是,在饼图上他们想要显示整数而不是默认百分比,我似乎无法找到任何关于此的文档.

我的代码看起来像这样

 c3.generate({
      bindto: '.pieChart',
      data: {
       columns: [
           ['Started', Started],
           ['Completed', Completed]
        ],
           type: 'pie'
       }
   });
Run Code Online (Sandbox Code Playgroud)

任何帮助,将不胜感激!

javascript d3.js c3

10
推荐指数
1
解决办法
7665
查看次数

ie11下载Base64文档

我在这一点上已经尝试了很多东西而且我无法获得任何工作.

我需要ie从附件面板下载base64文档.我无法访问服务器端代码或数据库.图像无法存储在要拉出的文件夹中,需要以这种方式呈现.

我尝试使用普通链接并将base64 sting粘在那里,它只是打开一个新的空白窗口.

<a target="_blank" download class="btn btn-primary downloadAttachment" href="' + blobUrl + '" >Download</a>
Run Code Online (Sandbox Code Playgroud)

我尝试将网址转换为blob打开blob,导致浏览器无法执行任何操作.

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = base64Data;
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - …
Run Code Online (Sandbox Code Playgroud)

javascript base64

10
推荐指数
1
解决办法
1848
查看次数

打开Bootstrap手风琴后滚动到内容

我有一个Bootstrap手风琴,里面有很多面板.我面临的问题是,如果面板打开页面,用户不知道面板是打开的,他们可以向下滚动到它.

为了解决这个问题,我希望能够滚动到现在打开的内容,这样他们就知道内容是打开的,并且可以防止它们滚动到它.

当我试图尝试这个时,我似乎遇到了问题.

这就是我的功能

$('.accLink').on('click', function(){
  if($(this).parent().next('.panel-collapse').hasClass('in')){

  }else{
   //This is where the scroll would happen
  }
});
Run Code Online (Sandbox Code Playgroud)

到目前为止我试过......

$('html, body').animate({
  scrollTop: ($(this).parent().next('.panel-collapse'))
  },500);
Run Code Online (Sandbox Code Playgroud)

$('div').animate({
  scrollTop: ($(this).parent().next('.panel-collapse'))
  },500);
Run Code Online (Sandbox Code Playgroud)

我也试过这样的事......

function scrollToElement(ele) {
    $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left);
}

var element = $(this).parent().next('.panel-collapse').attr('id');
scrollToElement($('#'+element));
Run Code Online (Sandbox Code Playgroud)

但是没有对页面做任何事情.它只是坐在那里.任何帮助,将不胜感激!

jquery twitter-bootstrap

9
推荐指数
1
解决办法
9564
查看次数

向下滚动时自举固定标题

我在bootstrap的核心管理结构中工作,并在页面顶部有一个主标题,然后在它下面有一个子标题.我试图允许该子标题在用户向下滚动时固定到页面顶部,这样他们总能看到该信息,但我遇到了一些麻烦.

我想坚持顶部的部分看起来像这样.

<div class="area-top clearfix" >
  <div class="pull-left header">
    <h3 class="title"><i class="icon-group"></i>Dashbord</h3>
  </div><!--.header-->
  <ul class="inline pull-right sparkline-box">
    <li class="sparkline-row">
      <h4 class="blue"><span> Cover Designs</span> 4</h5>
    </li>
    <li class="sparkline-row">
      <h4 class="green"><span> Video Trailers</span> 5</h5>
    </li>
    <li class="sparkline-row">
      <h4 class="purple"><span> Web Banners</span> 5</h5>
    </li>
  </ul>
</div><!--.area-top-->
Run Code Online (Sandbox Code Playgroud)

到目前为止,我已经尝试将其包装在另一个div中navbar navbar-fixed-top.但是它将它直接射到了顶部并重叠了需要看到的内容.

我还尝试通过添加position:fixed;到当前div来使用普通css ,但这会弄乱我放在它下面的breadcrubms因为它将它从流中取出.

无论如何只用css完成这个.我知道我可以用jquery做一个hack,但在我的团队中,我只负责css.

css twitter-bootstrap

8
推荐指数
1
解决办法
1万
查看次数

Bootstrap模式中带链接的远程内容

我在一个正在加载远程内容的网站上有一堆Bootstrap模式窗口.这很完美.但是,我的老板告诉我,这些模态中的链接无法进入新页面,必须在模态窗口中重新加载.

我尝试了一些没有运气的事情.

首先,我在模态中有模态链接

<a data-toggle='modal' class='modalBox' data-target='#largeModal'
href='link here'>Link</a>
Run Code Online (Sandbox Code Playgroud)

此链接不起作用,Bootstrap.js抛出此错误..

TypeError: 'undefined' is not a function (evaluating 'b.preventDefault()')
Run Code Online (Sandbox Code Playgroud)

所以我尝试将Id更改为我在页面上的另一个模态窗口,它确实弹出已经存在的模态窗口.这不完全是我需要的,但很有希望.

有没有办法解决这个问题,以便内容可以加载到同一个模态窗口中?

jquery twitter-bootstrap

8
推荐指数
1
解决办法
4004
查看次数

增加字体真棒图标

我对一些字体很棒的图标有点麻烦.我试图增加其中一些的大小,但由于某种原因,我似乎没有做任何工作.

这是我的HTML

<div class="span5 bookBuild">
 <div class="well well-small">
   <h4>Build your Book!</h4>
   <div class="span2">
      <i class="icon-file icon-large"></i>
   </div><!--span2-->
   <div class="span9">
      <p>This is a paragraph</p>
    </div><!--span9-->
    <p class="clearfix"></p>
   </div><!--well-->
 </div><!--span5-->
Run Code Online (Sandbox Code Playgroud)

我试图添加,因为你可以看到icon-large类和icon-2x类.没有icon-2x- icon-4x正在运作.

我也试过定位特定的图标,然后增加字体大小,如 font-size: 3em;

任何帮助都会很棒!

html css twitter-bootstrap font-awesome

7
推荐指数
3
解决办法
1万
查看次数