Add multiple ids in a function

Question

I'm trying to make this code work with more than one id and i can't make it work. I have tried with querySelectorAll, but with not succes. I also read this article, but none of the options worked for me Can anyone help me?

This is the code:

<script>
         function Scroller(options) {
           this.svg = options.el;
           //Animation will end when the end is at which point of othe page. .9 is at about 90% down the page/
           // .1 is 10% from the top of the page. Default is middle of the page.
           this.animationBounds = {};
           this.animationBounds.top = options.startPoint || .5;
           this.animationBounds.bottom = options.endPoint || .5;
           this.animationBounds.containerBounds = this.svg.getBoundingClientRect();
           this.start = this.getPagePosition('top');
           this.end = this.getPagePosition('bottom');
           this.svgLength = this.svg.getTotalLength();
           this.svg.style.strokeDasharray = this.svgLength;
           this.animateLine();
           window.addEventListener('scroll', this.animateLine.bind(this));
         }

         Scroller.prototype.getPagePosition = function (position) {
           //These positions are all relative to the current window. So they top of the page will be negative and thus need to be
           //subtracted to get a positive number
           var distanceFromPageTop = document.body.getBoundingClientRect().top;
           var divPosition = this.animationBounds.containerBounds[position];
           var startPointInCurrentWindow = window.innerHeight * this.animationBounds[position];
           return divPosition - distanceFromPageTop - startPointInCurrentWindow;
         };

         Scroller.prototype.animateLine = function () {
           this.currentVisiblePosition = window.pageYOffset;
           if (this.currentVisiblePosition < this.start) {
             this.svg.style.strokeDashoffset = this.svgLength;
           }

           if (this.currentVisiblePosition > this.end) {
             this.svg.style.strokeDashoffset = '0px';
           }

           if (this.currentVisiblePosition > this.start && this.currentVisiblePosition < this.end) {
             this.svg.style.strokeDashoffset = this.distanceRemaining() * this.pixelsPerVerticalScroll() + 'px';
           }
         };

         Scroller.prototype.distanceRemaining = function () {
           return this.end - this.currentVisiblePosition;
         };

         Scroller.prototype.pixelsPerVerticalScroll = function () {
           this.verticalDistance = this.end - this.start;
           return this.svgLength / this.verticalDistance;
         };

         new Scroller({
            'el': **document.getElementById('line')**,
             'startPoint': .8,
             'endPoint': .5
         });
      </script>

Barmar · Answer 1 · 2016-07-13T23:47:30.233

0

Loop over all the elements matching the selector.

var lines = document.querySelectorAll("#line, #line1, #line2");
for (var i = 0; i < lines.length; i++) {
    new Scroller({
        el: lines[i],
        startPoint: .8,
        endPoint: .5
    });
}

edited Jul 13 '16 at 23:47

answered Jul 13 '16 at 23:19

Barmar

741,623
53
500
612

Thanks Barmar, but I think im doing something wrong. I have ids call "#line1, #line2 #line3, etc", so the code would be this? (...) `Scroller.prototype.pixelsPerVerticalScroll = function () { this.verticalDistance = this.end - this.start; return this.svgLength / this.verticalDistance; }; var lines = document.querySelectorAll('#line, #line1, #line2'); for (var i = 0; i < lines.length; i++) { new Scroller({ el: lines[i], startPoint: .8, endPoint: .5 });` – Rocio Jul 13 '16 at 23:45
What does it do wrong? Can you make a jsfiddle that demonstrates the problem? – Barmar Jul 13 '16 at 23:54
When I copy the scripts and use them with one id it works `new Scroller({ 'el': document.getElementById('line5'), 'startPoint': .8, 'endPoint': .5 });` But when I try to put it all in one fuction with your code, it stops working – Rocio Jul 14 '16 at 00:09
Maybe there's a problem with the `Scroller` class so that you can only have one of them on a page. – Barmar Jul 14 '16 at 00:12
Can you make a demonstration, and explain what it's supposed to do? – Barmar Jul 14 '16 at 00:13
I get 403 Forbidden. Use [Stack Snippet](http://meta.stackoverflow.com/questions/270944/feedback-requested-stack-snippets-2-0) to put the demonstration in your question. – Barmar Jul 14 '16 at 00:26

Add multiple ids in a function

1 Answers1