小编tec*_*ant的帖子

有没有办法将css3限制nth-of-type为一个类？我有一些动态数量的section元素,不同的类指定了它们的布局需求.我想抓住每一个第三.module,但它似乎nth-of-type查找类元素类型,然后计算类型.相反,我想将它限制为只有.modules.

谢谢!

JSFiddle演示:http://jsfiddle.net/danielredwood/e2BAq/1/

HTML:

<section class="featured video">
    <h1>VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO (3)</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO (6)</h1>
</section>

CSS:

.featured {
  width:31%;
  margin:0 0 20px 0;
  padding:0 3.5% 2em 0;
  float:left;
  background:#ccc; …

那么简单.

将我的布局移动到流动的区域,处理可伸缩的图像.使用img标签并将max-width设置为100%可以很好地工作,但我宁愿使用div将图像设置为其背景.

我遇到的问题是图像不能缩放到背景中div的大小.有什么方法可以将标记添加到后台代码中,将其设置为容器的100%宽度？

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}

这个主题有很多,但我找不到适用于我的情况的实例.

将图片淡出然后淡入另一张图片.相反,我遇到了一个问题,第一个淡出并立即(在动画完成之前)下一个淡入.

我曾经读过这个,并且不记得到底是什么伎俩......

http://jsfiddle.net/danielredwood/gBw9j/

谢谢你的帮助!

完全像听起来..

有一些神奇而简单的方式可以说:

    if (user agent is iOS) {
        if (browserRatio >=1.5) {
            $container.css('min-height', '360px');
        } else {
            $container.css('min-height', '555px');
        }
     }

如何隐藏HTML5音频的浏览器特定控件？我正在制作缩略图来代表每个曲目和JavaScript来播放/暂停.

谢谢!

HTML:

<audio class="thumbnail" id="paparazzi" controls="none">
    <source src="song.ogg" type="audio/ogg" />
    <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
    Your browser does not support HTML5 audio.
</audio>

很简单..我遇到了语法错误.$('#container').css('min-height', '360');不设定规则,但$('#container').css('height', '360');确实如此.

救命？

我在页面上有多个音乐播放器,需要对它们做一个索引来拉出当前播放器的位置.问题是currentPlayer不是孩子,所以使用.find或.filter然后.index将始终返回值,0因为数组中没有其他内容.

所以我需要.currentPlayer在player数组中找到索引.

HTML(非常简化):

<ul>
    <li>
        <article>
             <div class="player"></div>
        </article>
    </li>
    <li>
        <article>
             <div class="player currentPlayer"></div>
        </article>
    </li>
    <li>
        <article>
             <div class="player"></div>
        </article>
    </li>
</ul>

JavaScript的:

var player  = $('.player'),
    current = player.filter('.currentPlayer'),
    index = current.index();

"label元素的for属性必须引用表单控件."

老实说,我不明白标记有什么问题.我已经浏览了W3的这么多网站而且无法得到它.

救命？

HTML:

<form action="process.php" method="post">
    <div>
        <label for="name">Name</label><br />
        <input type="text" value="" name="name" />
    </div>
    <div>
        <label for="email">E-mail</label><br />
        <input type="text" value="" name="email" />
    </div>
    <div>
        <label for="message">Message</label><br />
        <textarea name="message" cols="30" rows="4"></textarea>
    </div>
    <div>
        <input type="checkbox" value="yes" name="newsletter" />
        <label for="newsletter">Subscribe to newsletter</label>
    </div>
    <div>
        <input type="submit" value="Submit" name="subscribe" />
    </div>
</form>

尝试dataTransfer在拖放序列期间将jQuery对象传递给属性.将属性添加到jQuert.event.props数组后我可以分配它,但它在drop事件期间返回undefined .不知道我在这里缺少什么 - 看起来真的很简单.

使用Javascript:

function dragClip(clip, event){

    event.dataTransfer.el = clip;

    /* Console confirms event.dataTransfer.el is the jQuery object */
}

function dropClip(target, event){

    target.append(event.dataTransfer.el);

    /* event.dataTransfer.el no longer has the object... where'd it go?? */
}

jQuery.event.props.push('dataTransfer');

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        dropClip($(this), event);
    });

$('.clip').bind('dragstart', function(event){

    dragClip($(this), event);
});

更新:

重写以删除冗长.已经包含了其他东西,但匿名函数会做得很好:

jQuery.event.props.push('dataTransfer');

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        $(this).append(event.dataTransfer.el);
    });

$('.clip').bind('dragstart', function(event){

    event.dataTransfer.el = $(this);
});

UPDATE

根据@ barney的最终答案,我的最终工作代码.我注意到使用原始事件不允许我将对象作为数据传递,因此我应用了ID并在drop上重建了jQuery对象.通过摆脱声明的功能也收紧了一切.代码少,结果相同.

$('#titles')
    .bind('dragenter …

关于此的很多帖子,但不完全符合我的情况.我的页面具有灵活的尺寸设置为100%宽度和100%高度,因此典型的有载滚动功能不起作用.任何想法或其他解决方案？

谢谢!

CSS:

* {
    margin:0;
    padding:0;
}
html, body {
    width:100%;
    height:100%;
    min-width:960px;
    overflow:hidden;
}

使用Javascript:

    /mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function () {
  window.scrollTo(0, 1);
    }, 1000);?