是否可以使用CSS选择器选择超过定义数量的多个子项？
我想要隐藏#3之后的所有列表项:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li> //hide this
<li>5</li> //hide this
</ul>
ul li:nth-child(X) {
display:none;
}
我想从最后一个figure元素中删除背景:
@media (min-width: 50em) {
#mission #press figure {
padding-left: 0;
background: url('/assets/img/splash-green.png?1345829368') no-repeat 50% bottom;
}
#mission #press figure:last-child {
background: none;
}
}
背景仍然显示出来.我错误定位了吗？
我在幻灯片中嵌入了Youtube视频,我想在用户点击img缩略图时暂停:
<li><iframe width="430" height="241" src="http://www.youtube.com/watch?v=XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="my-video"></iframe></li>
我一直在Youtube API上,但我很困惑如何开始.
当我追加?enablejsapi到YouTube末尾时,API JS会自动加载video id吗？
这是我的JS:
var player1 = document.getElementById('my-video');
$('img').click(function () {
player1.pauseVideo();
})
编辑:
以下是我根据马特的答案做的事情,对于任何想知道的人:
<li><iframe width="430" height="241" src="http://www.youtube.com/embed/XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-1"></iframe></li>
<li><iframe width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-2"></iframe></li>
然后是我的JS:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Create YouTube player(s) after the API code downloads.
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player-1');
player2 …我在Sass中有一个自定义函数,它接受一个em值,剥离单位并创建一个px值:
@function stripAndPx($in){
$stripped: $in / ($in * 0 + 1); //strip unit
@return #{ (($stripped) * 16) + 'px'}; //convert to px
}
然后我尝试采用em变量:
$em-variable: 1em;
并将其添加到基于像素的变量:
$px-variable: 20px;
例:
right: $px-variable + (stripAndPx($em-variable));
这会创建此输出:
right: 20px16px;
我期待两个值都被添加:
right: 36px;
我正在使用.toggle()一个button元素:
$("header button").click(function(event){
$(".site-nav-wrapper").toggle();
event.preventDefault();
});
这非常有效.问题是如果button切换到display:none然后我更改设备方向,触发我的桌面媒体查询,尽管我重新强制display:block;桌面媒体查询,button遗骸切换到display:none:
(萨斯):
.site-nav-wrapper{
//Mobile First
display:none;
@include breakpoint($breakpoint-lg) {
display:block;
}
}
有没有办法重置toggle()函数存储的任何内容？
我在Chrome上使用Nexus 7,Android 4平板电脑遇到了一个奇怪的问题.
当我尝试p使用Web字体设置标记样式时,字体将在某个em或px大小之后才会呈现:
CSS:
@font-face {
font-family: 'mija';
src: url('/assets/fonts/mija-reg/mija-reg.eot');
src: url('/assets/fonts/mija-reg/mija-reg.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/mija-reg/mija-reg.woff') format('woff'),
url('/assets/fonts/mija-reg/mija-reg.ttf') format('truetype'),
url('/assets/fonts/mija-reg/mija-reg.svg#mija') format('svg');
font-weight: normal;
font-style: normal;
}
p {
font-size: 16px;
font-family: 'mija'
}
我的HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
</head>
<body>
<p>Hello world</p>
</body>
</html>
在这种情况下,任何内容都17px将正确呈现字体.
这只发生在p标签上.每个其他元素都会以任何大小呈现字体而不会出现问题.
我试过3种不同的字体系列.我没有使用任何规范化文件或任何其他CSS.
我尝试创建一个小提琴,但网络字体不是从Android Chrome上的Google网络服务中提取的:
我在页面设置上显示iFrame:none:
<div id="the-stage" style="display:none;">
<iframe src="index.html" scrolling="no">
</iframe>
</div><!--end the-stage-->
其中有一个display: none;标签:
<video id="video1" width="345" height="264" controls poster="poster.jpg">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
在有<video>标签的页面上,我尝试在显示隐藏的div时播放视频:
jQuery("a.launch").click(function(){
jQuery("#the-stage").fadeIn();
jQuery("#video1").get(0).play();
return false;
});
我在控制台中收到以下错误:
"无法调用未定义的方法播放"
有任何想法吗？谢谢.
这是麻烦的功能.我无法正确找到嵌套UL元素:
function showContentAgency(id){
$.post("assets/includes/contentAgency.php?id=id", {id: id}, function(data){
$(this).parent().find("ul").html(data).show();
$(this).addClass("nav-active");
});
}
这是点击功能:
$("ul.top-level").on("click", "ul.top-level li.agency a", function (event) {
var numbs = $(this).attr("href").match(/id=([0-9]+)/)[1];
$("ul.top-level li a").removeClass("nav-active");
$(this).addClass("nav-active");
showContentAgency(numbs);
event.preventDefault();
});
我的HTML显示如下:
<ul class="top-level" style="display: block; ">
<li class="agency"><a href="contentAgency.php?id=6" class="">Agency Name</a>
<ul>
<!--Content in here -->
</ul>
</li>
</ul>
我有这个代码从文件夹路径中随机抓取一个文件,并通过jQuery加载它:
var path = '/path-to-files/',
files = ['1.php', '2.php', '3.php', '4.php', '5.php', '6.php'],
i = Math.floor(Math.random()*files.length);
var url = (path+files[i]);
$("#my-div").load(url);
它很棒,效果很好.但我更喜欢一种方法,从而path无需构建数组即可随机抓取文件.那可能吗？
我有我的服务器调用上的文件夹/assets/includes/updates/与.php内部设有静态HTML内容的文件.
我想从这个文件夹中随机抓取一个文件并将echo其放入div中.这是我有的:
<?php
function random_update($dir = $_SERVER['DOCUMENT_ROOT'].'/assets/includes/updates/')
{
$files = glob($dir . '/*.*');
$file = array_rand($files);
return $files[$file];
}
?>
<div class="my-div">
<?php echo random_update(); ?>
</div><!--end my-div-->
我有500个错误？另外,我的意图是一次只有echo一个文件.提供的代码会实现吗？
jquery ×5
javascript ×4
css ×3
android ×1
html5-video ×1
iframe ×1
php ×1
sass ×1
tablet ×1
youtube ×1
youtube-api ×1