шаги intro.js и позиция всплывающей подсказки отлично работают, за исключением случаев, когда нажата «обратная».

Question

Я создал ввод веб-страницы с помощью функций шагов и функций setoptions, и он отлично работает, за исключением случаев, когда пользователь нажимает кнопку.

два вопроса я считаю, являются:

1. scrolltoelement работает отлично идти вперед, но подсказка идет частично за пределами экрана при переходе назад
2. элемент, выбранный в первом этапе, вся страница, так что я используйте обратный вызов «onafterchange» для сброса верхнего и правого смещения всплывающей подсказки. Это работает отлично, за исключением того, что, как представляется, игнорировать (или переписаны), когда ключ обратно нажата

Javascript является:

var introProfile = introJs(); 
introProfile.setOptions({ 
    tooltipPosition : 'top', 
    steps: [ 
     { 
      element: '#intro_step1', 
      intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...', 
      position: 'top' 
     },   { 
      element: '#intro_step2', 
      intro: 'Your profile contains important information which is important to complete so that...', 
      position: 'bottom' 
     }, 
     { 
      element: '#intro_step3', 
      intro: 'Make sure your attribute is included in your profile because the client may express a preference.', 
      position: 'top' 
     }, 
     { 
      element: '#intro_step4', 
      intro: 'Click here to add a photograph of yourself.', 
      position: 'top' 
     }, 
     { 
      element: '#intro_step5', 
      intro: 'Your photograph will appear when your profile matches a ...', 
      position: 'top' 
     }, 
     { 
      element: '#intro_step6', 
      intro: 'Take example.com with you, on your Android or Apple phone by clicking here.', 
      position: 'top' 
     } 
    ] 
}); 
introProfile.oncomplete(function() { 
    ; 
}); 
introProfile.onexit(function(){ 
    ; 
}); 
introProfile.onchange(function(targetElement) { 
    ; //add change bits here 
}); 
introProfile.onafterchange(function(targetElement) { 
    console.log(targetElement.id); 
    switch (targetElement.id){ 
     case "intro_step1": 
      $('.introjs-tooltip').css({top:'80px',left:'200px'}); 
    } 
}); 
introProfile.onbeforechange(function(targetElement) { 
    ; // add change bits here 
}); 

introProfile.start(); 

Все, что я делаю в HTML устанавливает элемент идентификатор для intro_step1 к intro_step6

Вы можете увидеть скрипку здесь: https://jsfiddle.net/brianlmerritt/3ocyuu65/10/

Любая идея, почему «назад» функциональность отличается от вперед?

Answer 1

Проблема заключалась в том что вы хотели изменить положение подсказке для 1-й ступени с помощью -

$('.introjs-tooltip').css({top:'80px',left:'200px'}); 

Это был добавлен в функции «onafterchange» -

introProfile.onafterchange(function(targetElement) { 
    console.log(targetElement.id); 
    switch (targetElement.id){ 
     case "intro_step1": 
      $('.introjs-tooltip').css({top:'80px',left:'200px'}); 

    } 
    }); 

Теперь эта функция как и ожидалось, когда вы инициализировали introjs - значение после того, как позиция была изменена интроями, а затем была переопределена вашими позициями в функции «onafterchange»

Но в случае, когда вы ударили, эта функция вызывается после того, как позиция была изменена с помощью introjs. Таким образом, чтобы исправить это я использовал «SetTimeout»

setTimeout(function(){ 
    $('.introjs-tooltip').css({top:'80px',left:'200px'}); 
},600) 

Так что теперь ваши позиции теперь преодолены в подсказке

Примечание: Ваш код работал бы, если изменения poition для подсказки были завершены первыми, а затем Вызывается функция «onafterchange».

Fiddle: https://jsfiddle.net/kushal812/3ocyuu65/11/

Позвольте мне знать, если вы нашли лучший способ !!