edit
issue almost fixed...
i found quite ugly way adjust hint position on scroll. work on desktop screen.
but there issues on mobile:
- the scroll event tends lag (at least on android samsung galaxy s3).
tolerable... - when
inputfocussed, mobile key pad messes offset calculation.
no-go.
so if has better idea fix this...
you can try almost working solution using codepen.
here "almost fix" code:
(i use array store lastscroll, because want use more 1 hint.)
// position sub function var lastscroll=[]; function fixhintposition(container,hintnumber){ if(typeof(lastscroll[hintnumber])=="undefined"){ lastscroll[hintnumber]=0; } // scrolled px var scroll = $(container).scrolltop(); //console.log("pixel scrolled: "+scroll); // actual dot position var actualpos=parseint($('a.introjs-hint').eq(hintnumber).css("top")); //console.log(actualpos); // new position var newpos=actualpos+(lastscroll[hintnumber]-scroll); $('a.introjs-hint').eq(hintnumber).css("top",newpos); // last scroll memory lastscroll[hintnumber] = scroll; // if dot out of container var out=false; var containeroffset = parseint(container.css("top")); if(newpos>containeroffset+container.height()){ $('a.introjs-hint').eq(hintnumber).addclass("introjs-hidehint"); out=true; console.log("dot below modal"); } if(newpos<containeroffset){ $('a.introjs-hint').eq(hintnumber).addclass("introjs-hidehint"); out=true; console.log("dot above modal"); } if(!out){ $('a.introjs-hint').eq(hintnumber).removeclass("introjs-hidehint"); console.log("dot shown"); } }
====================== original question
hi friends.
i'm asking 5th time.
(i gave 398 answers now, please consider question care)
issue is:
i want use intro.js hints in fixed position , scrollable modal.
since intro.js marvelously handles adding hint elements body...
works fine on normal page.
but not in modal...
i see 2 options:
try use introjs.js
refresh()function found looking @ .js file.
(not found in documentation... , not working anyway)manage move these elements body modal using "patch script".
but have example quite minimal per help center complete.
-- modal loads ajax content. --
i'm hidding/showing/updating hints without issue... , (this plugin magic!).
working soooo great!!
manage fr/en translation of theses «hints».
but now, please tell me there simple way make them damn scroll target element!
haven't found in intro.js documentation.
can me little?
$(document).ready(function(){ function addhints(){ intro = introjs(); intro.setoptions({ hints: [ { element: document.queryselector('#test'), hint: "this not scrolling page", hintposition: 'middle-right' } ] }); intro.onhintsadded(function() { console.log('hint loaded'); }); intro.addhints(); } addhints(); // not working... sadly.... $("#scrollable").on("scroll",function(){ console.log("scroll"); introjs().refresh(); }); });body{ text-align:center; background-color:cyan; } #scrollable{ position:fixed; top:10%; left:20%; width:60%; height:200px; border:1px solid grey; border-radius:20px 0 0 20px; background-color:#fefefe; overflow-y:scroll; }<link href="https://www.bessetteweb.com/2017/js/intro/demo.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.5.0/introjs.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.5.0/intro.js"></script> <body> <div id="scrollable"> <h1> issue «hint»<br> on scroll </h1> <br> <input type="text" id="test"><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> </body>
i not sure if expecting kind of work around. here did:
html(same yours)
<body> <div id="scrollable"> <h1> issue «hint»<br> on scroll </h1> <br> <input type="text" data-position="bottom-right-aligned" data-hintposition="top-middle" data-hint="get it, use it." id="test"/><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> script
$(document).ready(function() { function addhints() { intro = introjs(); intro.onhintsadded(function() { console.log('hint loaded bolo tarara'); }); intro.addhints(); } addhints(); //find top of yhe scrollable according window size @ "page load" var position = $("#test").offset(); var containertop; containertop = $("#scrollable").offset().top; $("#scrollable").on("scroll", function() { var t, t, l; var window = document.getelementbyid('scrollable'); //get amount of px scrolled var scrollleft = (window.pagexoffset !== undefined) ? window.pagexoffset : (document.documentelement || document.body.parentnode || document.body).scrollleft; var scrolltop = (window.pageyoffset !== undefined) ? window.pageyoffset : (document.documentelement || document.body.parentnode || document.body).scrolltop; var scroll = $(window).scrolltop() + "px"; console.log(scroll); t = parseint(position.top) - parseint(scroll); t = t + "px"; l = position.left; console.log("kitta hua scroll" + t); $("div.introjs-hints").css("position", "relative"); //scroll hint scrollbar document.getelementsbyclassname('introjs-hint')[0].style.top = t; console.log("div ki offset n badri ki dulhaniya" + $("a.introjs-hint").offset().top); if (t < containertop) //for aesthetics { $("div.introjs-hints").css("display", "none"); } else { $("div.introjs-hints").css("display", "block"); } introjs().refresh(); //from code }); }); please implement accordingly.thanks!
Comments
Post a Comment