小编dez*_*man的帖子
使显示表格单元格使用百分比宽度
我使用无序列表让这张表感觉良好.但我无法弄清楚如何让表格单元格具有50%的宽度(我希望每一行都是100%宽度).我使用的原因display: table-row;和display: table-cell;是这样我可以垂直对齐的数据,如果该参数文本超过一行.我不想为宽度使用实际的像素或em值,因为,如果可能的话,我只想要百分比.我宁愿放弃垂直对齐.请不要javascript.谢谢!
HTML:
<div class="group group2">
<h2>Health Indicies</h2>
<ul>
<li><p class="parameter">GGP</p><p class="data">265</p></li>
<li><p class="parameter">Comfort</p><p class="data">blah</p></li>
<li><p class="parameter">Energy</p><p class="data">gooo</p></li>
</ul>
</div>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
}
.group {
width: 50%;
margin-bottom: 20px;
outline: 1px solid black;
background: white;
box-shadow: 1px 1px 5px 0px gray;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.group h2 {
display: block;
font-size: 14px;
background: gray;
text-align: center;
padding: 5px;
}
.group li {
clear: both; …推荐指数
解决办法
查看次数
如何使用iframe或shadow dom创建跨浏览器子文档？
我想在JavaScript中创建一个完全封装的子文档,有自己的<head>,<body>,样式,HTML和JS.基本上是阴影dom或iframe,但没有src属性.
虽然我喜欢影子dom的想法,但它的支持率非常低,因此尚未准备好迎接黄金时段.
所以我一直在努力创建一个iframe,但一路上都遇到了各种各样的障碍.这是一个jsFiddle,展示了我的各种尝试.
iframe不能存在于dom中.这部分很关键.为了澄清,如果它暂时存在于dom中是可以的,但它必须能够被提取并且仅存在于JS中.
$('body').append('<iframe id="iframeGenerator" />');
var iframe3 = $('#iframeGenerator');
var iframe3Contents = iframe3.contents();
$('#iframeGenerator').remove();
var head = iframe3.contents().find('head');
甜蜜,我们有头脑
console.log(head.length);
但内容是什么样的？
console.log(iframe3Contents.get(0));
它是一个文档,但不在元素内部,所以让我们尝试将它放在dom或另一个元素的内部？ 以下两种尝试都不起作用,因为选择器没有上下文或某些东西......
$('body').append(iframe3Contents);
var generatedIframe = $('<iframe />').append(iframe3Contents);
我希望能够创建iframe/subdocuemnt而不向dom添加任何内容......但如果我必须,我仍然希望能够随后将其从dom中删除并在js中进一步管理它.
我有这个小功能,它不起作用,但说明了我想要创建的iframe或子文档生成器的类型
var iframeHtml;
giveMeIframe = function() {
var iframeContents;
if (iframeHtml) {
return iframeHtml;
} else {
$('body').append('<iframe id="iframeGenerator" style="display: none" />');
iframeContents = $('#iframeGenerator').contents();
iframeHtml = $('<iframe />');
iframeHtml.append(iframeContents);
$('#iframeGenerator').remove();
return iframeHtml;
}
}
推荐指数
解决办法
查看次数
是否有可能使用jQuery检测到:after或:before伪元素的点击？
让我们说:
<div></div>
有:
div {
width: 500px;
height: 500px;
position: relative;
}
div:after {
content: '';
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
}
我能做点什么$('div:after').click(function(){...});吗？如果我点击div但不是,请不要开火div:after.
推荐指数
解决办法
查看次数
如何检查课程是否不存在？
我不知道为什么这不起作用,我只是想检查是否.searchBar不存在.
var $school = "Washington";
if(!$('.searchBar')){
$('#schoolname').text($school);
}
推荐指数
解决办法
查看次数
如何在Sublime Text文件预览(右侧边栏)中显示位置？
当您在sublime文本中打开文件时,它会在右侧显示一个小版本,您可以单击并滚动它.在崇高的文本2中,它始终保持在文件中的位置突出显示,但在3中它不再显示.我想知道如何恢复此功能,以及这个右侧栏预览的正确名称是什么.
这就是它在3中的样子
这就是它在2中的样子以及我的目标.请注意右侧边栏的顶部是如何突出显示为浅灰色.
推荐指数
解决办法
查看次数
延迟回调,直到脚本添加到文档？
在脚本实际附加到文档之前,如何才能使回调无法运行？
function addScript(filepath, callback){
if (filepath) {
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filepath);
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
if (callback) {
callback();
}
}
推荐指数
解决办法
查看次数
Grunt连接服务器返回不能与骨干网进行GET /路由
我有一个在localhost上运行的连接服务器,在我的骨干应用程序中,如果我重新加载一个路由,说localhost:8000/fun服务器返回无法获取/乐趣显然因为/ fun不存在.
不知何故,服务器需要知道如何提供index.html/fun或其他东西.我实际上尝试过,但我得到了一些其他错误.以前有人处理过这个吗？
TL; DR无法获得/乐趣
推荐指数
解决办法
查看次数
如何在没有最小高度,粘页脚或javascript的情况下将页脚保留在短页面的底部
我有60页都有相同的页脚,包括在PHP中.内容量从300px到2000+不等.我不认为这是可能的,但如果我可以让页脚坐在浏览器窗口的底部,如果页面比窗口短,并且行为正常(推到底部),那将是很好的,否则,只用CSS.谢谢.
推荐指数
解决办法
查看次数
四舍五入到最近
如果数字是37,我希望它舍入到40,如果数字是1086,我希望它舍入到2000.如果数字是453992,我希望它舍入到500000.
我不知道如何更普遍地描述这一点,抱歉,但基本上,最高位置的数字应始终向上舍入到最接近的数字,其余数字变为零.我知道如何正常地填充东西,我只是不知道如何干净地处理数字位数之间的变化.
谢谢,
编辑:我删除了4到10轮,因为那个似乎不适合其余的,并不是真的有必要.
推荐指数
解决办法
查看次数
同样的悬停功能,用于拉斐尔的多条路径
所以我有我的画布和路径:
var paper1 = Raphael(10, 50, 960, 560);
var mapShape1 = paper1.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z");
var mapShape2 = paper1.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z");
var mapShape3 = paper1.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z");
我将它们设计成这样:(我相信这可以改进,有没有办法一次完成所有路径？)
function style1(shape){
shape.attr({
"fill": "#33CCFF",
"stroke": "000000",
"stroke-width": "5"
});
}
style1(mapShape1);
style1(mapShape2);
style1(mapShape3);
但我的问题是如何在所有路径上使用单个悬停功能,我有这个:
mapShape1.hover(
function(){
this.animate({
"fill": "#FF3300"
}, 500);
},
function(){
this.animate({
"fill": "#33CCFF"
}, 500)
}
);
但它一次只适用于一种形状,我想这样做
$(mapShape1, mapShape2, mapShape3).hover(...
但这不起作用.我错过了什么？
推荐指数
解决办法
查看次数
标签 统计
javascript ×6
jquery ×4
css ×3
backbone.js ×1
gruntjs ×1
html ×1
iframe ×1
raphael ×1
shadow-dom ×1
sublimetext ×1
sublimetext3 ×1