小编daG*_*GUY的帖子

CSS3 box-shadow属性不验证?

当我通过W3C的验证器运行我的CSS时,无论何时我使用该box-shadow属性,我都会收到如下错误:

0不是盒阴影值:0 0 10px#000

它似乎停在第一个值的任何位置,因为更改值的顺序将更改错误以匹配:

#000不是盒阴影值:#000 0 0 10px

我正在使用设置为CSS3的配置文件进行验证,因此我不会忘记从CSS2(box-shadow属性不存在)更改默认配置文件设置.

为什么它不认为我使用的任何值都是正确的?在Firefox和支持非前缀box-shadow属性的任何其他浏览器中,阴影将呈现完美.

css w3c-validation css3

7
推荐指数
1
解决办法
4953
查看次数

CSS模糊仅在一个方向上(运动模糊)

我需要在页面上动态模糊图像,但只能沿着一个轴(Y特别是).所以这是我的要求:

  • 必须要做"现场"(我无法预渲染图像的模糊版本)
  • 就像我说的,只在Y轴上(如运动模糊,但垂直)
  • 需要动画制作
  • 应该在IE9 +中工作

我的第一个想法是使用一个简单的CSS过滤器:

img {
    filter: blur(20px);
}
Run Code Online (Sandbox Code Playgroud)

我可以通过添加transition(transition: filter 0.2s linear)来设置动画,但它只会创建高斯模糊,这不是我想要的效果.语法不支持filter: blur(0 10px);将模糊仅限制为一个轴.

然后我读到模糊过滤器(以及其他)实际上只是SVG过滤器的简写,如果需要,可以手动编写.所以我创建了一个名为SVG的SVG filter.svg,它只沿Y轴(0 20)指定20px模糊:

<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0 20" />
        </filter>
    </defs>
</svg>
Run Code Online (Sandbox Code Playgroud)

并像这样应用它:

img {
    filter: url("filter.svg#blur");
}
Run Code Online (Sandbox Code Playgroud)

这完全有效......但仅限于Firefox.Safari/Chrome不支持url()作为值filter.另外,我无法为它设置动画,因为值是URL而不是数字,所以transition不起作用.

最重要的是,我认为这些方法中的任何一种都不适用于IE9.

所以:有什么方法可以做我想做的事情吗?我已经考虑过使用canvas替代方案,但是找不到任何只能朝一个方向发展的模糊的例子.

canvas css3 motion-blur svg-filters

7
推荐指数
1
解决办法
4642
查看次数

单击/激活jQuery UI选项卡时触发函数?

我正在使用jQuery选项卡,并通过AJAX调用检索其中一个选项卡中的内容.但是我不希望在单击选项卡(激活)之前触发调用,因为用户可能不一定要单击它.最好的方法是什么?

jQuery UI的提供select,并show为标签的事件,但是当这些火灾的任何选项卡中选择或显示,不只是特定(据我所知).

我还尝试将click事件分配给特定选项卡的ID:

$("#my-tab").click(function(){
...
     $.post(URL, function(data){
          ...
     });
...
}
Run Code Online (Sandbox Code Playgroud)

但这似乎没有任何影响,呼叫永远不会被触发.

ajax jquery post jquery-ui jquery-ui-tabs

5
推荐指数
2
解决办法
2万
查看次数

在我通过开发人员工具栏进行编辑之前,元素不会出现在IE7中

这个让我难过 - 我的页面上有一个绝对位置的元素,在一个相对位置的容器内.在除IE7之外的所有浏览器中,它出现在正确的位置,完全没有问题.

在IE7中,直到我在开发人员工具栏的"属性"选项卡中添加或编辑其任何CSS属性(即使与其可见性或位置无关的属性等color),该元素才会出现.一旦我这样做,它就会正确显示 - 如果我删除刚刚添加的属性(或撤消修改),甚至仍然可见!

这必须是一个IE7特定的显示问题,但我不能想出办法解决它-我已经抛出float,zoom等它都无济于事.

internet-explorer-7

5
推荐指数
1
解决办法
1463
查看次数

如何检测用户何时正在主动滚动?

我的页面有一个可滚动的区域,其中包含许多元素.每个元素在悬停时触发一个函数.

我的问题是,如果用户使用鼠标滚轮向上或向下滚动,则该功能将触发光标在区域滚动下方时所经过的每个元素.

有没有办法只有在用户没有主动滚动时才能在悬停时启用功能触发器?

jQuery的内置.scroll()似乎不是我需要的,因为滚动事件仅在滚动开始时触发.我需要知道滚动是否"正在进行中"可以这么说.


更新:这是我目前的代码:

$container.find('div.item').each(function(i, e){
     $(e).hover(
          function(){
               $(this).toggleClass('expanded');
               // other functions here
          },
          function(){
               $(this).toggleClass('expanded');
          }
     );
});
Run Code Online (Sandbox Code Playgroud)

所以我想要做的是.hover()如果用户当前正在滚动页面,则禁用所有内容.

javascript jquery scroll javascript-events

5
推荐指数
1
解决办法
1374
查看次数

更改表单的操作属性

好吧,我必须在这里遗漏一些东西,因为这应该非常简单,但它不起作用......

我有form我的网页上有一个空的action属性(action="#").页面准备好后,我想将action属性更改为其他内容.我的代码非常简单:

HTML:

<form action="#" method="post" id="register"></form>?
Run Code Online (Sandbox Code Playgroud)

jQuery的:

$("#register").attr("action", "http://www.test.com");?
Run Code Online (Sandbox Code Playgroud)

即使在测试小提琴中,它也不起作用!查看结果框架的来源,您将看到该action属性的值仍然是#.

我哪里错了?

forms jquery attributes action

5
推荐指数
1
解决办法
3万
查看次数

CSS负面右背景位置

我知道我可以在背景图像上设置负左侧位置,如下所示:

#element {
    background: url(image.png) -20px 0 no-repeat;
}
Run Code Online (Sandbox Code Playgroud)

#element无论#element宽度如何,它都会将背景图像20px定位在左边缘的左侧.

但有没有办法设置一个负的正确位置,而不给出#element一个固定的宽度(然后只设置一个高的正左值)?

css background-image background-position

5
推荐指数
1
解决办法
1万
查看次数

当href参数是变量时,Facebook Share对话框不起作用

我正试图在我的网络应用程序中分享Facebook上的链接.我已经初始化了SDK等,以下代码工作正常:

callToMyAPI()
    .then(function(response) {
        FB.ui({
            method: "share",
            href: "http://www.google.com",
        }, function(response) {
            console.log(response);
        });
    });
Run Code Online (Sandbox Code Playgroud)

这会打开一个Facebook Share对话框,其中包含指向http://www.google.com的链接和一些嵌入式预览(底部的框显示了URL中的图像,以及页面中的标题和说明/摘录) ).当我点击对话框中的"发布到Facebook"按钮,然后切换到Facebook,我看到带有共享链接的帖子.

但是我需要href使用从我的API返回的值动态设置参数.所以我这样做了:

callToMyAPI()
    .then(function(response) {
        var url = response; // http://www.google.com

        FB.ui({
            method: "share",
            href: url,
        }, function(response) {
            console.log(response);
        });
    });
Run Code Online (Sandbox Code Playgroud)

基本上,我正在做的就是用"http://www.google.com"变量替换硬编码url(其值是响应,即http://www.google.com).其他一切都完全一样.但是当我这样做时,会发生以下情况:

  1. Facebook Share对话框仍然打开,但它缺少我试图分享的URL的嵌入式预览

  2. 当我点击"发布到Facebook"按钮时,对话框关闭,但没有任何内容发布到Facebook.并且记录的响应只是一个空数组([])

因此,使用我的API的响应作为href值令人窒息,但我不明白为什么.我该如何解决?


更新:经过多次反复试验,我发现了这种奇怪的行为......

如果我http://dev.example.com用作href值(example.com实际上是我的真实域名),我在"共享"对话框中没有预览,也没有任何内容发布到Facebook:

FB.ui({
    method: "share",
    href: "http://dev.example.com"
});
Run Code Online (Sandbox Code Playgroud)

但是,如果我使用http://www.example.com(注意www)作为href值(再次,example.com实际上是我的真实域),我仍然没有在共享对话框中获得预览,但帖子确实通过: …

url jquery facebook href facebook-javascript-sdk

5
推荐指数
1
解决办法
1万
查看次数

从Drupal站点重定向到新页面

我正在使用Drupal站点,我们想要设置一个重定向到外部站点的特殊URL.换句话说,如果http://www.mysite.com是我们的Drupal站点,我们希望将http://www.mysite.com/external重定向到外部站点.

我对Drupal的经验很少,不知道如何设置它.任何帮助表示赞赏!

url redirect drupal external

4
推荐指数
1
解决办法
3万
查看次数

带有边框和透明间隙的CSS三角形切口

我需要使用CSS绘制以下模式作为页面各部分之间的分隔符:

分隔器

使用这个答案skewX()技术,我能够准确地模仿三角形切口(两个伪元素附加到下部的顶部,一个向左倾斜,一个向右倾斜,因此上部的背景显示通过) :

在此输入图像描述

但我无法弄清楚如何添加边框,如第一张图片所示.

问题是边框和下部之间的间隙必须是透明的,因为上部的背景可以是渐变,图像等.因此,我不能简单地使用图像作为三角形切口,因为我不知道它背后会有什么内容.

有没有办法用CSS做到这一点?

css border css3 skew css-shapes

4
推荐指数
2
解决办法
616
查看次数

FancyBox在页面上打开太低

我在我的页面上使用FancyBox,偶尔(但并非总是如此),灯箱在页面下方打开太远,在底部被切断并让您向下滚动以查看其余部分.通常,它将位于页面的死点.

我设置它的位置fixedonStart的时候我把它法,而且大部分时间确实在中心开放像它应该-所以我不知道是什么导致它抛出了,但只是偶尔.

该网站是Raditaz.com:播放现有电台(或创建自己的电台 - 您不需要帐户),然后点击中间的专辑封面打开灯箱.

任何领导都将不胜感激 - 谢谢!

编辑:一些更新......

  • 如果我打开FancyBox后调整窗口大小,它将在中心正确地重新定位(但直到我关闭并再次重新打开它,此时它将再次移动得太低)
  • WebKit浏览器(Safari和Chrome)中最常出现错误定位

编辑2:我应该指出我们使用的Fancybox的版本是1.3.4,而不是更新的2.0.我们的jQuery版本是1.6.4.使用Fancybox 2.0可能会解决问题,但(我认为)需要jQuery 1.7,这与我们正在使用的其他一些插件不兼容.所以我更喜欢一个适用于Fancybox 1.3.4的修复程序.

scroll position css-position fancybox

3
推荐指数
1
解决办法
5363
查看次数

jQuery:检查文本是否存在于另一个元素中

使用jQuery,我想检查我点击的链接的文本是否出现在页面上的另一个元素中.另一个元素中的文本是动态添加的,最初不在页面上.

到目前为止我有这个:

$("#results a").live("click", function(event){
    var seed = $(this).text();
    if ($("#seeds:has(" + seed + ")")){
        alert("already have it");
    }
    else {
        // other code
    }
});

但由于某些原因,我总是得到"已经拥有它"警报,即使#results a链接的文本不存在#seeds <div>.我究竟做错了什么?


更新:使用:contains而不是:has按照建议,大多数情况下工作...除非#seeds包含一个字符串,该字符串是#results锚中文本的超集.

例如,如果#seeds包含文本Americana#results锚的文本America,我仍然会收到"已经拥有它"的警告.我希望警报只显示完全匹配.这可能吗?

jquery text

2
推荐指数
1
解决办法
9316
查看次数

if语句有两个jQuery选择器

如果满足两个条件,我会尝试显示警报:

  • 元素display上的属性值为AND#playerboxblock
  • 元素的display属性值#playerinfonone

我有这个:

if ($("#playerbox").css("display") == "block" && $("#playerinfo").css("display") == "none"){
    alert("test");
}
Run Code Online (Sandbox Code Playgroud)

但警报从未出现过.但是,仅测试一个元素将起作用:

if ($("#playerbox").css("display") == "block"){
    alert("test");
}
Run Code Online (Sandbox Code Playgroud)

所以我假设我没有在if声明中正确地将两个选择器链接在一起.我究竟做错了什么?


更新:我应该指定它#playerinfo里面 #playerbox.这有什么改变吗?

jquery if-statement jquery-selectors

0
推荐指数
1
解决办法
1473
查看次数