小编Mal*_*rte的帖子

当单击网页中的锚链接时,下面的脚本会添加平滑的scrool效果.

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

适用于大多数现代浏览器,包括适用于iOS和Android的移动浏览器.但是,如果脚本在iframe中运行,则iOS上的浏览器不会应用平滑的scrool效果.事实上,锚链接变得无用(如果用户点击一个,没有任何反应).即使在iframe中,该脚本也适用于Android和几乎所有桌面浏览器.

iOS在iframe中存在各种问题.例如,即使iframe的声明高度为300px,iOS也会扩展iframe的高度以适应内容,而不会在内部滚动.解决此问题的方法:将iframe包装在高度为300px的div中并添加overflow: auto;和-webkit-overflow-scrolling: touch;.

回到我的问题.为什么在iframe中iOS上这么简单的脚本会失败？这可能与iOS处理iframe的方式有关(如上所述)？

为了澄清事情,我需要在iOS上的iframe内部使用平滑滚动效果.iframe和父文档都来自同一个域.

任何人,任何想法？

有关工作示例,请参阅此处: http ://www.nightskyinfo.com/iframe2/

主html文件的源代码: http ://www.nightskyinfo.com/iframe2/index.txt

这里放入iframe的html文件的源代码: http ://www.nightskyinfo.com/iframe2/iframe.txt

我们假设我有六个Photoshop文件:1.psd,2.psd,...,6.psd.所有这些文件在每个文档中的随机文本层中都包含单词"LoremIpsum".有没有办法在所有文件中搜索"LoremIpsum"并将其替换为"Dolor Sit Amet",一气呵成？

我已经尝试过寻找和替换软件(包括强大的工具,如Power Grep),但它们不适用于psd文件...也许Photoshop变量？但是,它们只能同时为一个文档工作......

谢谢!

使用javascript我创建一个元视口并为其分配值980px.脚本是这样的:

var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=980, user-scalable=1";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);

在CSS中,是否可以编写仅在视口宽度完全为980px时触发的媒体查询？

请看看这个小提琴:http://jsfiddle.net/jpftqc26/

一个CSS渐变,从左边开始变黑,变成红色,然后再变成黑色.真的很简单.

有什么方法可以让红色部分宽500px,黑色部分填满屏幕,无论分辨率如何？中间有红色,就像小提琴一样.

有没有办法在CSS渐变中定义颜色停止之间的像素宽度？

码:

.test_gradient {
background: 
linear-gradient(
      to right, 
      #000000,
      #000000 20%,
      #ff0000 20%,
      #ff0000 80%,
      #000000 80%
    );

下面的代码使用pictureHTML5元素来显示图像的不同版本，具体取决于用户使用的是移动设备还是台式机。

问题：如何只将mobile_image.png视口（窗口）的宽度设置为10％？为什么不能向其中添加CSS类或样式标签source media？

<div class="my_container">
<a href="#back_to_top">
<picture>
<source media="(max-width:767px)" srcset="mobile_image.png">
<source media="(min-width:768px)" srcset="desktop_image.png">
<img src="fallback_image.png" alt="Back to Top">
</picture>
</a>
</div>

使用下面的代码-什么都没有！

@media only screen and (max-width : 767px) {
.my_container {
width:10%;
height:auto;
}
}

目前,为了检测触摸屏设备,我在我的javascript中使用它:

if ('createTouch' in document) {
// do touchscreen-specific stuff 
}

我看到许多开发人员使用ontouchstart,如下所示:

if ('ontouchstart' in document) {
// do touchscreen-specific stuff 
}

createTouch和之间有什么区别ontouchstart？哪一个最安全？还有其他一些简单,可靠的替代品吗？

在html页面中,我有这样的输入:

<input type="text" name="my_input" id="my_input">

使用PHP,如果用户在输入中输入单词"sun","moon","stars",我希望脚本能够完成任务.

像这样的东西,只是不知道如何正确地写它:

if (my_input.value == "sun,moon,stars") {
do stuff
}

非常感谢你!

以下功能显示用户访问页面时的通知工具栏.工具栏从窗口顶部向下滑动,向下推送页面内容.

这没关系,但访问更多页面时效果会变得烦人.我想要完成的任务:仅在用户第一次与站点交互时向下滑动通知工具栏.首次显示通知后,如果用户刷新页面或访问其他网站页面,则会立即显示通知工具栏,不会产生下滑效果.

我应该为此使用SessionStorage,但事实并非如此.

$(function(){
$('#notification_toolbar').slideDown();
});

我的下面的脚本检查表单输入包含至少10位数,除了其他文本.一切正常,除了它还将空格视为数字.有人可以帮忙解决这个问题吗？

Jsfiddle:http://jsfiddle.net/BG4du/

function(){
    var text = input.value;
    var totalNrOfDigits = 0;
    for(var i = 0; i < text.length; i++){
        if(!isNaN(text[i])){
            totalNrOfDigits++;
        }
    }
    if(totalNrOfDigits < 10){
        alert("Invalid input");
    }
}

请参阅附图和jsfiddle:http://jsfiddle.net/chqy9dja/

简单的textarea,圆角.注意滚动条出现的右上角和右下角的问题.屏幕截图是使用Chrome浏览器拍摄的,但所有其他浏览器都会分享此错误

我知道这可以通过jquery/javascript插件修复,但我正在寻找一种仅限css的方法.

我只需要在滚动条和边框之间添加一些填充.

试过这个,到目前为止最好的解决方案:将textarea包装在一个div中,改为设置div.工作,只关注元素时出现小问题.

试图用轮廓替换边框,并使用css添加outline-offset.效果很好,问题是轮廓不能有圆角..

还有其他想法吗？直接在textarea上设置样式,而不是包装div.

<textarea id="a" class="a" />

.a {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid #000;
}