小编JVG*_*JVG的帖子
具有灵活背景图像的文本区域，可随文本输入调整大小
我textarea的背景是一个手绘框。我希望height背景图片的内容与其中的文字一起伸展。因此，当输入的文本超出的height/ width时textarea，而不是看到滚动条，图像（以及文本框本身）的大小将调整为与文本的整个高度匹配。我认为可以通过为CSS 添加一个min-height: 200px/ max-height:100%来解决此问题，textarea但不知道如何正确实现。
我使用的代码是：
textarea{
background: #FFF url(box.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 605px;
height: 200px;
line-height:20px;
padding:30px;
text-indent:3px;
margin:0;
border: none;
}
<textarea type="text" class="textbox" size="14"></textarea>
编辑：只是为了澄清，这不是我们将要使用的实际图像，设计师正在做一个更好的版本-只是我在油漆中拼凑了一个。
推荐指数
解决办法
查看次数
内联CSS是否覆盖页面底部的样式表？
我正在构建一个javascript插件/ CSS表,必须覆盖页面的原始样式(该插件使任何静态站点响应).
目前,如果我有类似的东西:
<body id="home">
<div style="width:900px; background:green; height:500px; margin:0 auto;">
<div style="width:400px; background:blue; height:300px;"
<p>Hello hello hello hello hello hello</p>
</div>
</div>
<div style="width:800px; background:green; height:500px;">
<div style="float:left; width:400px; background:blue; height:300px;"
<p>blah blah blah blah blah</p>
</div>
</div>
<link rel="stylesheet" href="css/jq_responsive.css" >
<script src="js/main.js"></script>
</body>
我的jq_responsive.css样式不优先于内联样式.如果我将内联样式放在文档的<style>标记中<head>,那么应用指向jq_responsive.css文件所覆盖的所述样式的类.但是,这不是我的目的选择.
这是!important我能在这里覆盖的唯一方法吗？如果可能的话,我想避免这种情况.
推荐指数
解决办法
查看次数
Node.js - 使用Cheerio的回调函数
我在Node中构建一个scraper,它使用request和cheerio来加载页面并解析它们.
重要的是我只在请求和Cheerio完成加载页面后才进行回调.我正在尝试使用async扩展,但我不完全确定在哪里放回调.
request(url, function (err, resp, body) {
var $;
if (err) {
console.log("Error!: " + err + " using " + url);
} else {
async.series([
function (callback) {
$ = cheerio.load(body);
callback();
},
function (callback) {
// do stuff with the `$` content here
}
]);
}
});
我一直在阅读,cheerio documentation并且无法找到任何内容加载时的回调示例.
最好的方法是什么？当我在脚本上抛出50个URL时,它会在cheerio正确加载内容之前过早地开始移动,而我正试图通过异步加载来控制任何错误.
我对异步编程和回调都很陌生,所以如果我在这里缺少一些简单的东西请告诉我.
推荐指数
解决办法
查看次数
在Angular $ resource函数的回调中,变量突然变为未定义
我正在Node中构建一个函数来查询我的mongoDB数据库并将一些结果返回到一个对象中.我无法正确设置对象.这是我的代码:
调用MongoDB查找的函数
$scope.listItems = $resource('http://10.1.1.21\\:3000/api/uniques/:query');
var itemsToList = [
'designer',
'store',
'category'
]
$scope.uniqueLists = {};
for(var i = 0; i<itemsToList.length; i++){
$scope.uniqueLists[itemsToList[i]] = [];
$scope.listItems.get({query:itemsToList[i]}, function(data){
console.log(itemsToList); // Returns ["designer", "store", "Category"] x3
console.log(itemsToList[i]); // Returns undefined, undefined, undefined
console.log('i = ' + i); // Returns 3, 3, 3 (which is really odd, ideas?)
$scope.uniqueLists[i] = data.query;
});
}
此代码的问题在上面的注释中.奇怪的是,i == 3对于所有3个循环,当它应该相等0时1,然后完成2.
我的问题是
任何人都可以了解这里发生的事情吗？它可能与Node的异步行为有关,但我真的很茫然.
附加信息
我正在访问的ExpressJS电话$scope.listItems …
推荐指数
解决办法
查看次数
使用 HTML Canvas + Javascript 优化图像 + 减少文件大小
我正在制作一个 Chrome 扩展，它会自动截取可见选项卡的屏幕截图并将 JPG 下载到您的文件系统。一切正常，但图像非常大（1280x720px 图像约为 400kb），我想优化它们（理想情况下约为 40kb）。
这是我正在使用的代码：
var image = new Image();
image.onload = function() {
var canvas = screenshot.content;
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
// save the image
var link = document.createElement('a');
link.download = shotname + ".jpg";
link.href = screenshot.content.toDataURL();
link.click();
screenshot.data = '';
};
image.src = screenshot.data;
如何优化图像以降低质量和文件大小？我想尝试不同的质量选项，这样我就可以了解什么是可接受的用例。
推荐指数
解决办法
查看次数
Safari 8:Flexbox的"合理内容"根本不起作用
在Macbook上的Safari 8.0.8中.
我正在使用flexbox在类似网格的容器中分发元素.
我.eventContainer是多个.event框的父级,应该通过flexbox分布在各行中.它在Firefox和Chrome中运行良好,但Safari会在自己的行上显示事件,而不是彼此相邻!
<div class="eventContainer">
<div class="event">
<div class="thumb">
<img src="http://imgur.com/JDxjEknb.jpg">
</div>
<p class="thumbDate">Fri 18 Sept</p>
<p class="thumbArtist">Event 1</p>
<p class="thumbTitle">Subtitle 1</p>
<p class="thumbLocation">Location</p>
</div>
<div class="event">
<div class="thumb">
<img src="http://imgur.com/AwA5ga7b.jpg">
</div>
<p class="thumbDate">Sat 19 Sept</p>
<p class="thumbArtist">Event 2</p>
<p class="thumbTitle">Title 2</p>
<p class="thumbLocation">Subtitle 2</p>
</div>
<div class="event">
<div class="thumb">
<img src="http://imgur.com/9z5NkBxb.jpg">
</div>
<p class="thumbDate">Sat 19 Sept</p>
<p class="thumbArtist">Event 3</p>
<p class="thumbTitle">Title 3</p>
<p class="thumbLocation">Subtitle 3</p>
</div>
<!-- Fix for FlexBox -->
<div …推荐指数
解决办法
查看次数
具有Bootstrap的Chart.JS全宽响应式甜甜圈图
我正在使用Angular.js变体，但Chart.js的核心是完全相同的。
我有一个简单的甜甜圈图，正在响应式Bootstrap容器中使用：
<div class="row">
<div class="col-xs-8">
<div class="chart-container">
<canvas id="doughnut"
chart-data="data"
chart-labels="labels"
chart-options="mainDonut"
class="chart chart-doughnut">
</canvas>
</div>
</div>
</div>
没有什么花哨。我的控制器选项是：
$scope.mainDonut ={
percentageInnerCutout : 90,
responsive: true
}
似乎图表的宽度受到div高度的限制，对于我来说，由于某种原因，ChartJS将其神奇地设置为大约300px。呈现方式如下：
我希望高度能够响应我.col-xs-8的宽度，并填充整个div。我了解可以通过监视窗口调整大小事件来使用Javascript来做到这一点，但我想尽可能避免这种情况。
这里有什么解决方案吗？
推荐指数
解决办法
查看次数
CSS:not()选择器指定前一个元素
这是一个非常简单的问题,我无法理解.
我有一系列像这样的div:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph text</p>
<h2>Heading 3</h2>
<p>Paragraph text</p>
在CSS中我可以使用以下命令来定位h1标签后面的h2标签:h1+h2{}但是我似乎无法:not()以这种方式使用.例如,我想使用:
#text h2:not(h1+h2){
margin-top:3em;
}
但这似乎不起作用.我是在做某种愚蠢的语法错误还是这样做不可能？
推荐指数
解决办法
查看次数
Javascript - 检查数字是否更接近2个变量
我有12个不同的数字存储在变量中,如下所示:
var span1 = 8.333333333;
var span2 = 16.66666667;
var span3 = 25;
var span4 = 33.33333333;
var span5 = 41.66666667;
var span6 = 50;
var span7 = 58.33333333;
var span8 = 66.66666667;
var span9 = 75;
var span10 = 83.33333333;
var span11 = 91.66666667;
var span12 = 100;
我有一个函数,它将div的宽度与其父宽度进行比较,并返回一个值作为百分比(减去%符号),例如48.5586.我想要检查结果最接近的这些跨度变量中的哪一个的函数.例如,48.5586将返回,"span6"因为它接近50而不是41.666667.
真的不知道从哪里开始,任何想法？
推荐指数
解决办法
查看次数
当div在屏幕底部的(x)像素内滚动时,AngularJS调用函数
我正在尝试使用此AngularJS infinite-scroll指令.这是来源:
angular.module('infiniteScroll', [])
.directive('infiniteScroll', [ "$window", function ($window) {
return {
link:function (scope, element, attrs) {
var offset = parseInt(attrs.threshold) || 0;
var e = element[0];
element.bind('scroll', function () {
if (scope.$eval(attrs.canLoad) && e.scrollTop + e.offsetHeight >= e.scrollHeight - offset) {
scope.$apply(attrs.infiniteScroll);
}
});
}
};
}]);
这似乎仅适用于滚动框中包含的元素.这是一个演示这个的Plunker.
但是,我希望能够将这个简单的指令应用于静态的DOM元素,scope.$apply(attrs.infiniteScroll)当元素接近窗口滚动的底部时调用.
关于如何修改指令以允许这个的任何想法？我试图改变e.scrollTop到window.scrollTop,但无济于事,这有点超出了我目前的技术水平很遗憾.
html javascript infinite-scroll angularjs angularjs-directive
推荐指数
解决办法
查看次数