Problème avec JS

ptitbow · Message par **ptitbow** » 19 août 2019, 14:36

Bonjour,

Je fais appel à votre aide concernant un bout de code trouvé sur codepen. En effet, je souhaiterais ajouter une timeline verticale à mon site dans l'idée d'avoir quelque chose de la sorte : https://codepen.io/seomoneyaff/pen/KQZYjo

Le dev ne facilite pas la tâche en utilisant du pug, scss et babel mais j'ai trouvé le moyen de convertir via https://pughtml.com/ ou https://www.cssportal.com/scss-to-css/

J'arrive à quelques chose de la sorte (après conversion html/css/js) :

Code : Tout sélectionner


<html>

<article>
    <nav>
        <ul>
            <li><span>2015</span></li>
            <li><span>2016</span></li>
            <li><span>2017</span></li>
            <li><span>2018</span></li>
            <li><span>2019</span></li>
            <li><span>2020</span></li>
        </ul>
    </nav>
    
    <section>
        <div>
            <h2>2015</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin, dolor malesuada mattis tincidunt, dolor urna faucibus dolor, et ornare sem leo sit amet orci. Etiam nec laoreet mauris. Mauris eleifend augue vitae purus viverra, at consectetur dolor pretium. Suspendisse mollis blandit orci, at malesuada mi sodales nec. Vivamus ultrices, quam in rutrum porta, quam leo semper metus, ac varius enim felis pretium leo. In congue nec risus nec tempor. Cras et congue velit. .</p>
            <h2>2016</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin, dolor malesuada mattis tincidunt, dolor urna faucibus dolor, et ornare sem leo sit amet orci. Etiam nec laoreet mauris. Mauris eleifend augue vitae purus viverra, at consectetur dolor pretium. Suspendisse mollis blandit orci, at malesuada mi sodales nec. Vivamus ultrices, quam in rutrum porta, quam leo semper metus, ac varius enim felis pretium leo. In congue nec risus nec tempor. Cras et congue velit.</p>
            <h2>2017</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin, dolor malesuada mattis tincidunt, dolor urna faucibus dolor, et ornare sem leo sit amet orci. Etiam nec laoreet mauris. Mauris eleifend augue vitae purus viverra, at consectetur dolor pretium. Suspendisse mollis blandit orci, at malesuada mi sodales nec. Vivamus ultrices, quam in rutrum porta, quam leo semper metus, ac varius enim felis pretium leo. In congue nec risus nec tempor. Cras et congue velit.</p>
            <h2>2018</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin, dolor malesuada mattis tincidunt, dolor urna faucibus dolor, et ornare sem leo sit amet orci. Etiam nec laoreet mauris. Mauris eleifend augue vitae purus viverra, at consectetur dolor pretium. Suspendisse mollis blandit orci, at malesuada mi sodales nec. Vivamus ultrices, quam in rutrum porta, quam leo semper metus, ac varius enim felis pretium leo. In congue nec risus nec tempor. Cras et congue velit.</p>
            <h2>2019</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin, dolor malesuada mattis tincidunt, dolor urna faucibus dolor, et ornare sem leo sit amet orci. Etiam nec laoreet mauris. Mauris eleifend augue vitae purus viverra, at consectetur dolor pretium. Suspendisse mollis blandit orci, at malesuada mi sodales nec. Vivamus ultrices, quam in rutrum porta, quam leo semper metus, ac varius enim felis pretium leo. In congue nec risus nec tempor. Cras et congue velit.</p>
            <h2>2020</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin, dolor malesuada mattis tincidunt, dolor urna faucibus dolor, et ornare sem leo sit amet orci. Etiam nec laoreet mauris. Mauris eleifend augue vitae purus viverra, at consectetur dolor pretium. Suspendisse mollis blandit orci, at malesuada mi sodales nec. Vivamus ultrices, quam in rutrum porta, quam leo semper metus, ac varius enim felis pretium leo. In congue nec risus nec tempor. Cras et congue velit.</p>
        </div>
    </section>
</article>
</html>


<style>
@import url('https://fonts.googleapis.com/css?family=Exo+2:400,700&amp;subset=cyrillic');
 html {
     box-sizing: border-box;
}
 *, *::before, *::after {
     box-sizing: inherit;
}
 body {
     font-family: 'Exo 2', sans-serif;
     line-height: 1.5;
}
 .wrapper {
     margin: 0 auto;
     padding: 0 16.66% 50px;
     width: 100%;
}
 article {
     position: relative;
     max-width: 980px;
     margin: 0 auto;
}
 .timeline__nav {
     position: fixed;
     z-index: 99;
     top: 0;
     transition: top 0.3s ease-out;
}
 .timeline__nav ul {
     list-style: none;
     list-style-position: inside;
     margin: 15px 0;
}
 .timeline__nav ul li {
     margin: 15px 0;
     padding-left: 0;
     list-style-type: none;
     color: #bfc1c3;
     border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
     cursor: pointer;
     transition: all 0.3s ease-out;
}
 .timeline__nav ul li.active {
     font-weight: bold;
     color: #f94125;
     border-bottom: 1px dotted transparent;
     transform: scale(1.2);
}
 .timeline__nav ul li:hover {
     color: #000;
}
</style>


<script>
$(() =&gt; {
    let stickyTop = 0,
        scrollTarget = false

    let timeline = $('.timeline__nav'),
        items = $('li', timeline),
        milestones = $('.timeline__section .milestone'),
        offsetTop = parseInt(timeline.css('top'))

    const TIMELINE_VALUES = {
        start: 190,
        step: 30
    }

    $(window).resize(function () {
        timeline.removeClass('fixed')

        stickyTop = timeline.offset().top - offsetTop

        $(window).trigger('scroll')
    }).trigger('resize')

    $(window).scroll(function () {
        if ($(window).scrollTop() &gt; stickyTop) {
            timeline.addClass('fixed')
        } else {
            timeline.removeClass('fixed')
        }
    }).trigger('scroll')

    items.find('span').click(function () {
        let li = $(this).parent(),
            index = li.index(),
            milestone = milestones.eq(index)

        if (! li.hasClass('active') &amp;&amp; milestone.length) {
            scrollTarget = index

            let scrollTargetTop = milestone.offset().top - 80

            $('html, body').animate({ scrollTop: scrollTargetTop }, {
                duration: 400,
                complete: function complete() {
                    scrollTarget = false
                }
            })
        }
    })

    $(window).scroll(function () {
        let viewLine = $(window).scrollTop() + $(window).height() / 3,
            active = -1

        if (scrollTarget === false) {
            milestones.each(function () {
                if ($(this).offset().top - viewLine &gt; 0) {
                    return false
                }

                active++
            })
        } else {
            active = scrollTarget
        }

        timeline.css('top', -1 * active * TIMELINE_VALUES.step + TIMELINE_VALUES.start + 'px')

        items.filter('.active').removeClass('active')

        items.eq(active != -1 ? active : 0).addClass('active')
    }).trigger('scroll')
})

</script>

Quand je fais quelques tests, je remarque que tout est OK dans l'html, css aussi mais le js ne s'execute pas.

Avez vous des pistes ? Merci d'avance

Message par **webmaster** » 19 août 2019, 14:47

Bonjour

La conversion a généré des erreurs
Il y a des des > et des & convertit en html
par exemple à la ligne 91
$(() => {

Il faudrait revoir la conversion et séparer les types HTML/CSS/JS

ptitbow · Message par **ptitbow** » 19 août 2019, 16:22

J'ai corrigé le tir de cette façon, le css fonctionne correctement sauf pour le lien d'ancrage (est-ce du au JS ?)

Code : Tout sélectionner

<html>

<article class="timeline">
    <nav class="timeline__nav">
        <ul>
            <li><span>1993</span></li>
            <li><span>1994</span></li>
            <li><span>1995</span></li>
            <li><span>1996</span></li>
            
        </ul>
    </nav>
    <section class="timeline__section">
        <div class="textsample">
            <h2 class="milestone">1993</h2>
            <p>test</p>
            <h2 class="milestone">1994</h2>
            <p>OK</p>
            <h2 class="milestone">1995</h2>
            <p>Hello world</p>
            <h2 class="milestone">1996</h2>
            <p>querty</p>
            
        </div>
    </section>
</article>
</html>

<style>
@import url('https://fonts.googleapis.com/css?family=Exo+2:400,700&subset=cyrillic');
 html {
	 box-sizing: border-box;
}
 *, *::before, *::after {
	 box-sizing: inherit;
}
 body {
	 font-family: 'Exo 2', sans-serif;
	 line-height: 1.5;
}
 .textsample {
	 margin: 0 auto;
	 padding: 0 16.66% 50px;
	 width: 100%;
}
 article {
	 position: relative;
	 max-width: 980px;
	 margin: 0 auto;
}
 .timeline__nav {
	 position: fixed;
	 z-index: 99;
	 top: 0;
	 transition: top 0.3s ease-out;
}
 .timeline__nav ul {
	 list-style: none;
	 list-style-position: inside;
	 margin: 15px 0;
}
 .timeline__nav ul li {
	 margin: 15px 0;
	 padding-left: 0;
	 list-style-type: none;
	 color: #bfc1c3;
	 border-bottom: 1px dotted rgba(0,0,0,0.3);
	 cursor: pointer;
	 transition: all 0.3s ease-out;
}
 .timeline__nav ul li.active {
	 font-weight: bold;
	 color: #f94125;
	 border-bottom: 1px dotted transparent;
	 transform: scale(1.2);
}
 .timeline__nav ul li:hover {
	 color: #000;
}
 
</style>

<script>
$(function () {
  var stickyTop = 0,
      scrollTarget = false;
  var timeline = $('.timeline__nav'),
      items = $('li', timeline),
      milestones = $('.timeline__section .milestone'),
      offsetTop = parseInt(timeline.css('top'));
  var TIMELINE_VALUES = {
    start: 190,
    step: 30
  };
  $(window).resize(function () {
    timeline.removeClass('fixed');
    stickyTop = timeline.offset().top - offsetTop;
    $(window).trigger('scroll');
  }).trigger('resize');
  $(window).scroll(function () {
    if ($(window).scrollTop() > stickyTop) {
      timeline.addClass('fixed');
    } else {
      timeline.removeClass('fixed');
    }
  }).trigger('scroll');
  items.find('span').click(function () {
    var li = $(this).parent(),
        index = li.index(),
        milestone = milestones.eq(index);

    if (!li.hasClass('active') && milestone.length) {
      scrollTarget = index;
      var scrollTargetTop = milestone.offset().top - 80;
      $('html, body').animate({
        scrollTop: scrollTargetTop
      }, {
        duration: 400,
        complete: function complete() {
          scrollTarget = false;
        }
      });
    }
  });
  $(window).scroll(function () {
    var viewLine = $(window).scrollTop() + $(window).height() / 3,
        active = -1;

    if (scrollTarget === false) {
      milestones.each(function () {
        if ($(this).offset().top - viewLine > 0) {
          return false;
        }

        active++;
      });
    } else {
      active = scrollTarget;
    }

    timeline.css('top', -1 * active * TIMELINE_VALUES.step + TIMELINE_VALUES.start + 'px');
    items.filter('.active').removeClass('active');
    items.eq(active != -1 ? active : 0).addClass('active');
  }).trigger('scroll');
});
</script>

Message par **webmaster** » 19 août 2019, 18:51

La console indique que $ n'existe pas
il suffit donc d'ajouter l'appel à jquery.js et ca marche

Code : Tout sélectionner

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

De manière générale, il faut toujours regarder les erreurs dans la console. Voir ce tuto :
https://www.toutjavascript.com/savoir/n ... script.php

Forums Tout JavaScript

Problème avec JS

Problème avec JS

Re: Problème avec JS

Re: Problème avec JS

Re: Problème avec JS