小编Jam*_*ves的帖子
旋转木马外面的Bootstrap Carousel控件
我试图将我的Bootstrap Carousel控件推到图像之外,但我似乎遇到了一些问题.我已经能够通过设置来让他们出来的图像width: 0%;上.carousel-controls,但问题是它不能完全反应,似乎左侧的控制更接近比右侧控制图像.
这样做的正确方法是什么？我觉得我走错了路.
#myCarousel {
margin-left: 30px;
margin-right: 30px;
}
.item img {
margin-left: auto;
margin-right: auto;
}
.selected img {
opacity:0.5;
}
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
.carousel-control.left,
.carousel-control.right {
background: none;
border: none;
}
.carousel-control.left {
margin-left: -45px;
}
.carousel-control.right {
margin-right: -45px;
}
.carousel-control {
width: 0%;
}
.glyphicon-chevron-left, .glyphicon-chevron-right {
color: grey;
font-size: 40px;
}
这是一个JSFiddle:https://jsfiddle.net/guhx5sjL/1/
推荐指数
解决办法
查看次数
强制模块模拟在测试中抛出错误
我想要测试的函数中有一个 try/catch 块。两个函数都调用同一个execute函数，如果抛出错误，则会捕获该函数。我的测试设置为在顶部附近模拟模块，然后我可以验证调用 jest 函数的次数。
我似乎无法弄清楚如何强制 execute在第二次测试中抛出错误，然后返回到默认的模拟实现。我尝试在单独的测试中重新分配 jest.mock 但它似乎不起作用。
import {execute} from '../src/execute'
jest.mock('../src/execute', () => ({
execute: jest.fn()
}))
describe('git', () => {
afterEach(() => {
Object.assign(action, JSON.parse(originalAction))
})
describe('init', () => {
it('should stash changes if preserve is true', async () => {
Object.assign(action, {
silent: false,
accessToken: '123',
branch: 'branch',
folder: '.',
preserve: true,
isTest: true,
pusher: {
name: 'asd',
email: 'as@cat'
}
})
await init(action)
expect(execute).toBeCalledTimes(7)
})
})
describe('generateBranch', () => { …推荐指数
解决办法
查看次数
匹配 VSCode 中的精确单词
我正在 VSCode 中对某些 CSS 类进行查找和替换，并且在匹配单词 时遇到以下问题row。它找到row成功，但我试图避免它也匹配诸如row-label. 有没有一种方法可以匹配仅包含诸如row和 之类的字符串.row？
推荐指数
解决办法
查看次数
固定位置的滚动弹跳
当您在滚动条中到达页面时，页面上会附加一个固定元素。该元素有时可以在其上方但不能在其下方具有内容，这意味着页面深度可能不足以支持这种行为，因为这会阻止用户到达页面底部并导致页面跳动，大概是因为它在修复时从滚动中删除了元素，这导致滚动事件函数中的条件不再为真。发生这种情况时，gif会显示不希望的效果。
在此小提琴中演示：https：//jsfiddle.net/dcsjx625/8/
这些页面是动态的，因此无法消除单个页面的影响。
<body>
<div class="header">
<img src="http://placehold.it/600x401">
</div>
<div class="content-parent">
<div class="content">
<img src="http://placehold.it/600x400">
<img src="http://placehold.it/600x400">
<img src="http://placehold.it/600x400">
</div>
</div>
<div class="footer-content">
Footer
</div>
</body>
jQuery的：
var $stickyChainOffset = $('.content').offset();
var $stickyChain = $('.content');
var $fixedWidth = $('.content').parent().width();
function checkScroll() {
if ($(window).scrollTop() > $stickyChainOffset.top - 100) {
$stickyChain.css('position', 'fixed').css('top', '100px').css('max-width', $fixedWidth);
} else {
$stickyChain.css('position', 'static').css('max-width', 'initial');
}
};
$(window).scroll(function() {
checkScroll();
});
/* Updates the $fixedWidth variable on resize */
$(window).resize(function() {
$fixedWidth = …推荐指数
解决办法
查看次数
使用 Google Chrome Headless 模式强制执行屏幕截图分辨率
当 Nightwatch 和 Chrome 以无头模式启动时，我遇到了问题。我已经设置了一个脚本来截取我的页面的屏幕截图，稍后我将与该屏幕截图进行比较，以找出它们之间的区别。我遇到的问题是，根据运行我的脚本的机器，屏幕截图总是不同的，因为它们的分辨率不同。
这是 Nightwatch 在我的配备视网膜显示屏的 Mac 上捕获的屏幕截图。
这是运行相同脚本时在 CircleCI 中捕获的一个：
在无头模式下启动 Chrome 时，有没有办法强制执行屏幕分辨率？我曾与其他库（例如 Puppeteer）合作过，它似乎在各个方面都是一致的。窗口宽度/高度始终受到尊重，但实际图像的大小才是导致问题的原因。
以下是 Nightwatch 配置文件中的启动设置：
"chrome_launch" : {
"launch_url" : "https://localhost:8000",
"globals" : {
"abortOnAssertionFailure": false,
"env" : "local"
},
"desiredCapabilities": {
"chromeOptions" : {
"args" : ["window-size=1280,2480", "headless", "disable-gpu", "hide-scrollbars"]
},
"resolution": "1440x900"
}
}
任何帮助将不胜感激。
推荐指数
解决办法
查看次数
为什么要选择'2019-05-03':: timestamp-'2018-05-07':: timestamp <'1 year 1 day':: INTERVAL; 在PostgreSQL中返回FALSE？
我正在尝试比较两个日期，TRUE如果第一个日期比第二个日期少，则返回“ 1年1天”。
使用361天而不是'1 year 1 day'会返回FALSE，但这基于justify_interval（'360 days':: interval）结果为'1 year'的原因。
但是当我跑步时
SELECT '2019-05-03'::timestamp - '2018-05-07'::timestamp < '1 year 1 day'::INTERVAL;
我得到了FALSE，当我跑步时
SELECT '2019-05-03'::timestamp - '1 year 1 day'::INTERVAL < '2018-05-07'::timestamp;
我懂了TRUE。
为什么这些返回不同的东西？
推荐指数
解决办法
查看次数
何时以及何时不使用role =“ button”
在可访问性方面，有人可以向我描述屏幕阅读器和键盘用户a <button>和a 之间的区别<a>吗？据我所知，键盘用户可以使用ENTER和SPACE激活按钮，而仅ENTER用于锚标记。在单页应用程序中，我感觉这些元素的角色有些混乱，我不确定这两者之间的界限在哪里。
看起来像链接的按钮
在我的应用程序中，我具有链接的通用样式，该类的名称为simple .link。
在第一个示例中，我有一个带有onclick处理程序的按钮，该按钮在同一页面上执行操作，因此我为其使用了button元素。但是在样式上看起来像一个链接。
<button class="link" onclick={(e) => console.log('Do the thing')}>This is a link</button>
如果角色被颠倒并且链接的行为像传统的锚点一样，则由于单击而导致路线发生变化，我将执行以下操作：
<a class="link" href="/route/change">This is a link</a>
即使由于所应用的类而使两者看起来相同，但应否应用锚标记示例，role="button"即使其样式像链接一样，其行为也像按钮一样？对于在整个应用程序中具有可访问性需求的用户来说，保持这些样式元素之间的一致性更好，还是更好地进行互换，从而不管元素的样式如何，都可以根据元素的应用程序将角色应用于该样式元素。
彼此相邻的两个“按钮”
跟进第一个问题。如果<a>标记的定义是将您移动到其他页面/锚点，则应将两个执行不同任务的并排按钮都视为按钮。
以以下示例为例，确认按钮在同一页面上执行操作，而取消按钮将您带回到上一页。
代码看起来像这样：
<button onclick={() => console.log('do a thing'}>Confirm</button>
<a href="/home">Cancel</a>
role="button"来自MDN的定义如下：
按钮角色应用于当用户激活时触发响应的可单击元素。添加role =“ button”将使元素显示为屏幕阅读器的按钮控件。该角色可以与aria-pressed属性结合使用以创建切换按钮。
即使取消按钮在技术上不符合角色定义的方式，也应该应用按钮角色吗？
闭幕
关于何时应该使用这些角色以及何时不应该使用这些角色，是否有更简洁的指南？如果将role="button"任何/所有使用相同样式的链接与<button>元素互换使用，是否有任何危害？还是锚标记和角色永远不要混合使用，无论它们在样式上看起来是否类似于其他元素类型？
感谢您的阅读。我试图认真对待可访问性，但似乎找不到针对此场景的用例的任何清晰明了的规范。
推荐指数
解决办法
查看次数
在Bootstrap Carousel上设置最大高度
我试图在Bootstrap轮播上强制执行最大高度.我们的想法是,任何太高的图像都会在左右两侧出现黑条,因此它可以保持其纵横比而不会将页面拉得太远.被泵入旋转木马的内容通常会有不同的高度,这就是我想要这样做的原因.
目前在我的Carousel中,大约1024x768的图像看起来很好,但是如果放入一大块内容,它会在底部被截断,占据下方图像标题的位置并仍然将底部拉伸.
.carousel {
width: auto;
max-height: 768px;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.carousel {
/* Pushes out the margins on mobile devices so it lines up with the article body. */
margin-left: -20px !important;
margin-right: -20px !important;
width: inherit !important;
}
}
.carousel:hover {
visibility: visible;
color: white;
bottom: 17%;
}
.carousel .carousel > .carousel-control {
visibility: hidden;
}
.carousel .carousel-control {
visibility: visible;
color: white;
}
.carousel .carousel-inner {
background-color: #000000;
}
.carousel .carousel-caption …推荐指数
解决办法
查看次数
使用环境变量部署到 Heroku 按钮
我想向托管在 GitHub 上的应用程序添加一个“部署到 Heroku”按钮，但唯一的问题是它需要运行环境变量，并且需要用户输入它们才能工作。app.json模式中有没有办法在安装之前提示用户进行设置？或者我最好的选择是将它们设置为标准字符串，例如“replace_me”并告诉用户从那里在我的自述文件中输入他们的数据。
我看到你可以在他们的文档中生成一个“秘密”，但我不确定这是否是我正在寻找的。
推荐指数
解决办法
查看次数
计算段落内的字符
你如何计算使用jQuery/Javascript的段落标记中有多少个字符？例如,在这个样本中它将是3.
<div>
<p class="tag">Jam</p>
</div>
你能以.length()某种方式选择角色吗？
推荐指数
解决办法
查看次数
Bootstrap 标签内容没有正确隐藏
我正在尝试使 Bootstrap 选项卡字段正常工作，但遇到了一些困难。
内容在每个 div 之间切换，但是我遇到的是每个选项卡中的内容都显示在页面上，只是隐藏。因此，每当单击其中一个选项卡时，它所做的就是隐藏上面的内容，并取消隐藏它下面的内容，而不是正确切换。
在下面的屏幕截图中，您可以看到#android-screenshots选项卡中的内容显示在#ios-screenshots选项卡内容下方，导致大量不需要的空白空间。
这是我的标记的样子：
<div id="mobile-splash-faq-screenshots" class="container-fluid">
<div class="row">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#ios-screenshots" aria-controls="ios-screenshots" role="tab" data-toggle="tab">iOS Screenshots</a></li>
<li role="presentation"><a href="#android-screenshots" aria-controls="android-screenshots" role="tab" data-toggle="tab">Android Screenshots</a></li>
<li role="presentation"><a href="#faq" aria-controls="faq" role="tab" data-toggle="tab">FAQ</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="container">
<div role="tabpanel" class="tab-pane active fade in" id="ios-screenshots">
<div class="screenshots">
<p class="excerpt text-center">Screenshots taken on an iPhone 4S.</p>
<div class="col-sm-4">
<img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_01.png" />
</div>
<div …推荐指数
解决办法
查看次数
跨页面持久化 jQuery Cookie
我正在使用 jQuery Cookie 插件 ( https://github.com/carhartl/jquery-cookie )，但在我的网站上的不同页面上保留我的 cookie 时遇到了问题。
我有一段内容显示在每个页面上，一旦隐藏，它就会像这样设置 cookie（对所有变量表示歉意，它们根本不相关：
// Binds the close event to the button.
$alert.on('click', function(e) {
$alertWrap.fadeOut();
// Sets the breaking-delete cookie to yes.
$.cookie('breaking-bar-delete', 'yes', {expires: 7 });
});
当初始脚本触发时，它会检查 cookie 是否存在：
// If the current bar is not supressed and they are not in the editor, and they do not have a closed cookie it will setup the bar.
if ($.cookie('breaking-bar-delete') == undefined) {
$alert.css("display","block");
}
// If there's no news, or …推荐指数
解决办法
查看次数