小编fun*_*dry的帖子

Internet Explorer盒子模型 - 什么是偏移量?

我正在尝试调整一个站点以支持IE 7.但是我有一些元素,它们向右偏移了69px.我在IE9中进行测试,设置为将页面呈现为IE7.当我打开开发人员模式并检查元素时,我注意到"边缘"周围有一个名为"offset"的参数.

我之前从未听说过这一点,谷歌搜索并没有帮助我 - 我只是设法找到一些关于浮动偏移的东西,这是不一样的,但我认为它是在那里消除一些怪癖模式的问题?如何消除此偏移参数?

显然我已经设置了IE-7特定样式表,您可以通过此链接访问我的测试环境来自行测试问题:

http://suitable.amok-adhoc.com/2012/

解决了:

找到了解决方案 - 非常简单.只需要明确地声明这样的位置(尽管它是从所有其他浏览器中的父元素继承的,IE添加了一个边距并称之为"offset",这样做会被覆盖):

p {
    left:0px;
}
Run Code Online (Sandbox Code Playgroud)

css internet-explorer offset internet-explorer-7

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

位置:在reveal.js中修复

我正在尝试为我的reveal.js演示文稿制作一个标题,它位于屏幕顶部.标题中的内容在每个幻灯片的基础上是动态的,因此我必须将标记放在section标记内.

显然,如果标记位于section标记内,则position.js中的position:fixed实际上并不能提供令人满意的结果.我无法弄清楚为什么会这样,但我在github repo中发现了一些信息,建议将显示大小设置为适合视口大小:

Reveal.initialize {
    ...
    width: '100%',
    height: '100%',
    ...
}
Run Code Online (Sandbox Code Playgroud)

但它仍然不适合我 - 似乎演示文稿并没有真正受到上述影响.这是一个演示:

https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/reveal.js/index.html

任何想法如何解决这个问题?

position fixed reveal.js

17
推荐指数
2
解决办法
2923
查看次数

如何使用TextWrangler中的grep用逗号替换换行符?

我有一个文本文件容器有很多行,我需要把它变成一个csv.用","替换所有换行符的最简单方法是什么.我有TextWrangler并且读过它会通过使用grep和正则表达式来实现,但是使用正则表达式的经验很少,并且不知道grep是如何工作的.有谁可以帮助我开始?

regex textwrangler grep line-breaks

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

React 在 Redux 中存储 Ref 元素

您会如何在 Redux 中存储 Ref 元素?您会这样做吗?

我有一个包含一些表单元素的组件,如果用户离开页面并返回,我需要存储用户在表单中选择的字段的状态。

我尝试像这样在 Redux 中注册每个输入字段(我使用的<InputGroup>是 Blueprint.js 中的组件):

<InputGroup
  inputRef={(ref) => { dispatch(addRefToState(ref)) }}
  ...more props...
/>
Run Code Online (Sandbox Code Playgroud)

这导致了循环 JSON 引用错误,因为 Redux 正在将 ref 元素序列化为 JSON,以便将其保存到 localStorage。然后,我尝试使用我在 Stackoverflow 上找到的代码片段对对象进行“安全”字符串化,在将对象转换为 JSON 之前删除所有循环引用。这种方法可行,但 Ref 元素仍然很大,以至于存储在状态中的 3-5 个引用变成了 3MB 的 localStorage,并且我的浏览器开始变得非常慢。此外,我担心我是否可以实际使用该 Ref 对象来引用我的组件,因为我基本上修改了 Ref 对象。我还没有尝试过,因为字符串化对象的性能非常差。

我正在考虑放弃“React 方式”,只在每个组件上添加唯一的 ID,将这些 ID 存储在 Redux 中,并使用 document.querySelector 迭代 DOM,以便在加载页面时聚焦到正确的元素。但感觉就像是黑客攻击。你会怎样做呢?

reactjs react-redux react-ref

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

AngularJS如何在多列中动态拆分列表

我有很多li项目,我想在3个不同的列中均匀分布.所以我需要在第一个ul中显示列表项的前三分之一,在第二个ul中显示下一个三分之一等.

知道我的方法有点静态:

<ul class="small-12 medium-4 columns">
  <li ng-repeat="skill in skills.development | slice:0:10">
    {{ skill.name }}
  </li>
</ul>
<ul class="small-12 medium-4 columns">
  <li ng-repeat="skill in skills.development | slice:10:21">
    {{ skill.name }}
  </li>
</ul>
<ul class="small-12 medium-4 columns">
  <li ng-repeat="skill in skills.development | slice:21:32">
    {{ skill.name }}
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我在模板中创建了3行,然后创建了一个自定义过滤器,用于切割列表,这样我就可以获得前11个元素,接下来的11个元素等等.问题是每个ul中的行数不是动态分配的,如下所示:

Math.ceil(skills.development.length / 3)
Run Code Online (Sandbox Code Playgroud)

因此,如果我有更多的元素,我将不得不手动更改行数.过滤也是一个问题.想象一下,我搜索第一列中有5个匹配而第二列中有一个匹配的单词.那么我的柱尺寸会完全不均匀.当我过滤列表时,应该动态重新计算长度.

理想情况下,不仅动态计算列中的行数,还会计算列数.因此,如果有超过15个元素,它应该呈现三列,但如果只有10个元素,则2列将看起来更好(因为每个元素中只有5个元素).如果少于5个元素,则只渲染一列.

我想我应该尝试在视图中解决它,或者做一些类似于我已经编写的自定义过滤器函数的辅助函数.但是我该怎么做呢?

angularjs

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

如何使用正则表达式将 EU 数字格式转换为 JavaScript 数字

我正在尝试将欧盟格式的货币金额(例如 1.243,51(等于美国格式的 1,243.51))转换为 javascript 中的数字(即 1243.51)。

\n\n

我设法找到了大量尝试做非常相似事情的例子,但我无法适应它。看来我需要使用正则表达式,我对它不太了解,但我设法找到了一些几乎可以完成任务的建议。我发现一个正则表达式将“,”替换为“.”。以及删除“.”的一个。我想我必须分两步完成,但问题是删除“.”的步骤也会截断点后面的数字。这是我到目前为止想到的:

\n\n
function usToEuCurrencyFormat(input) {\n    var output = input.replace(/\\./g, \'\');          //Removes dots\n    output = input.replace((/,([^,]*)$/, ".$1"));   //Replaces commas with dots\n    return parseFloat(output);\n}\n
Run Code Online (Sandbox Code Playgroud)\n

javascript regex currency-formatting

5
推荐指数
1
解决办法
4202
查看次数

无法推送到heroku - bundler失败

git push heroku master使用以下消息进行捆绑程序失败时,我正在尝试将我的rails项目推送到heroku位:

   Bundler Output: Fetching gem metadata from https://rubygems.org/.........
   Fetching additional metadata from https://rubygems.org/..
   Fetching git://github.com/justinfrench/formtastic.git
   Fetching git://github.com/activerecord-hackery/ransack.git
   Fetching git://github.com/gregbell/active_admin.git
   Could not find jwt-0.1.12 in any of the sources
!
!     Failed to install gems via Bundler.
!

!     Push rejected, failed to compile Ruby app

To git@heroku.com:murmuring-mountain-9361.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'git@heroku.com:murmuring-mountain-9361.git'
Run Code Online (Sandbox Code Playgroud)

似乎jwt是我的一个宝石的依赖,但它在我的本地环境中安装得很好.我尝试gem 'jwt', '0.1.12'在我的gemfile中明确声明,这在本地工作正常,但在heroku上没有,我尝试删除Gemfile.lock并再次生成它.我甚至尝试删除heroku上的app实例并再次创建它.

以下要点是我的gemfile:https://gist.github.com/anonymous/84d3fc00566e036729cd

我在开发环境中使用这个流浪盒:https: …

git deployment ruby-on-rails heroku

4
推荐指数
1
解决办法
855
查看次数

Rails 4.x如何使用activerecord查询布尔值?

我对我的模型"特权"做了一个布尔"猜测",我试图让所有有猜测的客户得到真实.

我的第一个猜测是:

@customer = Customer.includes(:perks).where('perks.guessed = true')
Run Code Online (Sandbox Code Playgroud)

但这给了我一个SQL异常:"没有这样的列:true"

一些谷歌搜索给了我这个线程:Rails - 如何基于布尔字段进行搜索?(MySQL错误)

所以我尝试过:

@customer = Customer.includes(:perks).where('perks.guessed = 1')
Run Code Online (Sandbox Code Playgroud)

没运气...

还尝试过:

@customer = Customer.includes(:perks).where('perks.guessed LIKE, ?', 'true')

@customer = Customer.includes(:perks).where('perks.guessed = t')
Run Code Online (Sandbox Code Playgroud)

使用activerecord中的where-statement查询布尔值的正确方法是什么?

我在dev和Postgres上使用SQLite来生产btw.

activerecord boolean where-clause ruby-on-rails-4

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

在视频结束之前在javascript中触发事件

我有一个视频,我淡入,玩约.25秒,淡出,等待30秒,然后再次淡入.我在视频结束后使用以下内容触发播放:

$('.header-video').get(0).onended = function(e) {
  $(this).fadeOut(200);

  setTimeout(function(){
    playVideo();
  },8000);
}
Run Code Online (Sandbox Code Playgroud)

问题是在视频实际停止播放之前不会开始淡入淡出,所以我想知道是否有一些聪明的方法可以在视频结束前几秒钟获得一个事件?(可能不是)

或者,我可以只对视频进行计时并触发定时事件,但也许这里有人可以想到一些很酷的魔法,这使我能够以更动态的方式进行操作,而不必手动计算视频.

javascript video jquery

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

在jQuery集合上运行reduce()

我正在开发一个应用程序,并且我有一个DOM对象集合,我想对它们的合并宽度进行求和。我想为此使用reduce()功能。

包含jQuery集合的变量被调用menuItems,我的尝试如下所示:

menuItems.toArray().reduce((total, item) => total += item.clientWidth);
Run Code Online (Sandbox Code Playgroud)

但是奇怪的是,该函数返回以下输出:

// "http://localhost:3000/97689982"
Run Code Online (Sandbox Code Playgroud)

这等效于字符串中第一个元素外并置在一起的所有宽度。

运行类似的东西会menuItems.toArray()[0].clientWidth正确输出第一项的宽度。

jquery ecmascript-6

2
推荐指数
1
解决办法
35
查看次数

无法在 iOS Safari 上预加载第一个视频帧?

我有一个简单的 HTML5 视频嵌入,在 iOS 上加载时显示一个空白(白色)帧。在桌面浏览器(包括 Safari)和 Android 上,会显示视频的第一帧。

我知道您可以通过设置明确的海报图像来避免这种情况,但我希望我可以避免必须设置转码服务来提取视频的第一帧。我知道 Apple 可能选择了这条路线来限制移动用户的带宽使用,但在这种情况下,设置转码服务只是过度。

我打得周围的预紧力属性,但没有将其设置为 autometadata作品。有没有其他方法可以在没有用户交互的情况下显示视频的第一帧?

这是我正在说明问题的笔的链接。

https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr

这是代码如何分别在 iOS 模拟器(在真实硬件上相同)和 Chrome 中呈现的屏幕截图。

html safari video mobile-safari ios

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

尝试在 React 中调度按键事件

我有一个带有输入元素的组件,我想在该输入元素上触发“选项卡”按键事件,以便在发生一组特定逻辑时跳转到下一个输入元素。

我在第一个输入元素上有一个引用,我正在尝试触发按键事件,如下所示:

useEffect(() => {
  if (ref.current) {
    ref.current.focus();
    setTimeout(() => {
      ref.current.dispatchEvent(
        new KeyboardEvent("keypress", { key: "Tab" })
      );
    }, 3000);
  }
});
Run Code Online (Sandbox Code Playgroud)

首先,我确保使用 选择第一个输入元素.focus(),然后 3 秒后我触发按下 Tab 键,期望看到焦点移动到下一个字段,但它似乎不起作用。

这可能看起来是一个奇怪的例子,但这只是一个原型。我实际上打算做的是,当我提交第一个输入字段时触发一些代码,这将获取一些带有附加输入字段的行,一旦呈现,我需要触发“tab”键。我想避免将引用附加到这些动态加载的输入字段,因为我觉得这会增加大量开销来跟踪引用并将其向下传递,而我所需要的只是利用选项卡顺序并模拟按键来选项卡到加载后第一个动态加载的项目。我可以向您需要提交以填充动态字段的字段添加单个引用。

我注意到一些在线.dispatchEvent()直接调用 ref 对象的例子,但是如果我尝试这样做,我会收到一条错误消息,告诉我该函数不存在,所以我在 prop 上调用它current。不确定这是否有任何相关性。

以下是上述代码取自的原型链接:https://codesandbox.io/s/wizardly-hopper-vrh4w ?file=/src/App.js:149-441

javascript keyevent reactjs react-ref

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

使用 P-Queue 节点模块对 Promise 进行排队

我正在使用 node-fetch 向 Amazon 存储桶发出 HEAD 请求以检查文件的状态,但我正在尝试设置模块P-Queue以控制并发性。

我有一个数组,resources包含我的所有数据,包括要在该存储桶中检查的文件路径。然后像这样映射数组:

resources.map((resource) => {
    queue
        .add(validateImage(resource))
        .catch((err) => console.error(`Failed to add resource to queue: ${err}`));
});
Run Code Online (Sandbox Code Playgroud)

这就是我的validateImage函数的样子:

const validateImage = (resource) => {
    const path = `https://${bucketUrl}/${env}/${resource.path}`;
    verbose && console.log(`Fetching resource: ${path}`);
    return fetch(
        path,
        {
            method: 'HEAD',
            timeout
        }
    )
    .then(res => {
        validatedResources.push({
            ...resource,
            statusCode: res.status
        });
    })
    .catch(err => {
        validatedResources.push({
            ...resource,
            error: err.type
        });
    });
}
Run Code Online (Sandbox Code Playgroud)

但是每当我运行这个脚本时,我都会收到错误 Failed to add resource to queue: …

javascript node.js

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