小编Dai*_*imz的帖子

我正在使用https://github.com/Prinzhorn/skrollr当我滚动时,来动画我网站的背景.但是我也希望让我的链接在页面上下滚动,就像普通的单页网站一样.

问题是,如果我手动滚动背景更改,两者都有效,如果我单击链接页面滚动到正确的位置.问题是,当我单击按钮时,背景也不会滚动.

看起来我正在使用两个不同的滚动功能,因此它们不能一起工作,我需要使用相同的功能.

这是代码.

js - 滚动到链接:

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

js - Skrollr init

skrollr.init({
    smoothScrolling: true,
    forceHeight: true
}); 

我会尝试拼凑一个小提琴,使其更清晰,但希望答案非常简单.

我设置了一个范围滑块,范围从0到2小时,时间以分钟计算,然后转换为hh:mm,如下所示:10分钟,20分钟,1小时20分钟,2小时.

但是现在我正在尝试ng-repeat使用范围滑块指定的范围过滤掉一些项目,我很难让这个工作.

这是我做的http://cdpn.io/LDusa

我正在使用http://danielcrisp.github.io/angular-rangeslider/demo/作为范围滑块.

以下是代码:

var app = angular.module('myApp', ['ui-rangeSlider']);
app.controller('myCtrl', function ($scope) {
    $scope.sliderConfig = {
        min:  0,
        max:  120,
        step: 10,
        userMin: 0,
        userMax: 30
    };

   $scope.times = [
      {"time": "20"},
      {"time": "50"},
      {"time": "30"},
      {"time": "10"},
      {"time": "85"},
      {"time": "75"},
      {"time": "95"},
      {"time": "100"},
      {"time": "80"},
      {"time": "200"},
      {"time": "260"},
      {"time": "120"},
      {"time": "62"},
      {"time": "68"},
      {"time": "5"},
      {"time": "116"}
   ];
});

app.filter('customFilter', function () {
    return function (value) {
        var h …

我想做一个输入，允许用户添加所花费的时间。我本来希望使用这<input type='time">几乎正是我想要的，我只是不想有上午/下午部分，我也不希望它是 24 小时。我希望用户能够做类似的事情，00:15直到类似的事情2d:40hr:10m。

关于我如何解决这个问题的任何想法。我不确定我是否使用了正确的 html 元素。

我还要指出，我正在使用 AngualrJS 和 bootstrap-ui，它有一个时间函数，与上面的输入法相同，所以如果有人有一个有角度的方法来实现这一点，我也对此持开放态度。

我希望我不会错过一些明显的东西,但我正在努力学习Angular,并且在尝试制定指令时遇到了问题.

我正在尝试构建一个指令,它将从数据属性('background-image')获取url并将其作为背景图像应用于伪元素,但我无法弄清楚如何定位::在元素之前或者甚至Angular可以修改伪元素.

这是我想要建立的指令:http: //cdpn.io/cqvGH

我可以把它应用于div.item的背景但是当我尝试在没有快乐之前瞄准::时.

这是指令代码:

angular.module('testApp', [
])

angular.module('testApp')
  .directive('backgroundImage', function(){
    return function(scope, element, attrs){
        restrict: 'A',
        attrs.$observe('backgroundImage', function(value) {
      // If I remove ::before it will apply image background to .item correctly.
        element::before.css({
                'background-image': 'url(' + value +')'
            });
        });
    };
});

我正在尝试创建一个删除函数,它将从Firebase中删除我的对象.

我在FireBase上有以下结构:

recipes   recipebooks      recipesPerRecipebook
  - id          - id        - recipebook_id
  - id          - id           - recipe_id: true

当我点击删除我要删除我想要做的就是recipe_id从recipes和也删除 recipesPerRecipebook/${recipebook_id}

我在recipes.service.ts中创建了一个函数

deleteRecipe(recipe_id:string, recipebook_id:string) {
    this.sdkDb.child('recipes').remove(recipe_id)
      .then(
        () => alert('recipe deletion requested !')
      );

    this.sdkDb.child('recipesPerRecipebook/${recipebook_id}').remove(recipe_id)
      .then(
        () => alert('recipe Association deletion requested !')
      );
  }

然后我在recipeDetails.component.ts中有这个

delete() {
    this.recipesService.deleteRecipe(this.recipe.$key, this.recipe.recipebook_id);
  }

我收到以下错误:

error_handler.js:54 Error: Firebase.remove failed: first argument must be a valid function.

我有两个问题,首先是最重要的是我哪里出错了.其次做this.sdkdb.child(...两次感觉有点不对劲,我可以简化这个吗？

我有一种情况,我循环一组对象和每个对象我有一个按钮,点击时应该将变量切换isActive为true,但我希望这是特定于循环中的那个元素,目前我只能让它使所有元素都是活动的,因为它isActive是组件变量.

我创建了一个plunkr希望它可以帮助https://plnkr.co/edit/biOfbIjMxjOMUMFWOgyY?p=preview

我想让我的谷歌地图透明.我设法改变了地图图块的不透明度(标记也是透明的,但我需要稍后对其进行排序).我想在页面中添加一个看起来像折叠的渐变,然后让透明贴图覆盖它所以它看起来在地图中折叠线.

我注意到谷歌正在为包含地图的div添加背景颜色......这在我的计划中是一个轻微的障碍.

我尝试使用jquery将div设置为将背景设置为none.不幸的是,谷歌赢了,我无法改变它.

$('div div#example').css("background-color","#000");

这是一个小提示,显示我如何设置http://jsfiddle.net/pTuQ4/

我想制作一个按钮颜色的mixin.我的目标是迭代值列表(绿色,红色,蓝色),然后构建类名,然后将正确的变量颜色应用于背景.

我成功地做到了这一点:

green = #38ab0b
red = #ab130b
blue = #099aab

colors = green, red, blue

for color, i in colors
  .btn-{color}
    background: mix(color, white, 60%)
    &:hover
      background: lookup(color)

然而,这表示为:

.btn-color {
  background: ;
}
.btn-color:hover {
  background: #008000;
}
.btn-color {
  background: ;
}
.btn-color:hover {
  background: #f00;
}
.btn-color {
  background: ;
}
.btn-color:hover {
  background: #00f;
}

这个例子类似,我想这样做,除了它不需要变量还有什么办法,我可以做到什么,我想,我知道该怎么做,在SCSS但我试图让开关.

编辑:

我尝试了以下但无法使其工作.背景很好,但类名不生成.

$green = #38ab0b
$red = #ab130b

colors = green $green, red $red

for pair in …

我想有两个主页,第一个是未登录的用户,第二个是登录用户.

这是我目前的设置:

.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
    $httpProvider.interceptors.push('authInterceptor');
  })

  .factory('authInterceptor', function ($rootScope, $q, $cookieStore, $location) {
    return {
      // Add authorization token to headers
      request: function (config) {
        config.headers = config.headers || {};
        if ($cookieStore.get('token')) {
          config.headers.Authorization = 'Bearer ' + $cookieStore.get('token');
        }
        return config;
      },

      // Intercept 401s and redirect you to login
      responseError: function(response) {
        if(response.status === 401) {
          $location.path('/login');
          // remove any stale tokens
          $cookieStore.remove('token');
          return $q.reject(response);
        }
        else {
          return $q.reject(response);
        } …

从下面我可以看到我有一个数组,我想在运行时从该数组中的最后一项中删除svg.我怎么能用条件这样做？像最后一样:item else add svg

-navlinks = {"Home":"/Home", "About":"/About", "Store Directory":"/Store-Directory", "Store Page":"/Store-Page", "Events":"/Events",}
ul.navbar-menu
  for val, key in navlinks
    li 
      a(href='#{val}') #{key}
      svg.icon.icon-dots
        use(xlink:href="#icon-dots")

我正在使用http://zurb.com/ink/来构建我的电子邮件模板,但我需要在电子邮件的边缘有一个10px的边框.

当我尝试使用名为.box-edge的类(这是一个自定义类)向电子邮件添加填充时,它会添加填充,但是当调整屏幕大小时,图像不会正确调整大小.

这是一个显示我的意思的小提琴: http ://jsfiddle.net/daimz/xspWL/2/

以下是代码:

HTML:

<body>
<table class="body">
  <tr>
    <td class="center" align="center" valign="top">
      <center>

      <!-- Header -->
      <table class="row header">
        <tbody>
          <tr>
            <td class="center" align="center">
              <center>
                <table class="container">
                  <tbody>
                    <tr>
                      <td class="wrapper last">
                        <!-- Twelve Columns -->
                        <table class="twelve columns box-edge">
                          <tbody>
                            <tr>
                              <!-- Logo -->
                              <td class="six sub-columns" style="vertical-align: middle">
                                <img src="images/capalaba-logo.png" alt="Capalaba Central" />
                              </td>
                              <!-- End Logo -->
                              <!-- View More -->
                              <td class="six sub-columns last" style="text-align: right; vertical-align: middle;">
                                <a href="#" …

我做了一个svg并将其添加到我的页面中，但是它具有一些异常的行为，因为页面正在加载，所以我可以在页面上看到SVG（看起来很好，显示的是渐变，请参见下图。我还有2个SVG文件一个徽标，另一个“ K”在加载后被隐藏）。

但是，由于某些原因，页面加载后，渐变消失了，剩下的是黑色的上升者和下降者。（见下文）

但是事情变得更奇怪了，好像我单击绿色圆圈按钮一样，这导致侧栏折叠Angular，然后隐藏“ Logo” SVG并显示“ K” SVG。我只需要按一下此切换开关，即可正确解决渐变问题。我可以隐藏“ K”并再次显示“徽标”，一切都很好。切换下边栏的隐藏/显示后，请参见下图。

这是SVG代码，也许是这样吗？我真的很希望对此有所帮助，这是非常奇怪的行为，我不确定如何解决。

徽标SVG：

<!-- BEGIN LOGO SVG -->
<div class="logo" ng-hide="sidebarCollapsed">
  <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 443.7 1602 312.6" style="enable-background:new 0 443.7 1602 312.6;" xml:space="preserve">
    <style type="text/css">
      .st0{fill:url(#accend_1_);}
      .st1{fill:url(#decend_1_);}
      .st2{fill:#FFFFFF;}
    </style>
    <g id="k"> 
      <linearGradient id="accend_1_" gradientUnits="userSpaceOnUse" x1="-6.7993" y1="1185.7142" x2="42.6791" y2="1114.1494" gradientTransform="matrix(3.135 0 0 -3.135 0 4205.7539)">
        <stop  offset="0" style="stop-color:#55C953"/>
        <stop  offset="0.2752" style="stop-color:#52AC55"/>
        <stop  offset="0.8681" style="stop-color:#49645A"/>
        <stop  offset="1" style="stop-color:#47535B"/>
      </linearGradient>
      <polygon id="accend" class="st0" points="78.4,582.9 78.4,445 0,445 0,707.1 79,582.9   "/>

        <linearGradient …

我有一个富文本编辑器字段，它接受一个嵌入块，其中内容类型包含指向另一种内容类型的引用链接。

像这样：

content (rich text field)
  - group (embedded block)
    - group-items (reference field)
      - item 1 (referenced content)
      - item 2 (referenced content)

我怎样才能referenced content使用物品@contentful/rich-text-react-renderer？

我目前有这个：

import { MARKS, BLOCKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => {
      console.log(node);
      return true;
    }
  },
  renderText: text => text.replace('!', '?'),
};

这给了我一堆id，但不是我真正想要的条目的字段数据。

content: []
data:
target: {sys: {…}}
__proto__: Object
nodeType: "embedded-entry-block"

content: []
data:
target: …