Форум

Artem_A · #1 (**permalink**) 25.01.2016, 13:50

Есть код

<div id="pager_slider">
            <section class="page1">
            </section>
            <section class="page2">
            </section>
            <section class="page3">
              <h2>Grafic Design3</h2>
              <p class="b_text"></p>
              <p class="s_text"> </p>
            </section>
            <section class="page4">
            </section>
          </div>
<div id="progress_bar">
          <div id="circles">
            <div class="circle">
              <strong></strong>
            </div>
          </div>
          <div class="circle">
            <strong></strong>
          </div>
          <div class="circle">
            <strong></strong>
          </div>
        </div>

$(function(){
        $('#pager_slider').cycle({
        fx: 'scrollDown',
        timeout: 0,
        speed: 1000,
        easing: 'easeOutCubic',
        pager: '#nav_slider'
    });
    $(document.body).on("click", "#nav_slider a[href^='#']", function(){
      $('#nav_slider a').addClass('noActive').removeClass('activeSlide');
      $(this).addClass('activeSlide').removeClass('noActive');
    });
    $('#nav_slider a').addClass('detailsIcon').text('');
});


// circle progressbar for our_services

$(function(){
  var c4 = $('.circle');

  c4.circleProgress({
      startAngle: -Math.PI /2 * 8 ,
      lineCap: 'round',
      value: c4.data("value"),
      thickness: 4,
      fill: {color: '#19bd9a' },
      emptyFill: 'rgba(4, 115, 120, 1)'
  }).on('circle-animation-progress', function(event, progress, stepValue) {
    $(this).find('strong').text((100 * stepValue).toFixed(0) + '%');
  });
});

var progressBarArray1 = ["0.75","0.36","0.21"]
var progressBarArray2 = ["0.25","0.43","0.33"]
var progressBarArray3 = ["0.40","0.75","0.54"]
var progressBarArray4 = ["0.75","0.78","0.46"]

Как сделать, чтобы по клику в навигации, загружались к div.circle добавлялся атрибут data-value и загружались элементы из массива.
Т.е я нажимаю на первую кнопку в nav он загружает из первого массива значения и расставляет к первому элементу с классом circle первый элемент массива, ко второму второй, к третьему третий

Mess4me · #2 (**permalink**) 25.01.2016, 15:08

Artem_A,
а если на вторую кнопку в nav нажали , то как должно быть?

Artem_A · #3 (**permalink**) 25.01.2016, 15:14

Mess4me,
из второго массива загружаются элементы и вставляются таким же образом

Mess4me · #4 (**permalink**) 25.01.2016, 15:43

Artem_A,

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<nav id="nav">
    <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>


</nav>

<div id="pager_slider">
    <section class="page1">
    </section>
    <section class="page2">
    </section>
    <section class="page3">
        <h2>Grafic Design3</h2>
        <p class="b_text"></p>
        <p class="s_text"> </p>
    </section>
    <section class="page4">
    </section>
</div>
<div id="progress_bar">
    <div id="circles">
        <div class="circle">
            <strong></strong>
        </div>
    </div>
    <div class="circle">
        <strong></strong>
    </div>
    <div class="circle">
        <strong></strong>
    </div>
</div>

<script>
    $(function(){
/*
        $(document.body).on("click", "#nav_slider a[href^='#']", function(){
            $('#nav_slider a').addClass('noActive').removeClass('activeSlide');
            $(this).addClass('activeSlide').removeClass('noActive');
        });
        $('#nav_slider a').addClass('detailsIcon').text('');*/
        
        
    });

    var progressBarArray1 = ["0.75","0.36","0.21"];
    var progressBarArray2 = ["0.25","0.43","0.33"];
    var progressBarArray3 = ["0.40","0.75","0.54"];
    var progressBarArray4 = ["0.75","0.78","0.46"];

    var progressBarArrays = [progressBarArray1,progressBarArray2,progressBarArray3,progressBarArray4];

    // circle progressbar for our_services

    $(function(){
        var circles = $('.circle');
        var lis = $('#nav li');
        lis.on('click', function (li) {
            var  inx = $(this).index();
            var i =0;
            [].forEach.call(circles, function (el) {
                 $(el).attr('data-value',progressBarArrays[inx][i++])
            });
        })
    });



</script>



</body>
</html>

Artem_A · #5 (**permalink**) 25.01.2016, 15:57

Mess4me,
Да! он добавляет данные масива как надо, но в прогресс баре нет изменений 0% стоит

var progressBarArray1 = ["0.75","0.36","0.21"];
   var progressBarArray2 = ["0.25","0.43","0.33"];
   var progressBarArray3 = ["0.40","0.75","0.54"];
   var progressBarArray4 = ["0.75","0.78","0.46"];

   var progressBarArrays = [progressBarArray1,progressBarArray2,progressBarArray3,progressBarArray4];

$(function(){
  var circles = $('.circle');
  var lis = $('#nav_slider a');
  lis.on('click', function (a) {
    var  inx = $(this).index();
    var i =0;
    [].forEach.call(circles, function (el) {
      $(el).attr('data-value',progressBarArrays[inx][i++])
    });
  });

  circles.circleProgress({
      startAngle: -Math.PI /2 * 8 ,
      size: 130,
      lineCap: 'round',
      value: circles.data("value"),
      thickness: 4,
      fill: {color: '#19bd9a' },
      emptyFill: 'rgba(4, 115, 120, 1)'
  }).on('circle-animation-progress', function(event, progress, stepValue) {
    $(this).find('strong').text((100 * stepValue).toFixed(0) + '%');
  });
});

Artem_A · #6 (**permalink**) 25.01.2016, 15:58

Mess4me,
и чтобы первый массив загружался когда я мышкой доскролю до прогресс бара) Это возможно?

Artem_A · #7 (**permalink**) 25.01.2016, 16:37

Mess4me,
У вас есть идеи?

Artem_A · #8 (**permalink**) 25.01.2016, 16:40

Mess4me,
Вот доки, если что

https://github.com/kottenator/jquery-circle-progress

Artem_A · #9 (**permalink**) 25.01.2016, 16:59

Mess4me,
Чтобы он запускался, когда до него скролишь я сделал
но так как значения не загружаются из первого массива при загрузки, то получаются 0% в прогрессбаре, и нажимая все равно прогресс бар не меняется, хотя атрибут data-value меняется

Mess4me · #10 (**permalink**) 25.01.2016, 17:11

Artem_A,

Сообщение от Artem_A

value: circles.data("value"),

здесь проверяли , значение правильно получается ?!

Форум

Справочник

Discord чат

Курсы javascript