小编Dr.*_*ini的帖子

三栏HTML弹性框:如何设置中间的一个以获得所有剩余空间?

假设我使用display: flex;(demo)设置了一个简单的三列布局.在左列和右列中,我有指定宽度的图像(100px每个).在中间栏中,我有主要内容区域.此区域具有高分辨率图像:

<div id="main-container">

    <div id="left-content">
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
    </div>

    <div id="center-content">
        <div><img src="https://farm6.staticflickr.com/5560/14080568109_9f33dc7964_o.jpg"></div>
    </div>

    <div id="right-content">
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
    </div>
    </div>

</div>
Run Code Online (Sandbox Code Playgroud)

我需要调整CSS,以便中心列宽度最多是侧列之间可用空间的100%(换句话说,它必须始终是这样宽:windowSize-column1-column2).如果窗口缩小,我需要中心列(及其图像)随之缩小.

#main-container
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

#left-content,
#right-content
    {
    width: 102px;

    border-style: solid;
    border-width: 2px;
    border-color: magenta;
    }

#left-content img,
#right-content img
    {
    width: 100px;
    }

#center-content
    {
    }

#center-content img
    {
    max-width: 100%;
    height: auto;
    } …
Run Code Online (Sandbox Code Playgroud)

html css flexbox

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

Chrome中的requestFullscreen:图片仍然很小

我正在关注SitePoint的这个很棒的教程,以实现我网站上一些图像的全屏点击.

我的代码与SitePoint提供的示例非常相似,但这是我的代码:

HTML

<figure class="fullscreenOnClick">
    <img src="https://dw-uploads.s3.eu-central-1.amazonaws.com/photos/originals/359c0687ae12e32bb5f26f2005763b73">
</figure>
Run Code Online (Sandbox Code Playgroud)

JS

$('.fullscreenOnClick').on('click', function(e) {
    e.preventDefault;

    var elem = this;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    } else {
        alert("Sorry, your browser is too old and doesn't support fullscreen :-(")
    }
});
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/xnyj9wr5/(不工作 - 再次,请参阅SitePoint示例)

问题

我的问题是Firefox和IE会像我期望的那样显示全屏图像:图像以原始大小显示,居中.

Chrome导致问题:图像只是在黑色背景上居中,保持其当前大小.

如何让Chrome像Firefox和IE一样全屏?

请注意:我必须将全屏效果应用于外部元素,而不是img本身,否则图像会被拉伸.

html javascript css jquery html5

15
推荐指数
2
解决办法
1743
查看次数

jquery .off():如何只删除某个点击处理程序?

我有一个绑定了两个处理程序的元素:

<button class="pippo pluto">
  push me
</button>

$('.pippo').on('click', function () {
    alert("pippo");
});


$('.pluto').on('click', function () {
    alert("pluto");
});
Run Code Online (Sandbox Code Playgroud)

我正在尝试.off()只有其中一个,但是语法躲过了我:-(我正在试着用...

<button class="dai">
  remove
</button>

$('.dai').on('click', function () {
    $('.pippo').off('click');
  alert("ok, removed");
});
Run Code Online (Sandbox Code Playgroud)

但这会删除处理程序.所以我正在尝试......

$('.pippo').off('click .pippo');
Run Code Online (Sandbox Code Playgroud)

但是什么都没有被删除.

所以我删除了中间空间:

$('.pippo').off('click .pippo');
Run Code Online (Sandbox Code Playgroud)

但回到正方形1:两个处理程序都被删除.

那么正确的语法将是......?

https://jsfiddle.net/6hm00xxv/

javascript jquery

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

亚马逊产品广告 API 的 TooManyRequestsException

我开始开发一个简单的 Symfony 5 应用程序。它使用 Amazon Product Advertising API 5.0 和 paapi5-php-sdk 包(由 TheWirecutter 提供,因为 Amazon 从 Packagist 中提取了它,但这无关紧要)。

我有一个已有 5 年历史的关联帐户,并且我已经生成了新的访问+密钥。

由于我在意大利,所以我点击了webservices.amazon.it+eu-west-1

我在过去 24 小时内运行了 10 个 API 调用,但服务始终响应:

TooManyRequests 错误消息:由于请求限制,请求被拒绝。请验证每秒向亚马逊商品广告 API 发出的请求数。

我知道评级限制,但我远未达到最低限制。

我究竟做错了什么?

php amazon-product-api symfony5

11
推荐指数
1
解决办法
7980
查看次数

批处理(.bat):获取第一个脚本的名称,而不是当前脚本的名称

我有first.batsecond.bat.

first.bat是: call second.bat

第二是:( echo %~n0显示正在执行的批处理的文件名)

输出是Second.bat,但我希望它显示调用者文件名,而不是它自己的文件名.

这可能吗?

batch-file

9
推荐指数
3
解决办法
2879
查看次数

使用.scale()调整HTML画布的大小

我正在尝试<canvas>使用已绘制的图像来调整a的大小,但是我误会了该canvas.scale()方法的使用方法,因为它不会缩小...

码:

ImageRender.prototype.resizeTo = function () {

    var canvas          = $('#myCanvas')[0];
    var ctx             = canvas.getContext("2d");

    //current image
    var currImg         = ctx.getImageData(0, 0, canvas.width, canvas.height);

    //
    var tempCanvas      = $('canvas')[0];
    var tempCtx         = tempCanvas.getContext("2d");
    tempCtx.putImageData(currImg, 0, 0)

    //
    ctx.scale(0.5, 0.5);

    //redraw
    ctx.drawImage(tempCanvas, 0, 0);
  };
Run Code Online (Sandbox Code Playgroud)

我在俯视什么?

谢谢!

javascript html5 canvas

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

Typeahead.js/Bloodhound只显示一个结果

我的Typeahead.js/Bloodhound(0.11.1)没有按预期工作.在提供的json结果列表中,只有一些显示为建议.

例如,如果我输入los我的字段,那么只有Lostorf4个可选项显示时,我才会得到其他内容.

这是我的代码:

HTML

<div id="remote">
<input class="typeahead" type="text">
</div>
Run Code Online (Sandbox Code Playgroud)

JS

var searchablePlaces    = new Bloodhound({
    datumTokenizer      : Bloodhound.tokenizers.obj.whitespace("term"),
    queryTokenizer      : Bloodhound.tokenizers.whitespace,
    remote              : {
        url             : 'http://www.example.com/autocomplete/%QUERY/',
        wildcard        : '%QUERY',
        filter          : function(response) { return response.data.results; }
      },
    limit               : 10
});

searchablePlaces.initialize();

$('#remote .typeahead').typeahead(
{
    hint            : true,
    highlight       : true,
    minLength       : 2
},
{
    name            : 'searchable-places',
    displayKey      : "term",
    source          : searchablePlaces.ttAdapter()
})
Run Code Online (Sandbox Code Playgroud)

JSON

{
    "data": {
        "query": "los", …
Run Code Online (Sandbox Code Playgroud)

javascript json typeahead.js bloodhound

6
推荐指数
1
解决办法
4619
查看次数

Google Places API网络服务(PHP):如何为给定的"place_id"获取"administrative_area_2 place_id"

我的webapp收到用户选择的地理位置的place_id.例如:如果用户在前端选择一个名为"Comacchio"地方(它是一个城镇,也就是被称为费拉拉省administrative_area_level_2的一部分),我的webapp会为Comacchio重新找到place_id : .ChIJ0yHebbB1fkcR7YujotES0dA

当我向maps.googleapis.com查询所说的place_id时,我得到了大量的信息(见下文)但不是我需要的信息:我需要的是输入place_id 的administrative_area_level_2的place_id(ChIJ7y4rEyxCfkcRwH-6_AubBwM适用于Provincia di费拉拉).

正如您在下面看到的,Provincia di Ferrara以字符串形式返回,但不是我需要的place_id.

Array (
    [html_attributions] => Array(
    )

    [result] => Array (
        [address_components] => Array (
            [0] => Array (
                [long_name] => Comacchio
                [short_name] => Comacchio
                [types] => Array (
                    [0] => locality
                    [1] => political
                )
            )

            [1] => Array (
                [long_name] => Comacchio
                [short_name] => Comacchio
                [types] => Array (
                    [0] => administrative_area_level_3 …
Run Code Online (Sandbox Code Playgroud)

php google-maps google-places-api

6
推荐指数
1
解决办法
1839
查看次数

在Telegram中的丰富链接预览中获得良好的BIG/LARGE图像

我在Telegram中看到了很多或关于丰富链接预览的请求,但这是关于"如何在预览中获得大/大图像".

我们以我的网站上的这篇文章为例.它已经拥有所有OG:

<meta property="og:title" content="Questa settimana su TLI (08 dicembre 2018)" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://turbolab.it/immagini/12483/max" />
<meta property="og:url" content="https://turbolab.it/newsletter-turbolab.it-1349/questa-settimana-tli-08-dicembre-2018-1812" />
<meta property="og:description" content="Non hai tempo di leggerci tutti i giorni? nessun problema! ecco a te il riepilogo di quanto proposto da TurboLab.it nel corso della settimana in conclusione." />
<meta property="og:locale" content="it_IT" />
<meta property="og:site_name" content="turbolab.it" />
Run Code Online (Sandbox Code Playgroud)

结果:链接在Telegram上发布时有效,但图像很小并且即使og:image(this)为1000 px宽也向右浮动.我想在它自己的路线上拥有它.

检查一下(第一个条目是我的网站,我要修复的网站:请注意小图片,向右浮动.第二个和第三个是我想要的结果,如YouTube视频和Mashable文章所示).

在此输入图像描述

上图中使用的3个URL是:

  1. https://turbolab.it/newsletter-turbolab.it-1349/questa-settimana-tli-08-dicembre-2018-1812
  2. https://www.youtube.com/watch?v=y6eHY537Cao
  3. https://mashable.com/article/xiaomi-48-megapixel-camera/?europe=true&utm_cid=hp-r-1#cR2kG7X_naqO

richpreview.com没有帮助,因为它在所有theree(一 …

html opengraph open-graph-protocol telegram

6
推荐指数
2
解决办法
759
查看次数

为什么U + E006()在iOS上显示为T恤?

我的网站从我无法控制的外部源导入大量业务数据.其中,我正在导入角色U + E006

当我在我的页面中回应这个:

  • Linux + Windows + Mac + Android:垃圾
  • iOS:T恤

使用iOS设备在此处查看

FileFormat.info 报告这不是有效的UTF-8字符.

这是怎么回事?U + E006是否有效UTF-8?如果,我怀疑,它实际上是无效的,为什么iOS行为?

unicode utf-8 ios

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

"间接"isset()

function myCheck($in)
      { return isset($in); }

$var1='Something';
$var2='$var1';
$var3='$varNonExitant';
Run Code Online (Sandbox Code Playgroud)

我想要实现的是用来myCheck评估内容的存在,如下所示:

myCheck($var2) return true;
myCheck($var3) return false;
Run Code Online (Sandbox Code Playgroud)

php

-1
推荐指数
1
解决办法
100
查看次数