{"action":"created","issue":{"url":"https://api.github.com/repos/usablica/intro.js/issues/452","repository_url":"https://api.github.com/repos/usablica/intro.js","labels_url":"https://api.github.com/repos/usablica/intro.js/issues/452/labels{/name}","comments_url":"https://api.github.com/repos/usablica/intro.js/issues/452/comments","events_url":"https://api.github.com/repos/usablica/intro.js/issues/452/events","html_url":"https://github.com/usablica/intro.js/issues/452","id":100577566,"number":452,"title":"Back button doesn't do callbacks properly, and affects scrolltoelement","user":{"login":"brianlmerritt","id":3381322,"avatar_url":"https://avatars1.githubusercontent.com/u/3381322?v=4","gravatar_id":"","url":"https://api.github.com/users/brianlmerritt","html_url":"https://github.com/brianlmerritt","followers_url":"https://api.github.com/users/brianlmerritt/followers","following_url":"https://api.github.com/users/brianlmerritt/following{/other_user}","gists_url":"https://api.github.com/users/brianlmerritt/gists{/gist_id}","starred_url":"https://api.github.com/users/brianlmerritt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brianlmerritt/subscriptions","organizations_url":"https://api.github.com/users/brianlmerritt/orgs","repos_url":"https://api.github.com/users/brianlmerritt/repos","events_url":"https://api.github.com/users/brianlmerritt/events{/privacy}","received_events_url":"https://api.github.com/users/brianlmerritt/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2015-08-12T16:00:26Z","updated_at":"2017-08-24T18:26:37Z","closed_at":null,"body":"I have set up an intro of a web page using the steps and setoptions functionality, and it works fine except when the user presses back.\n\nThe two issues I find are:\n1. scrolltoelement works fine going forward, but the tooltip goes partly off screen when going backwards\n2. the element selected in the first step is the entire page, so I use an \"onafterchange\" callback to reset the tooltip top and right offset. This works fine, except it appears to be ignored (or overwritten) when the back key is pressed\n\nThe javascript is:\n\n```\nvar introProfile = introJs();\nintroProfile.setOptions({\n    tooltipPosition : 'top',\n    steps: [\n        {\n            element: '#intro_step1',\n            intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',\n            position: 'top'\n        },            {\n            element: '#intro_step2',\n            intro: 'Your profile contains important information which is important to complete so that...',\n            position: 'bottom'\n        },\n        {\n            element: '#intro_step3',\n            intro: 'Make sure your attribute is included in your profile because the client may express a preference.',\n            position: 'top'\n        },\n        {\n            element: '#intro_step4',\n            intro: 'Click here to add a photograph of yourself.',\n            position: 'top'\n        },\n        {\n            element: '#intro_step5',\n            intro: 'Your photograph will appear when your profile matches a ...',\n            position: 'top'\n        },\n        {\n            element: '#intro_step6',\n            intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',\n            position: 'top'\n        }\n    ]\n});\nintroProfile.oncomplete(function() {\n    ;\n});\nintroProfile.onexit(function(){\n    ;\n});\nintroProfile.onchange(function(targetElement) {\n    ; //add change bits here\n});\nintroProfile.onafterchange(function(targetElement) {\n    console.log(targetElement.id);\n    switch (targetElement.id){\n        case \"intro_step1\":\n            $('.introjs-tooltip').css({top:'80px',left:'200px'});\n    } \n});\nintroProfile.onbeforechange(function(targetElement) {\n    ; // add change bits here\n});\n\nintroProfile.start();\n```\n\nAll I am doing in the HTML is setting the element id for intro_step1 to intro_step6\n\nYou can see the fiddle here: https://jsfiddle.net/brianlmerritt/3ocyuu65/10/\n\nIf you select back, you see that the scroll loses most of the tooltip, and the callback \"onafterchange\" fails as the tooltip is positioned after the callback.\n\nStackexchange question (repeat of this) is here: http://stackoverflow.com/questions/31940661/intro-js-steps-and-tooltip-position-works-fine-except-when-back-is-pressed/\n"},"comment":{"url":"https://api.github.com/repos/usablica/intro.js/issues/comments/324717665","html_url":"https://github.com/usablica/intro.js/issues/452#issuecomment-324717665","issue_url":"https://api.github.com/repos/usablica/intro.js/issues/452","id":324717665,"user":{"login":"ZizzyZizzy","id":5203624,"avatar_url":"https://avatars2.githubusercontent.com/u/5203624?v=4","gravatar_id":"","url":"https://api.github.com/users/ZizzyZizzy","html_url":"https://github.com/ZizzyZizzy","followers_url":"https://api.github.com/users/ZizzyZizzy/followers","following_url":"https://api.github.com/users/ZizzyZizzy/following{/other_user}","gists_url":"https://api.github.com/users/ZizzyZizzy/gists{/gist_id}","starred_url":"https://api.github.com/users/ZizzyZizzy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ZizzyZizzy/subscriptions","organizations_url":"https://api.github.com/users/ZizzyZizzy/orgs","repos_url":"https://api.github.com/users/ZizzyZizzy/repos","events_url":"https://api.github.com/users/ZizzyZizzy/events{/privacy}","received_events_url":"https://api.github.com/users/ZizzyZizzy/received_events","type":"User","site_admin":false},"created_at":"2017-08-24T18:26:37Z","updated_at":"2017-08-24T18:26:37Z","body":"After looking at the stackoverflow post, I was able to use the setTimeout function successfully:\r\n\r\n```\r\n    function refreshIntro() {\r\n        intro.refresh();\r\n    }\r\n\r\n            intro.onafterchange(function(targetElement) {\r\n                    if(ElementID == \"MenuLink\") {\r\n                    // If going backwards, refresh to get the correct location\r\n                        setTimeout(function(){ refreshIntro(); },600);\r\n                    }\r\n           }\r\n\r\n```\r\nI would prefer the callback actually work when it is supposed to work.\r\n\r\nStill, I'm not sure introjs will work for me with all the other buggy placement issues on mobile."}}
{"actor":{"display_login":"ZizzyZizzy"}}