小编Mat*_*att的帖子

有没有办法删除一个启动或包含已定义文本字符串的类？

我有几个类的背景颜色覆盖开始 .bg

.bgwhite
.bgblue
.bgyellow

我为一个选择框设置了一个小jquery,它为一个元素添加和删除了修改类,在这种情况下<a href id="buttontostyle">我需要删除这些类的标记.bg,同时保留另一个确定按钮大小的类.像这样:

    $("#buttoncolors").change(function() // buttoncolors is the select id
    {
        var valcolor = $("#buttoncolors").val();
        $("#buttontostyle").removeClass("bg" + "*");
        $("#buttontostyle").addClass(valcolor);

    });

我正在考虑优化 CSS 动画以提高性能。

从我可以找到的使用

.item { transform: translate(-25px,-50px)

效率比

.item { left: -25px; top: -50px }

我已经设置了一个小动画，可以移动和旋转一个框.balloon，作为动画的多个步骤。问题是动画变得非常生涩，即使为每一步声明了定位和旋转

这是我的标准 CSS

@keyframes balloon {
    0%,100% { left:809px; top:50px; transform: rotate(0deg) }
    10% { transform: rotate(-9deg) }
    25%,75% { top:25px }
    50% { left:235px;top:75px }
    45% { transform: rotate(3deg) }
    75% { transform: rotate(12deg) }
}

这是我优化的 CSS，这是生涩动画生效的地方

@keyframes balloon {
    0% { transform: translate(0,0) rotate(0deg) }
    10% { transform: translate(-57.5px,-10px) rotate(-9deg) }
    25% { transform: translate(-143.75px,-25px) rotate(-4deg) }
    45% { …

我正在尝试使用css转换来改善我的动画性能,以便在100%宽度的包装器中转换元素的位置.因此,在重复动画之前,它从左侧进入屏幕并在右侧退出.

我想我可以使用这个动画的百分比.我发现的是,翻译是相对于你动画的对象.

因此,如果您有一个100px宽的对象,并按如下方式设置动画:

@keyframes moveme {
  0% { transform: translate(-100px, 150px) }
  100% { transform: translate(100%, 100px) }
}

该对象将移动200%的对象宽度,因此200px.

是否有修复方法使对象移动到容器的宽度,在关键帧动画中使用css变换？

到目前为止,这是我的codepen codepen.io/matttunney/pen/dPMQZL

谢谢

我有许多带有子div的容器(class ="sidebox"),每个div都有不同的内容.

在某些情况下,我希望子div为每个父div的100%高度,有时添加垂直分隔符样式.

为此,我将一个类添加cfull到子div和vcon带有"sidebox"类的容器中.

然后调用jquery函数:

var y = $('.cfull').parent('div.vcon').height();
    $(".cfull").height(y) ;

当只有一个实例并将其子项div高度设置为侧箱的高度时,这非常完美.

如果我sidebox vcon在html中添加第二个,并给其中一个孩子divs额外的内容.第二个sidebox子div获取从sidebox的第一个实例设置的高度

如何设置class="sidebox vcon"容器div中每组子div的高度？

我希望这是有道理的.

到目前为止,这是我的工作示例,您将看到第二个侧箱子的孩子style="height:#px"从第一个侧箱

http://bit.ly/jqueryheightissue

我正在研究移动第一框架.该项目有广泛的要求,在各个地方都有大量的浏览器和设备可供使用.我的主要目标之一是印度,其浏览器和设备使用趋势与英国或美​​国的差异很大.

印度浏览器使用 http://gs.statcounter.com/#all-browser-IN-monthly-201301-201312-bar

英国浏览器使用 http://gs.statcounter.com/#all-browser-GB-monthly-201301-201312-bar

我需要为印度地区定位的浏览器是opera,android,uc浏览器和nokia,但每个浏览器都有它们的小怪癖.因此,设备的范围不同

Opera mini - 不支持rems Android(在Chrome之前)v2-v4与rems和ems都有问题 http://www.quirksmode.org/css/units-values/mobile.html

- 我是否正确地假设更新版本的Android预先安装了Chrome和操作系统Web浏览器？

我理想地喜欢使用rems,因为它消除了继承其父元素的em规模的嵌套内容的问题.但是根据对http://www.quirksmode.org的研究,我需要有一个后备集.

所以我需要声明一个px值.

例如,我可以这样做:

h1 {font-size: 24px; line-height: 30px; margin-bottom: 10px; font-size: 1.846rem; line-height: 2.308rem; margin-bottom: 0.769rem} /* 24px / 30px / 10px */

或者我必须做这样的事情？

h1 {font-size: 24px; line-height: 30px; margin-bottom: 10px}
h1 {font-size: 1.846rem; line-height: 2.308rem; margin-bottom: 0.769rem} /* 24px / 30px / 10px */

还是还有其他更好的东西？

我已经看过几个js poly-fill,比如https://github.com/chuckcarpenter/REM-unit-polyfill,但是有些情况下JavaScript没有启用,所以这不起作用.

此外,我试着关注性能,所以我想将请求数量保持在最低限度,并尽可能保持css干净.

谢谢

如何在每个帖子中显示图片或特色图片的小缩略图在我最近的帖子中自定义小部件

这是我的代码:

<?php

include($_SERVER['DOCUMENT_ROOT'] . $root . 'blog/wp-load.php');

$recent_posts = wp_get_recent_posts(array(
    'numberposts' => 3
));

?>

<h3 class="divider">Recent Blog Posts</h3>
<ul class="listing">
<?php foreach($recent_posts as $post) { ?>
    <li><a href="<?php echo get_permalink($post['ID']) ?>">
    <div><?php echo $post['post_title'] ?></div></a></li>
<?php } ?>  
</ul>