не работает js скрипт

[433]

<script src="catalog/view/javascript/vue-scroll-progress.js" type="text/javascript"></script>

 

var VueScrollProgress = {

  install: function install(Vue, options) {

    Vue.mixin({

      mounted: function mounted() {

        var progressContainerEl,

          progressEl,

          windowScrollPixels,

          windowScrollPercents,

          height

 

        progressContainerEl = document.createElement('div')

        progressContainerEl.id = 'progress-container-el'

        progressContainerEl.style.position = 'fixed'

        progressContainerEl.style.width = '100%'

        progressContainerEl.style.height = '4px'

        progressContainerEl.style.backgroundColor = 'transparent'

        progressContainerEl.style.left = 0

        progressContainerEl.style.right = 0

        progressContainerEl.style.top = 0

        progressContainerEl.style.zIndex = 99999

 

        progressEl = document.createElement('div')

        progressEl.id = 'progress-el'

        progressEl.style.width = '0px'

        progressEl.style.height = '4px'

        progressEl.style.backgroundColor = '#42b883'

 

        windowScrollPixels = 0

        windowScrollPercents = 0

 

        function getHeight() {

          height = (document.documentElement.scrollHeight - document.documentElement.clientHeight)

        }

 

        const debounce = (func, wait, immediate) => {

          var timeout

          return () => {

            const context = this,

              args = arguments

            const later = function () {

              timeout = null

              if (!immediate) func.apply(context, args)

            }

            const callNow = immediate && !timeout

            clearTimeout(timeout)

            timeout = setTimeout(later, wait)

            if (callNow) func.apply(context, args)

          }

        }

 

        var h = document.body

        h.addEventListener('resize', debounce(() => {

          getHeight()

        }, 200, false), false)

 

        getHeight()

 

        window.addEventListener('scroll', () => {

          windowScrollPixels = (document.body.scrollTop ||

            document.documentElement.scrollTop)

          windowScrollPercents = (windowScrollPixels / height) * 100

          progressEl.style.width = windowScrollPercents + '%'

        })

 

        if (!document.getElementById('progress-container-el')) {

          progressContainerEl.appendChild(progressEl)

          document.body.appendChild(progressContainerEl)

        }

      }

    })

  }

}

 

if (typeof window !== 'undefined' && window.Vue)

  window.VueScrollProgress = VueScrollProgress

 

export default VueScrollProgress

 

 

в чем проблема, почему скрипт не работет? 

[433]

Так же в самом header.twig целых 3 скрипта но отображается только 1, как правильно подключать если там только catalog/view/javascript/common.js отображается?  

Почему вобще подключаются аж 4 js скрипта а в самом сайте через инспектор только 1 показывается? 

{% endif %с

<script src="catalog/view/javascript/vue-scroll-progress.js" type="text/javascript"></script>

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />

<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />

<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">

<script src="catalog/view/javascript/vue-scroll-progress.js" type="text/javascript"></script>

{% for style in styles %}

Змінено 13 січня 2020 користувачем 433

[433]

Добавил скрипт и header и в body но он не работает! в чем проблема его? не могу понять суть этого vue js, как потом через один js файл его скомпилировать.

Нужно что ли еще сам vue.js установить в проект? и что это за компот получается. 

vue-scroll-progress-master.rar

Змінено 13 січня 2020 користувачем 433

[433]

Есть файл src, а есть build.js и build.js.map, что именно нужно добавлять? Просмотрел 2 курса по vue.js но общего понимания нет после них. 

И в crs дирректори какие-то настройки, дак еще и в docs\src другие файлы.

Думаю что vue-scroll-progress.js нужен для быстрой правки визуальных компонентов ,ну а дальше то что делать? 

Змінено 13 січня 2020 користувачем 433

[Shureg]

18 минут назад, 433 сказал:

Так же в самом header.twig целых 3 скрипта но отображается только 1, как правильно подключать если там только catalog/view/javascript/common.js

Я вам больше скажу, тут и этого скрипта не должно быть.

 

5 минут назад, 433 сказал:

Добавил скрипт и header и в body но он не работает! в чем проблема его? 

На все кнопочки на клавиатуре нажать одновременно не пробовали? Вдруг поможет.
А с чего вы решили, что он не работает? Или, наоборот, что может работать?
Без адреса сайта разговор бессмысленный.

[stickpro]

vue хотябы подлючили бы

[433]

1 час назад, stickpro сказал:

vue хотябы подлючили бы

подключили куда? 

[433]

что посоветуете сделать для понимания? в каком файле vue потом указать где именно находиться скачанный vue-cli? Не могу в гугле ничего найти, все курсы что смотрел нечего подробного не затрагивают. В феврале пойду на курсы по vue. 

Змінено 14 січня 2020 користувачем 433

[433]

нашел на jquery + если кому нужно еще 70 штук фичь https://romua1d.ru/bolee-70-plaginov-jquery-skrollinga-dlya-vashego-sajta/

 

Змінено 14 січня 2020 користувачем 433

[Shureg]

11 часов назад, 433 сказал:

В феврале пойду на курсы по vue. 

Я бы все-таки рекомендовал изучать математику с первого класса, а не с первого курса.
В данном случае - начать с изучения html, яваскрипт и сопуствующих вещей. А потом уж к фреймворкам переходить

[433]

В 15.01.2020 в 01:16, Shureg сказал:

В данном случае - начать с изучения html, яваскрипт и сопуствующих вещей. А потом уж к фреймворкам переходить

все есть в условно платных шаблонах, нового там ничего не придумать, иду туда для того что бы лучше разобраться с ajax, ну и конечно же научиться делать PWA приложения, т.к задумка фреймворков js именно в этом. 

Ну а с "голым" js не все так гладко - в общем для всего своя цель, главное понять это. На голом js не делают, то что делают на jquery и т.д на примере выше + всякие контейнеры со скролингом. 

Так же сейчас займусь изучением WOW.js и Animate.CSS

 

Лучше потратить силы на изучение php, его среды с готовыми компонентами в https://packagist.org/ работы и уж тем более перспектив гораздо больше в этом направлении. 

А то толку от js, html, css если по отдельности от пчп никаких фундаментальных знаний в добавлении отдельных секций div по разной ширине, высоте и т.д это не приподносит. 

Что бы что то да начало получаться на коммерческом уровне, нужно для начала скачать готовые проекты такого же уровня. 

Змінено 18 січня 2020 користувачем 433

[433]

А то требуют знать prestashop,woocommerce, jomla, drupal. Слишком много времени пройдет если самому, тыкать наугад. С бутстрапом, основами css я разобрался, опять таки без готовых шаблонов правильный задний фон по масштабу и т.д по урокам ютуба проблематично делать с 0. Сидишь такой год изучаешь, пытаешься найти "грааль" потом находишь что все раработчики используют код готовых компонентов и мышление тогда меняться. Нельзя быть умнее их не как одному. Невозможно мыслить как они с 0. 

Змінено 18 січня 2020 користувачем 433

[Shureg]

У вас какая-то каша в голове.
Из серии, нафига мне арифметика, если я посмотрел - требуются инженеры со знанием дифференциального и интегрального исчисления. Буду сразу их изучать, арифметика для лохов, за нее вообще никто бабла не платит.

[AlexDW]

правильно, нафига что-то учить..

нужно сразу так

 

[HyperLabTeam]

@433
вот так надо