1

I'm trying to make a scrolling image that switches to a different 16:9 section using navigation buttons. Everything works, except jQuery seems to be limiting if(igBase.css('left') > igMaxLeft) to -1200px or greater, even though igMaxLeft is, for example, -2600px. Is there any reason for this behavior? The math looks right to me.

    var igWrap = $('.infographic-wrapper');
    var igBase = $('.infographic-base');
    var igPrev = $('.infographic-previous');
    var igNext = $('.infographic-next');
    var igFrameWidth = igWrap.css('width');
    var igMaxLeft = parseInt(igBase.css('width'), 10) + parseInt(igFrameWidth, 10);
    igMaxLeft = '-' + igMaxLeft + 'px';

    igPrev.click(function(){
        if(igBase.css('left') < '0px'){
            igBase.css('left','+=' + igFrameWidth);
        }
    });
    igNext.click(function(){
        if(igBase.css('left') > igMaxLeft){
            igBase.css('left','-=' + igFrameWidth);
        }
    });

Here's the full example: https://codepen.io/arinthros/pen/YejRey

Arinthros
  • 168
  • 10
  • The `<` and `>` operators for *strings* is different than for *numbers* (as `>` with strings uses Lexical-aka-Dictionary Ordering). For example, these are "false": `"-200px" < -100`, `"-200px" < "-100px"`. Fix: use numbers with `>` for proper numerical ordering. – user2864740 Feb 23 '18 at 16:38
  • 1
    Thanks, I'll convert the strings to integers. – Arinthros Feb 23 '18 at 16:41
  • See also: https://stackoverflow.com/questions/10198257 , https://stackoverflow.com/questions/24533170 – user2864740 Feb 23 '18 at 16:43

1 Answers1

2

Converting the css pixel strings into integers solved the problem. Thanks user2864740 for the tip.

    var igMaxLeft = (parseInt(igBase.css('width'), 10) - parseInt(igFrameWidth, 10)) * -1;

    igPrev.click(function(){
        if(parseInt(igBase.css('left'), 10) < 0){
            igBase.css('left','+=' + igFrameWidth);
        }
    });
    igNext.click(function(){
        if( 0 >= parseInt(igBase.css('left'), 10) && parseInt(igBase.css('left'), 10) > igMaxLeft){
            igBase.css('left','-=' + igFrameWidth);
        }
    });
Arinthros
  • 168
  • 10