Scroll option not working in the table of contents widgets
0
Hello , I am creating the table of contents page through custom widgets in that everything working fine but while scroll from the respective paragraph the heading of the table of contents will highlight , this thing will achieve by scroll option , by using jquery i am calling css class in through scroll events. The below one is my piece of code : Header library : define([ "dojo/_base/declare", "mxui/widget/_WidgetBase", "dijit/_TemplatedMixin", "mxui/dom", "dojo/dom", "dojo/_base/window", "dojo/on", "dojo/dom-prop", "dojo/dom-geometry", "dojo/dom-class", "dojo/dom-style", "dojo/dom-construct", "dojo/_base/array", "dojo/_base/lang", "dojo/text", "dojo/html", "dojo/_base/event", "toc/lib/jquery-2.2.4.min", "dojo/text!toc/widget/template/toc.html" ], function(declare, _WidgetBase, _TemplatedMixin, dom, win, on, dojoDom, dojoProp, dojoGeometry, dojoClass, dojoStyle, dojoConstruct, dojoArray, lang, dojoText, dojoHtml, dojoEvent, jquery, widgetTemplate) { "use strict"; Source code : var positions = [], build_toc = function() { var output = '<p>Table of content</p><ul>', svg = '<svg viewBox="0 0 36 36" height="36px" width="36px" y="0px" x="0px"><circle transform="rotate(-90 18 18)" stroke-dashoffset="100" stroke-dasharray="100 100" r="16" cy="18" cx="18" stroke-width="2" fill="none"/></svg>'; $('.postcontent').find('h2').each(function(i) { $(this).attr('id', 'title_' + i) output += '<li><a href="#title_' + i + '" class="toc-title_' + i + '">' + svg + $(this).text() + '</a></li>'; }); console.info(output); return output; }, set_toc_reading = // build our table of content $('.tableofcontents').html(build_toc()); // first definition of positions // get_positions(); // on resize, re - calc positions $(window).on('resize', function() { console.info("haiii iam resize function") $('.postcontent').find('h2').each(function(i) { var offset = $(this).offset(); positions['title_' + i] = offset.top; }); return positions; }); console.info("before scroll"); $('#jiiii').on("scroll", function() { console.info("haiii iam scroll function") var st = $(document).scrollTop(), count = 0; for (var k in positions) { var n = parseInt(k.replace('title_', '')); var has_next = typeof positions['title_' + (n + 1)] !== 'undefined', not_next = has_next && st < positions['title_' + (n + 1)] ? true : false, diff = 0, $link = $('.toc-' + k); if (has_next) { diff = (st - positions[k]) / (positions['title_' + (n + 1)] - positions[k]) * 100; } else { diff = (st - positions[k]) / (get_bottom_off_content() - positions[k]) * 100; } $link.find('circle').attr('stroke-dashoffset', Math.round(100 - diff)); if (st >= positions[k] && not_next && has_next) { $('.toc-' + k).addClass('toc-reading'); } else if (st >= positions[k] && !not_next && has_next) { $('.toc-' + k).removeClass('toc-reading'); } else if (st >= positions[k] && !not_next && !has_next) { $('.toc-' + k).addClass('toc-reading'); } if (st >= positions[k]) { $('.toc-' + k).addClass('toc-already-read'); } else { $('.toc-' + k).removeClass('toc-already-read'); } if (st < positions[k]) { $('.toc-' + k).removeClass('toc-already-read toc-reading'); } count++; } }); }, Expected output :
asked
Narayana Moorthy
0 answers