是什么意思

我正在使用CSS和JavaScript 的非画布菜单.画布外菜单按预期工作.我想要一个侧边栏菜单,它位于屏幕左侧,并在触发菜单时移动.我们的想法是拥有一个100px的菜单触发器,其高度为100%,并且始终位于屏幕左侧.使用绝对位置我在所有浏览器上都有高度问题,使用固定位置Firefox工作正常,但遇到下面提到的问题.

错误

Firefox问题:没有,据我所知.

Chrome问题:向下滚动几个像素后,侧边栏菜单触发器不会拉伸整个页面.

Internet Explorer:触发侧边栏菜单时,侧边栏似乎完全消失.

的jsfiddle

因为我的代码在HTML,CSS和JavaScript上都很重要,所以我包含了一个jsFiddle.请注意,就我所知,此问题仅发生在Chrome和Internet Explorer上.您可以通过向下滚动页面然后单击左侧菜单按钮来复制问题.

截图

注意有用的HTML代码(小提琴中的完整代码)

<div id="sbContainer" class="sbContainer">
    <div class="sbPush">
        <header class="contain-to-grid sbMenu sbFX">
            <nav class="top-bar" data-topbar>
                <ul class="title-area show-for-small-only"><!--SITENAME--></ul>
                <section class="top-bar-section"><!--LINKS--></section>
            </nav>
        </header>
        <div class="sbContent-one">
            <div class="sbContent-two">
                <div class="sbMenuTrigger" data-effect="sbFX"><!--SIDEBAR TRIGGER--></div>
                <div class="sbMainContent" role="document"><!--PAGE CONTENT--></div>
            </div>
        </div>
    </div>
</div>

注意有问题的CSS代码(小提琴中的完整代码)

html, body, .sbContainer, .sbPush, .sbContent-one {
    height:100%
}
.sbContent-one {
    overflow-x:hidden;
    background:#fff;
    position:relative
}
.sbContainer {
    position:relative;
    overflow:hidden
}
.sbPush {
    position:relative;
    left:0;
    z-index:99; …

我在我的Express应用程序中使用Sequelize.我需要生成一个在WHERE子句中有子查询的查询.

SELECT *
  FROM MyTable
 WHERE id NOT IN (
       SELECT fkey
         FROM MyOtherTable
        WHERE field1 = 1
          AND field2 = 2
          AND field3 = 3
       )

我首先通过我的模型尝试过关系/关联,但无法让它发挥作用.就像是:

MyTable.find( {
    where: {
        id: {
            $notIn: // <= what goes here? Can I somehow reference my include model?
        }
    },
    include: [ {
        model: MyOtherTable,
        where: {
            field1: 1,
            field2: 2,
            field3: 3
    } ]
} );

然后我尝试使用Sequelize.where(),那里没有运气.

然后我尝试了Sequelize.literal(),但是不确定它是否是在Sequelize的where子句中做一个子查询的"正确"方式,因为我是新手.

MyTable.find( { …

我发现了许多类似的帖子,甚至试图找出如何在MySQL中处理负值,但无济于事.

我有一个网站,我正在使用谷歌地图,作为一种性能增强,我将地图上绘制的标记限制在地图边界内.

我想开发一个可以使用正面或负面latitude和longitude值的查询.

对于数据库:

latitude FLOAT( 10, 6 )
longitude FLOAT( 10, 6 )

查询:

SELECT *
FROM `table` 
WHERE `latitude` BETWEEN 47.926930 AND 47.929806 
AND `longitude` BETWEEN -97.077303 AND -97.083997

如果我删除该BETWEEN条款,longitude我得到结果,虽然没有longitude约束,但是不正确.

我试过这个:

AND -`longitude` BETWEEN ABS( -97.077303 ) AND ABS( -97.083997 )

哪个确实有效,但仅适用于负值longitude.

我需要检查longitude它是否为阴性？

可以扩展Google Maps API v3中的许多类,特别是google.maps.MVCObject和google.maps.OverlayView.

在一些示例中,它们将在回调函数中扩展一个类initMap.我的应用程序比这些示例更强大,并且不希望在回调函数中定义一堆类.

(A)的解决方案是否在我自己的脚本之前包含Google Maps API而不包含回调函数？或者(B)我只是在回调函数中定义所有内容吗？或(C)其他一些方法.

选项A.

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script src="./assets/js/main.js" type="module"></script>

选项B.

<script src="./assets/js/main.js" type="module"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>

哪里initMap是main.js和看起来是这样的:

function initMap() {

  class Alpha extends google.maps.MVCObject {}
  class Bravo extends google.maps.MVCObject {}
  class Charlie extends google.maps.MVCObject {}
  // More classes.
  class Zulu extends google.maps.MVCObject {}

  // Rest of code.

}

选项C.

其他一些方法.

我想知道是否有办法通过使用某种类型的id或类型来获取组件,就像在DOM操作中一样.就像是:

var Avatar = React.createClass({
    render: function () {
        ...
    }
});
React.renderComponent(Avatar({id:'avatar'}), ...);
...
...
var avatar = React.getComponentById('avatar');
avatar.setProps({url = 'http://...'});
// or
var avatars = React.getComponentByType('Avatar'); 
if (avatars.length) {
    avatars[0].setProps({url = 'http://...'});
}

我不想保留组件实例的引用...

我正在用ReactJS构建一个电阻计算器.我有一个声明如此的组合组件:

var ResistanceCalculator = React.createClass({
    getInitialState: function() {
        return {bands: [0,0,0,0,0]}
    },
    componentDidMount: function() {
        console.log(this.props.children); // => undefined
    },
    render: function() {
        return (
            <div>
                <OhmageIndicator bands={this.state.bands} />
                <SVGResistor bands={this.state.bands} />
                <BandSelector band={1} />
                <BandSelector band={2} />
                <BandSelector band={3} />
                <BandSelector band={4} />
                <BandSelector band={5} />
            </div>
         );
    }
});

BandSelector呈现<select>元素,当一个更改时,我想更新ResistanceCalculator状态.所以我的想法是我需要将一个事件监听器绑定到ResistanceCalculator子级.然而this.props.children似乎是空的.为什么是这样？

我想给我的网站一些图标。现在我看到很多人都在使用这个网站 Flaticon。

我所做的是在我的 CSS 中放入这样的东西：

/**    
 * Font 1    
 */    
@font-face {
  font-family: "Flaticon1";
  src: url("flaticon1.eot");
  src: url("flaticon1.eot#iefix") format("embedded-opentype"), url("flaticon1.woff") format("woff"), url("flaticon1.ttf") format("truetype"), url("flaticon1.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="flaticon1-"]:before,
[class*=" flaticon1-"]:before,
[class^="flaticon1-"]:after,
[class*=" flaticon1-"]:after {
  font-family: "Flaticon1";
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}

.flaticon1-basic21:before {
  content: "\e000";
}

.flaticon1-bicycle21:before {
  content: "\e001";
}

.flaticon1-car6:before {
  content: "\e002";
}


/**    
 * Font 2    
 */    
@font-face {
  font-family: "Flaticon2";
  src: url("flaticon2.eot");
  src: url("flaticon2.eot#iefix") format("embedded-opentype"), url("flaticon2.woff") format("woff"), url("flaticon2.ttf") format("truetype"), url("flaticon2.svg") …

它应该删除类transition(因此CSS转换属性),将div移动到200px(立即),重新应用transitioncss属性,然后将div设置为动画(占用1秒)到右边.相反,它冻结了.

看起来应用css left属性需要更多的时间transition按类删除？还是addClass()异步？

var elem = $('#elem');

elem.removeClass('transition');
elem.css('left', 200);
elem.addClass('transition');
elem.css('left', 0);

#container {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: red;
}
#elem {
  width: 50px;
  height: 50px;
  position: relative;
  left: 0;
  top: 0;
  background-color: blue;
}
.transition.linear.scritta {
  -webkit-transition: all 1.0s linear;
  -moz-transition: all 1.0s linear;
  -ms-transition: all 1.0s linear;
  -o-transition: all 1.0s linear;
  transition: all 1.0s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="elem" …

TLDR；

您是否必须链接 Laravel Mix 方法来维护执行顺序？是否有任何异步方法会阻止使用以下非链接模式mix.scripts(); mix.js(); mix.sass();？

我运行的几个测试表明我不需要链接。

一个例子

由于我们的 Laravel 应用程序是如何设置的，我们需要不止一个 Laravel Mix 设置。我们不是复制粘贴webpack.mix.js文件并修改每个文件中的几行，而是创建一个传递给单个webpack.mix.js文件的配置对象。在此文件中，我们将检查是否已配置各种内容，如果已配置，则运行适当的 Mix 方法。下面是一个伪代码示例。

if ( config.js ) {
  mix.js( config.js.src, config.js.dist );
}

if ( config.sass ) {
  mix.sass( config.sass.src, config.sass.dist );
}

if ( config.concat ) {

  if ( config.concat.styles ) {

    // Could be more than one set of files that need to be combined, so array.
    config.concat.styles.map( ( files ) => {
      mix.styles( files.src, files.dist );
    } …

我有一张从 GeoJSON 加载建筑足迹的地图。我的地图也使用街景。像所有谷歌地图一样，街景是通过街景小人访问的。当您单击并拖动街景小人时，我地图上的几何图形位于街景几何图形的上方。

我想知道如何，或者是否有可能，将街景图层放置在数据图层（具有 GeoJSON 形状的图层）之上，以便街景中的街道、路径和 360 几何图形位于 GeoJSON 建筑足迹几何图形之上。

我已经搜索了 Google Maps JavaScript API 文档并进行了大量的 Google 搜索，但找不到像使用 OpenLayers 和 Leaflet 那样重新排序图层的内容。

这是问题的屏幕截图。您可以看到由 GeoJSON 几何体部分覆盖的路径和 360 度全景图。