Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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


Recommended Posts

<script src="catalog/view/javascript/vue-scroll-progress.js" type="text/javascript"></script>
 
var VueScrollProgress = {
  install: function install(Vueoptions) {
    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 = (funcwaitimmediate=> {
          var timeout
          return () => {
            const context = this,
              args = arguments
            const later = function () {
              timeout = null
              if (!immediatefunc.apply(contextargs)
            }
            const callNow = immediate && !timeout
            clearTimeout(timeout)
            timeout = setTimeout(laterwait)
            if (callNowfunc.apply(contextargs)
          }
        }
 
        var h = document.body
        h.addEventListener('resize'debounce(() => {
          getHeight()
        }, 200false), 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
 
 
в чем проблема, почему скрипт не работет? 
Link to post
Share on other sites

Так же в самом 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 %}

Безымянный.png

Edited by 433
Link to post
Share on other sites

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

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

vue-scroll-progress-master.rar

Edited by 433
Link to post
Share on other sites

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

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

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

Edited by 433
Link to post
Share on other sites

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

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

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

 

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

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

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

Edited by 433
Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

В 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 по разной ширине, высоте и т.д это не приподносит. 

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

Edited by 433
Link to post
Share on other sites

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

Edited by 433
Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.