Jump to content
433

не работает 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
 
 
в чем проблема, почему скрипт не работет? 

Share this post


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

Share this post


Link to post
Share on other sites

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

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

vue-scroll-progress-master.rar

Edited by 433

Share this post


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

Share this post


Link to post
Share on other sites
18 минут назад, 433 сказал:

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

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

 

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
1 час назад, stickpro сказал:

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

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

Share this post


Link to post
Share on other sites

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

Edited by 433

Share this post


Link to post
Share on other sites
11 часов назад, 433 сказал:

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

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

Share this post


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

Share this post


Link to post
Share on other sites

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

Edited by 433

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

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.