小编Mat*_*lin的帖子
当内容滚动到视图时激活CSS3动画
我有一个使用CSS3动画的条形图,当页面加载时动画当前激活.
我遇到的问题是给定的条形图由于之前的大量内容而被放置在屏幕外,所以当用户向下滚动到它时,动画已经完成.
我正在寻找通过CSS3或jQuery的方法来仅在观看者看到图表时激活条形图上的CSS3动画.
<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>
如果你在页面加载后立即向下滚动,你可以看到它动画.
这是我的代码的一个小问题.另外,我不知道这是否重要,但我在页面上有几个这个条形图的实例.
我遇到了一个名为waypoint的jQuery插件,但我完全没有运气.
如果有人能指出我正确的方向,那将是非常有帮助的.
谢谢!
推荐指数
解决办法
查看次数
jQuery append()和remove()元素
我有一个表单,我动态添加上传文件与附加功能,但我也希望能够删除未使用的字段.这是html标记
<span class="inputname">Project Images:
<a href="#" class="add_project_file"><img src="images/add_small.gif" border="0"></a>
</span>
<span class="project_images">
<input name="upload_project_images[]" type="file" /><br/>
</span>
现在,如果他们点击"添加"gif,则会在此jquery中添加一个新行
$('a.add_project_file').click(function() {
$(".project_images").append('<input name="upload_project_images[]" type="file" class="new_project_image" /> <a href="#" class="remove_project_file" border="2"><img src="images/delete.gif"></a><br/>');
return false;
});
要删除输入框,我尝试添加类"remove_project_file",然后添加此功能.
$('a.remove_project_file').click(function() {
$('.project_images').remove();
return false;
});
我认为应该有一个更简单的方法来做到这一点.也许我需要使用$(this)函数进行删除.另一种可能的解决方案是扩展"添加项目文件"以同时添加和删除字段.
你们中的任何一个JQuery向导都有任何想法会很棒
推荐指数
解决办法
查看次数
声明和未声明变量的效果
JavaScript声明和未声明变量之间的主要区别是什么,因为delete运算符不适用于声明的变量？
var y = 43; // declares a new variable
x = 42;
delete x; // returns true (x is a property of the global object and can be deleted)
delete y; // returns false (delete doesn't affect variable names)
为什么会这样？全局声明的变量也是窗口对象的属性,为什么不能删除它？
推荐指数
解决办法
查看次数
响应高度与宽度成正比
是否可以实现以下逻辑使用HTML和CSS？
width: 100%;
height: 30% of width;
我想要实现的:如果我减小宽度,高度也会按比例减少.
推荐指数
解决办法
查看次数
jQuery导致Firefox大小调整警告
我有WebDeveloper扩展,我收到了CSS警告,所以我去调查它.警告是以下3项:
Warning: Unknown property 'box-sizing'. Declaration dropped.
Line: 0
然后我做了一个空白文件,注意到它不存在.几分钟后,我发现了一个可重现的原因:包括jQuery 1.9.1脚本!
我能做什么或应该做什么？我想使用jquery,但我觉得有点烦人,我将永远在工具栏中看到CSS警告.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>Empty</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html>
推荐指数
解决办法
查看次数
3个内嵌块div,正好宽度为33%,不适合父级
这是一个常见的问题,但我无法弄清楚它为什么会发生.
我有一个父div,在div里面我有3个div,宽度设置为33%(确切地说,不是33.3%!)和display: inline-block.
在Chrome中它运行良好,但在Mozilla和Opera中它没有(我还没有在IE中测试它).我认为问题可能出在算法浏览器用于从百分比计算像素大小的算法中.但是当我检查DOM指标时,我发现父亲的宽度是864px而孩子的宽度是285px(这是正确的:864*.33 = 285.12).但为什么它不适合父母呢？285*3 = 855,比父母的宽度小9px!
哦,是的,所有div的填充,边距和边框设置为0,DOM指标确认.
推荐指数
解决办法
查看次数
当兄弟姐妹的宽度可变时,如何使元素填充剩余宽度？
在下面的示例中:
我希望文本框填充所有可用空间.问题是下拉宽度无法修复,因为它的元素不是静态的.我想用css解决这个问题(如果可能的话,没有javascript).
我已经尝试过提出类似问题的解决方案,没有任何运气:(
这是小提琴:http://jsfiddle.net/ruben_diaz/cAHb8/
这是html:
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">General</option>
<option value="2">Fruits</option>
<option value="3">Ice Creams</option>
<option value="4">Candy</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
在这里css:
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-block;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
}
input[type="text"] …推荐指数
解决办法
查看次数
背景图像在Outlook 2007及更高版本中不起作用
我制作了一个HTML电子邮件模板,在大多数电子邮件阅读器中工作正常,但背景图像没有在Outlook 2007,2010和2013中显示.我该如何解决这个问题？
这是电子邮件的HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
border: 0px;
outline: 0px;
}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table td {border-collapse:collapse;}
img {max-width:100%;}
</style>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0px auto;padding:0px;display: block;">
<tr>
<td>
<table width="97%" cellpadding="0" cellspacing="0" background="http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png" style="background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');margin:0px auto;font-family: GothamBold, Tahoma;"> …推荐指数
解决办法
查看次数
使div填充父级的剩余空间
我需要一些帮助定位div.HTML结构如下:
<div class="container">
<div class="item">
<div class="left">
lorem lorem
</div>
<div class="right">
<p>right</p>
<p class="bottom">bottom</p>
</div>
</div>
</div>
我有以下CSS:
.container {
float: left;
padding: 15px;
width: 600px;
}
.item {
float: left;
padding: 15px;
width: 570px;
}
.left {
float: left;
padding: 40px 20px;
margin-right: 10px;
}
.right {
position: relative;
float: left;
}
.bottom {
position: absolute;
bottom: 0;
}
左div的宽度和高度是动态的.
我想要实现的是:
- 使右div的高度等于左div的高度.
- 使右侧div的宽度用class填充div的其余部分
item. - 带有类的段落
bottom应位于右侧div的底部.
这是一个代表我目标的简单图像:
以及JSFiddle演示的链接.
推荐指数
解决办法
查看次数
没有JavaScript(html布局)可以做到这一点吗？
该页面具有以下布局:
<div id="main" style="min-height:500px;">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
<div>
主div可以具有固定高度或最小高度(style="height:500px;"或style="min-height:375px;").
是否有可能使页脚和标题占据他们需要的高度,并允许内容采取其余的(content.height = main.height - (header.height + footer.height))(不使用JavaScript,弹性页眉和页脚,内容采取其余的)？
推荐指数
解决办法
查看次数