小编add*_*itt的帖子

很抱歉这个缺乏一个例子,但我觉得它很容易理解.

我的网站上有固定的背景,目前实现如下:

#background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #28305e;
    background-image: url(../images/background.jpg);
    background-size: cover;
    -moz-background-size: cover;
    background-position: center center;
    z-index: -10;
}

<div id="background"></div>

到目前为止,这在所有浏览器中都很棒,除了移动浏览器,它们在向下滚动时隐藏地址栏.隐藏地址栏时,视口会垂直展开,背景图像会自行调整大小.在这个特定的网站上,用户可以上下滚动,效果会分散注意力.

有关解决此问题或以不同方式实施背景的任何想法或策略？

我可以将整个东西包装在一个固定的容器中,并将overflow-y设置为滚动,这样可以防止地址栏被隐藏,但我不想这样做(Google Glass无法滚动浏览这些容器,哈哈...想在那里演示).

我一直在尝试考虑提供背景图像的东西:使用某种缓冲区覆盖功能,使其渲染大于视口,并且除非视口扩展到缓冲区之外,否则不会重新渲染,但我我不确定如何实现这一点.

编辑:我实际上已经实现了这一点,并在下面的答案中详细说明了该过程.但是,即使使用此缓冲区设置(将背景图像的高度扩展为比视口高度大60多个像素),在地址栏隐藏时,它仍会显示一个空白的背景颜色段,并且一旦显示停止滚动,它渲染其余的背景图像.

仍然在寻找一种方法来保持原生地址栏隐藏功能(现在已经在iOS 8中扩展到iPad上的iOS Safari),并且还有一个全屏幕背景图像,即使视口在隐藏地址时改变高度也始终呈现酒吧.开始怀疑我是否应该为所有浏览器提交错误报告...

我有一个一般的网页设计问题.最近,我们的办公室购买了几台非常大的4K电视屏幕.人们做的第一件事是将Surface Pro 3插入其中.

我把我们公司的网站加载到它上面.这不是很好.它非常非常非常薄.它被开发为响应高达1080p的分辨率.

现在,这是IE11,在Windows 8.1上.我不知道Edge与Windows 10有什么关系.但是我知道Chrome有一个"HiDPI"模式,我相信设置一个设备屏幕大小并扩展所有内容,他们正在积极改进这个功能.

如果屏幕被视为1080p,并且所有内容都缩放了2倍,我对所有网站都很清楚.

我的问题是,我应该依靠浏览器缩放吗？这会成为常态吗？或者这只是一个必要的邪恶,他们必须实现与当前大部分整个互联网的向后兼容？

我应该继续添加更多响应式设计并确保它看起来不错,还能达到4K分辨率吗？是否有任何元标记需要注意以确保我尽可能利用浏览器缩放？

对不起,一连串的问题.为了保持简短和甜蜜,我只想问这个:

我是否应该开始专注于确保我的响应式网站在4K分辨率下一直保持良好状态,或者继续开发1080p并祈祷浏览器缩放成为4K显示器的标准？

我需要暂停一个for循环而不是继续,直到我指定.对于我正在循环的数组中的每个项目,我运行一些在单独的设备上运行操作的代码,我需要等到该操作完成后再循环到数组中的下一个项目.

幸运的是,该代码/操作是一个游标并具有一个after:部分.

但是,它一直在运行整个for循环,我需要阻止它.有没有办法阻止循环继续,直到指定？或者可能是一种不同类型的循环或我应该使用的东西？

我的第一个(差)想法是在for循环中连续运行一个while循环,直到after:光标部分设置boolean为true.这只是锁定浏览器:(因为我担心它会.

我能做什么？我对javascript很新.我一直很喜欢我现在的项目.

这是while-loop尝试.我知道它的运行整个循环立即因为dataCounter从进入1到3(目前数组中的两个项目)瞬间:

if(years.length>0){
  var dataCounter = 1;
  var continueLoop;
  for(var i=0;i<years.length;i++){
    continueLoop = false;
    baja.Ord.make(historyName+"?period=timeRange;start="+years[i][1].encodeToString()+";end="+years[i][2].encodeToString()+"|bql:select timestamp, sum|bql:historyFunc:HistoryRollup.rollup(history:RollupInterval 'hourly')").get(
        {
          ok: function (result) {
          // Iterate through all of the Columns

          baja.iterate(result.getColumns(), function (c) {
            baja.outln("Column display name: " + c.getDisplayName());
          });
        },
        cursor: {
          before: function () {
          baja.outln("Called just before iterating through the Cursor");
          counter=0;
          data[dataCounter] = [];
          baja.outln("just …

用户正在向我们的React应用提供一个字符串，并正在向其他用户显示。我想搜索一些字符，并用一些HTML替换它们，例如，如果要搜索“特殊”一词，我会将其转换为：

My <span class="special-formatting">special</span> word in a user string

以前，我是执行此替换操作，然后将结果通过危险地插入到HTML中。现在，这当然给了我一个问题，用户可以在应用程序中键入并输入他们喜欢的HTML / Javascript，然后将其呈现给所有人查看。

我试图将HTML字符转义到它们的实体，但是危险地SetInnerHTML似乎正确地呈现了HTML实体，而不是将其呈现为实际的字符串。（编辑：见下文，这是实际的解决方案）

有什么方法可以将其消息转换为纯字符串，同时仍保留这些特殊字符的显示，还可以在字符串中插入我自己的HTML？试图避免在将每个字符串插入DOM后运行脚本。

这是有关当前流量的更多信息。所有示例都经过了优化，仅显示相关代码。

使用以下功能将用户文本提交到数据库：

handleSubmit(event) {
        event.preventDefault();

        var messageText = this.state.messageValue;

        //bold font is missing some common characters, fake way of making the normal font look bold
        if (this.state.bold == true) {
            messageText = messageText.replace(/\'/g, "<span class='bold-apostrophe'>'</span>");
            messageText = messageText.replace(/\"/g, "<span class='bold-quote'>&quot;</span>");
            messageText = messageText.replace(/\?/g, "<span class='bold-question'>?</span>");
            messageText = messageText.replace(/\*/g, "<span class='bold-asterisk'>*</span>");
            messageText = messageText.replace(/\+/g, "<span class='bold-plus'>+</span>");
            messageText = messageText.replace(/\./g, "<span class='bold-period'>.</span>");
            messageText = messageText.replace(/\,/g, "<span class='bold-comma'>,</span>");
        } …

当我的内容位于具有overflow-y:scroll指定的固定位置容器内时,我似乎无法使用scrolltop.

这是我的相关代码:

/* some container with many large content blocks inside */
#container {
    position: fixed;
    width: 300px;
    height: 300px;
    overflow-y: scroll;
}

/* button that has a data-path attribute that specifies where the container should scroll to*/
$(".button").on("click", function(){
    var path = $(this).attr("data-path");
    var anchor = $("#" + path);
    var position = anchor.position().top;
    $("#container").animate({scrollTop: position});
});

我相信这个小提琴很好地说明了我的困境:http://jsfiddle.net/Qndu5/

如果从上往下滚动到元素,它会很有效.之后,所有赌注都已关闭.它完全无法从顶部以外的任何位置滚动.它要么可怕地错过了标记,要么一直滚动到顶部,即使输入的位置值看起来是正确的.

当然,我在这里遗漏了一些东西,但我不确定我不理解.感谢您提供的任何帮助!

我制作了一个幻灯片,它通过在幻灯片放映容器中将三个内嵌块彼此相邻(所有具有相同的背景图像)并使用translateX将该容器移动到左/右33%的方式来工作.循环.三个内联块几乎可以确保它看起来始终是连续的,并且您永远不会在每个屏幕上看到一个接缝.

幻灯片放置在另一个自己的容器中,典型宽度和溢出:隐藏用于裁剪长照片条并防止它拉伸浏览器窗口.

#container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slideshow {
    position: absolute;
    z-index: 5;
    top: 0;
    width: auto;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.slide {
    display: inline-block;
    height: 100%;
}

#about-slideshow {
    right: 0;
    -webkit-animation: slideshow-right 10s linear infinite;
    animation: slideshow-right 10s linear infinite;
}
#about-slideshow .slide {
    width: 964px;
    background: url('http://simplegrid.cochranesupply.com/images/slideshow-a.jpg') 0 0 repeat-x;
    background-size: 101%;
}

/* the animation */
@-webkit-keyframes slideshow-right {
    from {
        -webkit-transform: translateX(0);
    }
    to { 
        -webkit-transform: …