主页 / user-190300

drtvader's questions

Martin Hope
drtvader
Asked: 2020-01-22 16:12:32 +0000 UTC
  • 0

有一个脚本 

function come(elem) {
var docViewTop = $(window).scrollTop(),
    docViewBottom = docViewTop + $(window).height(),
    elemTop = $(elem).offset().top,
    elemBottom = elemTop + $(elem).height();

     return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function mainAnim() {
   if (come('.js-animation')) {
      $('.js-animation').addClass('animation');
   }
}

$('.js-animation').each(function () {
    $(document).on('scroll', function () {
        mainAnim();
});

mainAnim();

});

.js-animation 类有几个块，当加载和滚动时，.animation 会添加到所有这些类中。
所以这里是如何制作它，以便在当前的 js 动画之前添加动画。

如何遍历所有js动画并仅在滚动的地方添加一个类

javascript
Martin Hope
drtvader
Asked: 2020-06-28 13:42:06 +0000 UTC
  • 0

我无法以任何方式将我的图钉添加到地图中，显示的是默认规范。

function init() {
  var myMap = new ymaps.Map('map', {
      center: [55.76, 37.64],
      zoom: 10
    }),
    objectManager = new ymaps.ObjectManager({
      clusterize: true,
      gridSize: 32,
      clusterDisableClickZoom: true
    });

  var BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
    '<div class="balloon" id="{{properties.id}}">' +
    '<a href="javascript:void(0);" title="" class="balloon__close"></a>' +
    '<div class="balloon__title">{{properties.title}}</div>' +
    '<ul class="balloon__list">' +
    '<li class="balloon__item">' +
    '<div class="balloon__text">Адрес:' +
    '<span>{{properties.addr}}</span>' +
    '</div>' +
    '</li>' +
    '<li class="balloon__item">' +
    '<div class="balloon__text">Телефон:' +
    '<span>{{properties.phone}}</span>' +
    '</div>' +
    '</li>' +
    '<li class="balloon__item">' +
    '<div class="balloon__text">Режим работы:' +
    '<span>{{properties.time}}</span>' +
    '</div>' +
    '</li>' +
    '<li class="balloon__item link">' +
    '<a href="javascript:void(0);" title="{{properties.web}}" class="balloon__text balloon__text--link">{{properties.web}}</a>' +
    '</li>' +
    '</ul>' +
    '</div>');

  // Чтобы задать опции одиночным объектам и кластерам,
  // обратимся к дочерним коллекциям ObjectManager.
  objectManager.objects.options.set({
    iconImageHref: '../img/pin.svg',
    iconImageSize: [95, 37], // размеры картинки
    iconImageOffset: [-11, -30] // смещение картинки
  });
  myMap.geoObjects.add(objectManager);

  $.ajax({
    url: "../json/map.json"
  }).done(function(data) {
    objectManager.add(data);
  });

}

ymaps.ready(init);

当我写这篇文章时，一切都很好： 

objectManager.objects.options.set('preset', 'islands#greenDotIcon');
objectManager.clusters.options.set('preset','islands#greenClusterIcons');
myMap.geoObjects.add(objectManager);

怎么了？

javascript
Martin Hope
drtvader
Asked: 2020-05-04 16:55:53 +0000 UTC
  • 4

有 2 个存储库，其中一个是最初进行的工作，另一个是为另一个开发人员创建的。痛苦的是第二个存储库被复制并再次初始化。

开发人员进行了更改，现在的问题是如何将它们拖到您的主存储库？也进行了其中的工作。

怎样成为？现在该怎么办？）

目前，提交似乎是在远程的帮助下拖动的在此处输入图像描述

但实际上并没有什么变化。

git
Martin Hope
drtvader
Asked: 2020-02-28 20:48:14 +0000 UTC
  • 1

如何修复构建错误

模块构建失败：ModuleBuildError：模块构建失败：} ^“}”之后的无效 CSS：预期的“}”，为“$180deg:180deg;”

.radial-progress {
  $circle-size: 50px;
  $circle-background: #d6dadc;
  $circle-color: #97a71d;
  $inset-size: 30px;
  $inset-color: #fbfbfb;
  $transition-length: 1s;
  $shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
  $percentage-color: #97a71d;
  $percentage-font-size: 22px;
  $percentage-text-width: 57px;
  // margin: 50px;
  width: $circle-size;
  height: $circle-size;
  background-color: $circle-background;
  border-radius: 50%;
  .circle {
    .mask,
    .fill,
    .shadow {
      width: $circle-size;
      height: $circle-size;
      position: absolute;
      border-radius: 50%;
    }
    .shadow {
      box-shadow: $shadow inset;
    }
    .mask,
    .fill {
      -webkit-backface-visibility: hidden;
      transition: -webkit-transform $transition-length;
      transition: -ms-transform $transition-length;
      transition: transform $transition-length;
      border-radius: 50%;
    }
    .mask {
      clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
      .fill {
        clip: rect(0px, $circle-size/2, $circle-size, 0px);
        background-color: $circle-color;
      }
    }
  }
  .inset {
    width: $inset-size;
    height: $inset-size;
    position: absolute;
    margin-left: ($circle-size - $inset-size)/2;
    margin-top: ($circle-size - $inset-size)/2;
    background-color: $inset-color;
    border-radius: 50%;
    box-shadow: $shadow;
    .percentage {
      height: $percentage-font-size;
      width: $percentage-text-width;
      overflow: hidden;
      position: absolute;
      top: ($inset-size - $percentage-font-size) / 2;
      left: ($inset-size - $percentage-text-width) / 2;
      line-height: 1;
      .numbers {
        margin-top: -$percentage-font-size;
        transition: width $transition-length;
        span {
          width: $percentage-text-width;
          display: inline-block;
          vertical-align: top;
          text-align: center;
          font-weight: 800;
          font-size: $percentage-font-size;
          // font-family:    "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
          color: $percentage-color;
        }
      }
    }
  }
  $180deg: 180deg;
  $100: 100;
  $i: 0;
  $increment: #{$180deg}/#{$100};
  .loop ($i) when ($i <=100) {
    &[data-progress="${i}"] {
      .circle {
        .mask.full,
        .fill {
          -webkit-transform: rotate($increment * $i);
          -ms-transform: rotate($increment * $i);
          transform: rotate($increment * $i);
        }
        .fill.fix {
          -webkit-transform: rotate($increment * $i * 2);
          -ms-transform: rotate($increment * $i * 2);
          transform: rotate($increment * $i * 2);
        }
      }
      .inset .percentage .numbers {
        width: $i * $percentage-text-width + $percentage-text-width;
      }
    }
    .loop($i + 1);
  }
  .loop($i);
}

到底是什么原因？

UPD
一般来说，它已经完成了：固定变量，从数字到字母，对UPD2
没有帮助

$i: 0;
$increment: 180deg / 100;
@for $i from 1 through 100 {
  &[data-progress="#{$i}"] {
    .circle {
      .mask.full,
      .fill {
        -webkit-transform: rotate($increment * $i);
        -ms-transform: rotate($increment * $i);
        transform: rotate($increment * $i);
      }
      .fill.fix {
        -webkit-transform: rotate($increment * $i * 2);
        -ms-transform: rotate($increment * $i * 2);
        transform: rotate($increment * $i * 2);
      }
    }
    .inset .percentage .numbers {
      width: $i * $percentage-text-width + $percentage-text-width;
    }
  }
}

sass
Martin Hope
drtvader
Asked: 2020-06-30 13:37:41 +0000 UTC
  • 0

如何制作这样的动画？
视频
您需要制作相同的链接交替外观和相同的隐藏。一切都发生在悬停上（悬停 - 出现，移除光标 - 消失）

$(document).ready(function() {
    $('.share__link').hover(function(i) {
        $('.share__link-social').delay((i++) * 500).fadeTo(1000, 1);
        $(this).fadeOut(250);
    });
});
.share {
    position: relative;
}

.share__link {
    position: relative;
    z-index: 2;
}

.share__hidden {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}

.share__link-social {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 15px;
    opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="share">
    <a href="javascript:void(0);" class="share__link" title="share">
        <span class="share__circle"></span>
        <span class="share__text">share</span>
    </a>
    <div class="share__hidden">
        <a href="javascript:void(0);" class="share__link-social share__link-social--whats-app" title="share">1</a>
        <a href="javascript:void(0);" class="share__link-social share__link-social--facebook" title="share">2</a>
        <a href="javascript:void(0);" class="share__link-social share__link-social--messenger" title="share">3</a>
        <a href="javascript:void(0);" class="share__link-social share__link-social--mail" title="share">4</a>
    </div>
</div>

它不是那样工作的。悬停后我不知道如何隐藏它，触摸设备也有问题，在同一个地方有必要以其他方式规定条件。
https://jsfiddle.net/tt1vqakx/

javascript
Martin Hope
drtvader
Asked: 2020-05-03 21:05:55 +0000 UTC
  • 0

你好！
我有一个mixin，在某些地方，在链接中，我需要将它添加到id中，我如何通过变量和条件来完成？ 

mixin product-slider-item(title, image, text, new1, finger)
+e.item(class!=attributes.class)
    +e('a').link(href='javascript:void(0);' title='#{title}' class!=attributes.class)
        if new1 == true
            +all-icons('--catalog-novinka --catalog', '--catalog', true)
        if finger == true
            +all-icons('--sticker --catalog-sticker', '--catalog', true)
        +e.image-wrap(class!=attributes.class)
            +e('img').image(src="#{image}" alt="" class!=attributes.class)
        +e.info(class!=attributes.class)
            +e.title #{title}
            +e.text
                span #{text}
            +e.more-link(class!=attributes.class)
                span ПОДРОБНЕЕ

必须
在第一种情况下 获得输出

<a href="javascript:void(0);" title="U5011" **data-id="1"** class="b-product-slider__link b-product-slider__link--catalog"></a>

在第二种情况下 

<a href="javascript:void(0);" title="U5011" class="b-product-slider__link b-product-slider__link--catalog"></a>
jade
Martin Hope
drtvader
Asked: 2020-01-31 14:03:23 +0000 UTC
  • 3

布局是移动优先的，所以只加载移动样式。出于某种原因，媒体在 9k 中不工作，已经做了什么：

<meta http-equiv="X-UA-Compatible" content="IE=9"> 

@import "concat-less/bem.mobile.less";
// 600+
@media (min-width: 600px) {
   @import "concat-less/bem.tablet.less";
}
// 960px and (not handheld) - десктопы (4 колонки)
@media (min-width: 960px) {
    @import "concat-less/bem.desktop.min.less";
}
// 1025px - планшеты и десктопы (4 колонки)
@media (min-width: 1025px) {
    @import "concat-less/bem.desktop.less";
}
// максимальная ширина контейнера 1280
@media (min-width: 1280px) {
    @import "concat-less/bem.desktop.big.less";
}

在 IE 11 的 IE 9 模拟器中，一切都很好，但在真正的 IE 9 中，一切都不好。
问题的原因是什么？

html
Martin Hope
drtvader
Asked: 2020-12-15 13:07:13 +0000 UTC
  • 0

你好！
为什么脚本在权限为 1024 时向 body 添加类？
理论上应该是这样工作的，脚本监控屏幕分辨率，当分辨率小于960时，开始工作。

$(window).resize(function() {
    if(document.documentElement.clientWidth < 959) {
        $('.js-open-form, .b-menu__to-form').click('on', function() {
            $.browser_device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

            if ($.browser_device) {
                search_elementTop = $(document).scrollTop();
                $(function() {
                    $('html, body').animate({
                       scrollTop: search_elementTop
                    }, 500);
                });
            }

            $('body').addClass('active-form');

            $('.b-feedback-form').addClass('active');
        });

        $('.b-feedback-form__close-link').click('on', function() {
            $('.b-feedback-form').removeClass('active');
            $('body').removeClass('active-form');
        });
    }
});

UPD 是这样工作的：

$(window).resize(function() {
    $('.js-open-form, .b-menu__to-form').click('on', function() {
        if(document.documentElement.clientWidth < 959) {
            $.browser_device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

            if ($.browser_device) {
                search_elementTop = $(document).scrollTop();
                $(function() {
                    $('html, body').animate({
                       scrollTop: search_elementTop
                    }, 500);
                });
            }

            $('body').addClass('active-form');

            $('.b-feedback-form').addClass('active');
            $('.b-feedback-form__close-link').click('on', function() {
                $('.b-feedback-form').removeClass('active');
                $('body').removeClass('active-form');
            });
        } else {
            $('.b-feedback-form').removeClass('active');
            $('body').removeClass('active-form');
        }
    });
});
jquery
Martin Hope
drtvader
Asked: 2020-12-14 17:49:34 +0000 UTC
  • 0

如何做到这一点，给出了一个例子

.b-about__carousel-inner {
  height: auto;
  position: relative;
}
.b-about .carousel-fade .carousel-inner .active {
  opacity: 1;
  position: relative;
}
.b-about__indicator-list {
  margin-top: -54px;
  width: 100%;
  top: 50%;
  bottom: auto;
  margin-top: -74px;
  position: absolute;
}
.b-about__indicator-list li {
  width: 17px;
  height: 2px;
  margin: 0 3px;
  background-color: #cfcfcf;
  border: 0;
  border-radius: 0;
}
.b-about__indicator-item.active {
  width: 17px;
  height: 2px;
  margin: 0 3px;
  background-color: #ed454b;
  margin: 0 6px;
}
.b-about__container-image {
  height: auto;
  width: 100%;
  background-color: #e6e6e6;
  text-align: center;
  position: relative;
}
.b-about__image {
  display: block;
  width: 100%;
}
.b-about__information {
  padding: 91px 15px 0 25px;
  margin: 0 auto;
  height: 300px;
}
<div role="listbox" class="b-about__carousel-inner carousel-inner">
  <div class="active b-about__item item">
    <div class="b-about__container-image">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTD60q-ZK6Jnex3EvBk8tjS205SgzGkqzCQ0qDhgy-D84lrtTax151OVPs" alt="" title="" class="b-about__image">
    </div>
    <div class="b-about__information">
      <h2 class="b-title b-title--about">Двигатель</h2>
      <div class="b-about__text-about">
        <p>Надежный, прочный и&nbsp;экономичный 4-цилиндровый двигатель</p>
      </div>
    </div>
  </div>




  <!-- Controls-->

  <ol class="b-about__indicator-list carousel-indicators">
    <li data-target="#about" data-slide-to="0" class="active b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="1" class="b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="2" class="b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="3" class="b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="4" class="b-about__indicator-item"></li>
  </ol>
</div>

css
Martin Hope
drtvader
Asked: 2020-12-01 03:28:56 +0000 UTC
  • 0

你好！
如何检查这些输入？
现在它只适用于第一个，需要做什么才能随时检查两者？

<script>
    function formatDate(){
        str = document.getElementById('Date').value;
        var err=[]

        function TstDate(){
            str2=str.split(".");
            if(str2.length!=3){return false;}
            str2=str2[2] +'-'+ str2[1]+'-'+ str2[0];
            if(new Date(str2)=='Invalid Date'){return false;}
            return str;
        }
        var S=TstDate()
        if(S){err.splice(0,1);
           document.getElementById("output").innerHTML = " ";
        } else {
            document.getElementById("output").innerHTML = "Введите правильно дату";
        };
    }
</script>
<div class="input-inner">
    <form>
        <input type="text" id="Date" placeholder="00.00.0000" class="firstDate" name="firstDate" onchange="formatDate(this.value);">
        <input type="text" id="Date" placeholder="00.00.0000" class="secondDate" name="secondDate" onchange="formatDate(this.value);">
    </form>
    <span id="output"></span>
</div>
javascript
Martin Hope
drtvader
Asked: 2020-11-30 17:24:03 +0000 UTC
  • 0

你好！有一段代码： 

<div class="input-inner">
    <form>
        <input type="date" class="firstDate" name="firstDate">
        <input type="date" class="secondDate" name="secondDate">
    </form>
</div>

如何用JS随时随地接收数据？那些。不按按钮
检查在字段中填写日期并比较这两个日期是否正确？ 

    var firstDate = document.getElementsByClassName("firstDate")[0].value;
    var secondDate = document.getElementsByClassName("secondDate")[0].value;

    function formatDate(date) {

        var dd = date.getDate();
        if (dd < 10) dd = '0' + dd;

        var mm = date.getMonth() + 1;
        if (mm < 10) mm = '0' + mm;

        var yy = date.getFullYear() % 100;
        if (yy < 10) yy = '0' + yy;

        return dd + '.' + mm + '.' + yy;
    }

    var d = new Date(2014, 0, 30);

有这样一段代码，但我不知道如何进一步处理它，我会用 jquery 来完成，但这里需要在纯 JS 中如何使用 formatDate 函数检查此数据

javascript
Martin Hope
drtvader
Asked: 2020-09-30 16:55:23 +0000 UTC
  • 2

你好！
由于某些原因，当屏幕高度降低时，块从容器中爬出，如何解决？

body,
html {
  height: 100%;
}

.b-page-wrapper {
  height: 100%;
}

p {
  margin-top: 500px;
}

.b-header {
  background-color: #fafafa;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  border-bottom: 0;
  padding-left: 23px;
  padding-right: 25px;
  height: 60px;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border: 2px solid #000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.b-container {
  height: -webkit-calc(100% - 60px);
  height: calc(100% - 60px);
  min-height: 600px;
  position: relative;
  border: 2px solid #000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.b-aside {
  width: -webkit-calc(20% + 9px);
  width: calc(20% + 9px);
  background-color: #202020;
  border-right: solid 2px #000;
}

.b-main {
  display: inline-block;
  width: -webkit-calc(80% - 9px);
  width: calc(80% - 9px);
  background-color: #fafafa;
}

.b-aside--project-diary {
  width: -webkit-calc(100%/3 - 41px);
  width: calc(100%/3 - 41px);
  border-right: 0;
  border-left: solid 2px #000;
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#facf61), to(#fa5d5d)), -webkit-gradient(linear, left bottom, left top, from(#e0093d), to(#fff));
  background-image: -webkit-linear-gradient(top, #facf61, #fa5d5d), -webkit-linear-gradient(bottom, #e0093d, #fff);
  background-image: linear-gradient(to bottom, #facf61, #fa5d5d), linear-gradient(to top, #e0093d, #fff);
  width: -webkit-calc(20% + 9px);
  width: calc(20% + 9px);
  background-color: #202020;
  border-right: solid 2px #000;
}

.b-tool-project__add {
  margin-bottom: 585px;
}
<div class="b-page-wrapper">
  <header class="b-header">header</header>
  <div class="b-container">
    <aside class="b-aside b-aside--max-menu"></aside>
    <main class="b-main b-main--page-project-team">
      <div class="b-tool-project b-tool-project--team">
        <div class="b-tool-project__top b-tool-project__top--team">
          <div class="b-tool-project__title">text</div><a href="javascript:void(0);" title=" Initial brief" class="b-tool-project__link-brief"><i class="icon"></i>text</a>
        </div>
        <div class="b-todo b-todo--team">
          <ul class="b-todo__header-list b-todo__header-list--team">
            <li class="b-todo__header-item">To-do list name</li>
            <li class="b-todo__header-item">Deadline</li>
            <li class="b-todo__header-item">Assigned</li>
          </ul>
          <ul class="b-todo__todo-list">
            <li class="b-todo__todo-item b-todo__todo-item--team"><a href="javascript:void(0);" title="" class="b-todo__link b-todo__link--team"><span class="b-todo__name b-todo__name--team">text</span><span class="b-todo__deadline b-todo__deadline--team">textm</span><span class="b-todo__assigned b-todo__assigned--team"><span class="b-todo__image-inner"><img src="/images/content/avatar.jpg" alt="Oddity Studio" title="Oddity Studio" class="b-todo__image b-todo__image--team"></span><span class="b-todo__assigned-text b-todo__assigned-text--team">text</span></span></a>
            </li>
            <li class="b-todo__todo-item b-todo__todo-item--team"><a href="javascript:void(0);" title="" class="b-todo__link b-todo__link--team"><span class="b-todo__name b-todo__name--team">text</span><span class="b-todo__deadline b-todo__deadline--team">text</span><span class="b-todo__assigned b-todo__assigned--team"><span class="b-todo__image-inner"><img src="/images/content/avatar.jpg" alt="Client" title="Client" class="b-todo__image b-todo__image--team"></span><span class="b-todo__assigned-text b-todo__assigned-text--team">text</span></span></a>
            </li>
            <li class="b-todo__todo-item b-todo__todo-item--team"><a href="javascript:void(0);" title="" class="b-todo__link b-todo__link--team"><span class="b-todo__name b-todo__name--team">text</span><span class="b-todo__deadline b-todo__deadline--team">text</span><span class="b-todo__assigned b-todo__assigned--team"><span class="b-todo__image-inner"><img src="/images/content/avatar.jpg" alt="Oddity Studio Super long name" title="Oddity Studio Super long name" class="b-todo__image b-todo__image--team"></span><span class="b-todo__assigned-text b-todo__assigned-text--team">text</span></span></a>
            </li>
          </ul>
        </div>
        <div class="b-tool-project__add b-tool-project__add--team"><a href="javascript:void(0);" title="Add task" class="b-tool-project__link-add"><i class="icon-icon-"></i>text</a>
        </div>
        <div class="b-tool-project__text-block b-tool-project__text-block--team">
          <div class="b-tool-project__text">text</div>
        </div>
      </div>
    </main>
    <aside class="b-aside b-aside--project-diary"></aside>
  </div>

css