Create Table Of Contents (TOC) With Multi-level List In JavaScript

25
comments

PLEASE NOTE:

We have Zero Tolerance to Spam.

Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.

(function() {
var items = ['id': '3445125076370452991', 'body': 'Hi! Thanks for such great and simple script!x3cbr /x3eCould you help with usage it on HTML5 static site usage.x3cbr /x3eHow can this script generate TOC after some specific tag in HTML, for example, generating TOC after /hr classx3dx26quot;sepx26quot;/ tag inside main content?', 'timestamp': '1488273229698', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1488273229698#c3445125076370452991', 'author': 'name': 'Andrey Kazakevich', 'avatarUrl': '//lh5.googleusercontent.com/-MqzXlBgO2Vk/AAAAAAAAAAI/AAAAAAAAABU/iQWHdrDiLVQ/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/02151760379942542618', 'displayTime': 'Feb 28, 2017, 2:13:00 PM', 'deleteclass': 'item-control blog-admin pid-365418210', 'id': '5313441996628277494', 'body': 'the older version works perfect but this version not working. it is not showing the list only shows heading content and not the list. I have double checked the whole installation but still problem not fixed. you can check here: http://www.ratta.pk/2017/02/poverty-in-pakistan-english-essay.html', 'timestamp': '1488302629595', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1488302629595#c5313441996628277494', 'author': 'name': 'Maher Afrasiab', 'avatarUrl': '//lh5.googleusercontent.com/-Ny_v7lvs7ng/AAAAAAAAAAI/AAAAAAAAQ30/KkxmTaFsw9s/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/12057366759980641654', 'displayTime': 'Feb 28, 2017, 10:23:00 PM', 'deleteclass': 'item-control blog-admin pid-324552608', 'id': '6779694784603736514', 'body': 'Awesome work, that’s what I was looking for a long time.x3cbr /x3eThanks Brother.', 'timestamp': '1488439684614', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1488439684614#c6779694784603736514', 'author': 'name': 'Unknown', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/03529722297911257634', 'displayTime': 'Mar 2, 2017, 12:28:00 PM', 'deleteclass': 'item-control blog-admin pid-23668720', 'id': '2429621516065006993', 'parentId': '5313441996628277494', 'body': 'you are using too many heading tags and instead of using unordered bullet lists you have used heading tags for every single headline which is not good from SEO stand of point.x3cbr /x3ex3cbr /x3eThis way the TOC will tremendously increase your keyword density and your blog could look like a keyword spam.x3cbr /x3ex3cbr /x3ePlease first format your posts. I suggest you better stick to version 1.0. Because version will only pick H2 and ignore other heading tags. This is best use in your case', 'timestamp': '1488583095835', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1488583095835#c2429621516065006993', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Mar 4, 2017, 4:18:00 AM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '4972836746763918636', 'parentId': '3445125076370452991', 'body': 'For doing that you simply need to use this method:x3cbr /x3ex3cbr /x3e.getElementsByTagName(x26quot;hrx26quot;)x3cbr /x3ex3cbr /x3eThe script will need some major changes to make it work. ', 'timestamp': '1488583276814', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1488583276814#c4972836746763918636', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Mar 4, 2017, 4:21:00 AM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '1719166216487899318', 'parentId': '6779694784603736514', 'body': 'Always a pleasure :)', 'timestamp': '1488583299675', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1488583299675#c1719166216487899318', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Mar 4, 2017, 4:21:00 AM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '6258023991184845464', 'parentId': '6779694784603736514', 'body': 'When we click the heading, It scrolls directly without any animation, Is there any way that it will scroll smoothly?', 'timestamp': '1488624504540', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1488624504540#c6258023991184845464', 'author': 'name': 'Shoaib Ahmed', 'avatarUrl': '//lh4.googleusercontent.com/-CXtXdefZmbk/AAAAAAAAAAI/AAAAAAAAABQ/WMMf-ip62ww/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/03529722297911257634', 'displayTime': 'Mar 4, 2017, 3:48:00 PM', 'deleteclass': 'item-control blog-admin pid-23668720', 'id': '3815677377763145764', 'parentId': '6779694784603736514', 'body': 'for smooth scrolling we can use jQuery or some extra lines of JS and that is what I did not want because then it would not be called a light script. Ux3cbr /x3ex3cbr /x3eVisitors honestly donx26#39;t care about these animations, all they care is instant load time.', 'timestamp': '1488881390057', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1488881390057#c3815677377763145764', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Mar 7, 2017, 3:09:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '4551031217628693293', 'body': 'Very Good Article. I thoroughly enjoyed it.', 'timestamp': '1489002326563', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1489002326563#c4551031217628693293', 'author': 'name': 'Cricocean - A World of Cricket', 'avatarUrl': '//lh6.googleusercontent.com/-bz1_7_77-kk/AAAAAAAAAAI/AAAAAAAAAWg/qw8MIV4wTSo/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/16617872732479849083', 'displayTime': 'Mar 9, 2017, 12:45:00 AM', 'deleteclass': 'item-control blog-admin pid-1200279632', 'id': '800174419737971137', 'body': 'Such a good and informative article. It gave me unique information which i can apply for my blog. ', 'timestamp': '1489350245570', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1489350245570#c800174419737971137', 'author': 'name': 'U XUBEREE', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/01943112603885374238', 'displayTime': 'Mar 13, 2017, 1:24:00 AM', 'deleteclass': 'item-control blog-admin pid-740233050', 'id': '7862706446746351206', 'body': 'thanks Mustafax3cbr /x3e TOC is a jQuery-free JavaScript plugin that automatically generate a table of contents from HTML heading tags of ... Returns an ordered-list of headers in page content. ... Create A Multi-Level Drop Down Menu with Pure CSS.', 'timestamp': '1489357211541', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1489357211541#c7862706446746351206', 'author': 'name': 'Bilal aftab', 'avatarUrl': '//lh3.googleusercontent.com/-nqhXdpRkaJk/AAAAAAAAAAI/AAAAAAAAAwQ/nSGxswrjELY/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/01428980423311807524', 'displayTime': 'Mar 13, 2017, 3:20:00 AM', 'deleteclass': 'item-control blog-admin pid-1171517727', 'id': '5331448071217763349', 'body': 'This is amazingly described by you. Thanks', 'timestamp': '1489904807565', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1489904807565#c5331448071217763349', 'author': 'name': 'U XUBEREE', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/01943112603885374238', 'displayTime': 'Mar 19, 2017, 11:26:00 AM', 'deleteclass': 'item-control blog-admin pid-740233050', 'id': '2176042320196158290', 'body': 'Awesome work Mustafa Bhai', 'timestamp': '1490160986379', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1490160986379#c2176042320196158290', 'author': 'name': 'Abdullah Jan', 'avatarUrl': '//lh3.googleusercontent.com/-ZWoW3eqVdls/AAAAAAAAAAI/AAAAAAAAABU/Ho6h5cnvzrU/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/13680832754203353982', 'displayTime': 'Mar 22, 2017, 10:36:00 AM', 'deleteclass': 'item-control blog-admin pid-103318322', 'id': '2385884276242404426', 'body': 'I really Appreciate your effort', 'timestamp': '1490161017658', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1490161017658#c2385884276242404426', 'author': 'name': 'Abdullah Jan', 'avatarUrl': '//lh3.googleusercontent.com/-ZWoW3eqVdls/AAAAAAAAAAI/AAAAAAAAABU/Ho6h5cnvzrU/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/13680832754203353982', 'displayTime': 'Mar 22, 2017, 10:36:00 AM', 'deleteclass': 'item-control blog-admin pid-103318322', 'id': '7102792548187082166', 'body': 'Here a tip from my Side. To create an animation add below CSS.x3cbr /x3ex3cbr /x3eh2:target x3cbr /x3e animation: highlight 1s ease;x3cbr /x3ex3cbr /x3e@keyframes highlight x3cbr /x3e from background: yellow; x3cbr /x3e to background: white; x3cbr /x3e', 'timestamp': '1490743071560', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1490743071560#c7102792548187082166', 'author': 'name': 'Harman Singh Hira', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_89sV1yv4BQGtYP7O2l4NAzpP1ZUvLRuH1lfGz-nVxqqSFVD6D-G1yb1LGRInBzo6vjXx5myGWwc_gSC_UvCZgdNDXckFbrhkdYYXnce3SSO6xYnL_Rdv9EhAXKqmF5VHv88wSBTAmorN/s35/14666176_1201983059860866_7765561930251507473_n.jpg', 'profileUrl': 'https://www.blogger.com/profile/05548286092176422569', 'displayTime': 'Mar 29, 2017, 4:17:00 AM', 'deleteclass': 'item-control blog-admin pid-532329700', 'id': '913778763990109548', 'body': 'Hey, I donx26#39;t know where to post suggestions, but it would be cool if you could write a tutorial about how to code your blog to look/work better on a mobile phone. Have you already done that? I have a social media-type blog and it would be nice if my friends could use it on their phones. I have used a whole bunch of your tutorials. Thanks for your hard work!', 'timestamp': '1491269226778', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1491269226778#c913778763990109548', 'author': 'name': 'Silas Emmanuel', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTLbNiadNsi_YvkYL5xU05JW4W2EgOrZmfGlIntIpGqa3Dzmg8vf6eTAmTqccGolsRzlDjG8lvwjDR7HMg5YYqk6WSFDL9rDmZlIjZXmTKxppd5fWWVvQSJOPJQSlmBCMWroX82PPN1_C/s35/Prophile%25252BPic%25252Banimated.gif', 'profileUrl': 'https://www.blogger.com/profile/11316934210661640992', 'displayTime': 'Apr 4, 2017, 6:27:00 AM', 'deleteclass': 'item-control blog-admin pid-541439665', 'id': '6191250003982918326', 'body': 'Hi Bhaix3cbr /x3eI have a question. I donx26#39;t use H2 in blog post. I use H3 (i.e. Sub heading). So how should I apply TOC in my blog post?x3cbr /x3ex3cbr /x3eAlso, tell me bro, what is the benefit of using H2 over H3?', 'timestamp': '1492457943279', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1492457943279#c6191250003982918326', 'author': 'name': 'Saeed Ashif Ahmed', 'avatarUrl': '//lh6.googleusercontent.com/-Dqdc5biuPbM/AAAAAAAAAAI/AAAAAAAADXk/cFLODmogbtk/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/02138507031863057264', 'displayTime': 'Apr 18, 2017, 12:39:00 AM', 'deleteclass': 'item-control blog-admin pid-1589570750', 'id': '4335201347995593812', 'body': 'Salam Mustafa Bhai, x3cbr /x3e The previous version of TOCplugin work well on my blogger site But when I try this version only the header x26quot;contentx26quot; text is shown. Please have a visit of my site and kindly solve this issue. Thanks (site:http://www.buzzytricks.com )', 'timestamp': '1493563246412', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1493563246412#c4335201347995593812', 'author': 'name': 'Buzzy Tricks', 'avatarUrl': '//lh6.googleusercontent.com/-l5cadYhVdIU/AAAAAAAAAAI/AAAAAAAAABA/y-k8XpHrR4Q/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/03843433077971635773', 'displayTime': 'Apr 30, 2017, 7:40:00 PM', 'deleteclass': 'item-control blog-admin pid-1892402313', 'id': '2675116659105933598', 'body': 'How can i insert content heading in TOC', 'timestamp': '1500280422685', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1500280422685#c2675116659105933598', 'author': 'name': 'Jannat ki Kunji', 'avatarUrl': '//2.bp.blogspot.com/-zQtAKRFdcrs/WT-rjr-6eeI/AAAAAAAABok/SxtaMgUk9No3yzBwKBnjekL1Ypbk33BPQCK4B/s35/Jannat%25252Bki%25252BKunji.jpg', 'profileUrl': 'https://www.blogger.com/profile/08902122022865751387', 'displayTime': 'Jul 17, 2017, 1:33:00 PM', 'deleteclass': 'item-control blog-admin pid-171583782', 'id': '3671204775097533914', 'body': 'Its doesnx26#39;t seems to be working on my blog. Can you please check why?x3cbr /x3ehttp://www.thepacificminds.com/2017/09/test.html', 'timestamp': '1505141440201', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1505141440201#c3671204775097533914', 'author': 'name': 'Ahsan Arshad', 'avatarUrl': '//lh3.googleusercontent.com/-Q7kwiVudsP0/AAAAAAAAAAI/AAAAAAAAKdM/yd78yQ3fn3k/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/07269350043394542741', 'displayTime': 'Sep 11, 2017, 7:50:00 PM', 'deleteclass': 'item-control blog-admin pid-1023268616', 'id': '5376987910518344189', 'body': 'The TOC is working just perfectly. Most often it does not work when might have added multiple instances of jQuery library or have not properly added all JS code on your site below the head tag or above the closing body tag. ', 'timestamp': '1505211136067', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1505211136067#c5376987910518344189', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Sep 12, 2017, 3:12:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '7052973415337106391', 'body': 'I did a trial but it did not work...any suggestions??x3cbr /x3ehttp://www.thephdguy.com/p/blog-page_12.htmlx3cbr /x3eThanks in advance!', 'timestamp': '1505256848154', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1505256848154#c7052973415337106391', 'author': 'name': 'The Ph.D Guy', 'avatarUrl': '//lh6.googleusercontent.com/-guEKV9Jx-ag/AAAAAAAAAAI/AAAAAAAAAjg/cUI2S6zqq_k/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/09638488837952847454', 'displayTime': 'Sep 13, 2017, 3:54:00 AM', 'deleteclass': 'item-control blog-admin pid-699673047', 'id': '8340844925345862872', 'parentId': '7052973415337106391', 'body': 'the page returns 404', 'timestamp': '1505853613846', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1505853613846#c8340844925345862872', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': '//lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAQeo/f7nmpa1_dQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Sep 20, 2017, 1:40:00 AM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '8587173369521491139', 'body': 'Hello Mohammad Sirx3cbr /x3eFinally you have invented this Plugin in blogger platform. and it is working in google where it shows jump to. Now i am using this Java script in my blogger and it is working properly.x3cbr /x3ex3cbr /x3eBut i have a issue on this. When you will see TOC plugin in Wordpree (hide) option it is not similar to your TOC Plugin In blogger. The Script area is not same. please have a look on this.x3cbr /x3eThanks', 'timestamp': '1507551176665', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1507551176665#c8587173369521491139', 'author': 'name': 'Sourav Chatterjee', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/12855658144102238459', 'displayTime': 'Oct 9, 2017, 5:12:00 PM', 'deleteclass': 'item-control blog-admin pid-1208893640', 'id': '3006364777324324004', 'body': 'Thanks for this great article. Ihave implemented it on my blog, works well, but the hide toggle doesnx26#39;t function though. Please, any solution for that.', 'timestamp': '1530994148341', 'permalink': 'https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html?showCommentx3d1530994148341#c3006364777324324004', 'author': 'name': 'Mobiprox Man', 'avatarUrl': '//lh4.googleusercontent.com/-rtq9ybRWffg/AAAAAAAAAAI/AAAAAAAABNk/1wSMIlV4CpY/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/14715287511131861804', 'displayTime': 'Jul 8, 2018, 1:09:00 AM', 'deleteclass': 'item-control blog-admin pid-1431008946'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '642319991305547424', 'feed': 'https://www.mybloggertricks.com/feeds/642319991305547424/comments/default', 'authorName': 'M. Mustafa Ahmedzai', 'authorUrl': 'https://www.blogger.com/profile/11681339458447132019', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;

var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';

return entry.content.$t;

var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;

if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;

if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];

comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;

comments.push(comment);

return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();

window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length

Andrey KazakevichFeb 28, 2017, 2:13:00 PM

Hi! Thanks for such great and simple script!
Could you help with usage it on HTML5 static site usage.
How can this script generate TOC after some specific tag in HTML, for example, generating TOC after /hr class="sep"/ tag inside main content?

ReplyDelete
Replies

Maher AfrasiabFeb 28, 2017, 10:23:00 PM

the older version works perfect but this version not working. it is not showing the list only shows heading content and not the list. I have double checked the whole installation but still problem not fixed. you can check here: http://www.ratta.pk/2017/02/poverty-in-pakistan-english-essay.html

ReplyDelete
Replies

UnknownMar 2, 2017, 12:28:00 PM

Awesome work, that’s what I was looking for a long time.
Thanks Brother.

ReplyDelete
Replies

Cricocean - A World of CricketMar 9, 2017, 12:45:00 AM

Very Good Article. I thoroughly enjoyed it.

ReplyDelete

U XUBEREEMar 13, 2017, 1:24:00 AM

Such a good and informative article. It gave me unique information which i can apply for my blog.

ReplyDelete

Bilal aftabMar 13, 2017, 3:20:00 AM

thanks Mustafa
TOC is a jQuery-free JavaScript plugin that automatically generate a table of contents from HTML heading tags of ... Returns an ordered-list of headers in page content. ... Create A Multi-Level Drop Down Menu with Pure CSS.

ReplyDelete

U XUBEREEMar 19, 2017, 11:26:00 AM

This is amazingly described by you. Thanks

ReplyDelete

Abdullah JanMar 22, 2017, 10:36:00 AM

Awesome work Mustafa Bhai

ReplyDelete

Abdullah JanMar 22, 2017, 10:36:00 AM

I really Appreciate your effort

ReplyDelete

Harman Singh HiraMar 29, 2017, 4:17:00 AM

Here a tip from my Side. To create an animation add below CSS.

h2:target
animation: highlight 1s ease;

@keyframes highlight
from background: yellow;
to background: white;

ReplyDelete

Silas EmmanuelApr 4, 2017, 6:27:00 AM

Hey, I don't know where to post suggestions, but it would be cool if you could write a tutorial about how to code your blog to look/work better on a mobile phone. Have you already done that? I have a social media-type blog and it would be nice if my friends could use it on their phones. I have used a whole bunch of your tutorials. Thanks for your hard work!

ReplyDelete

Saeed Ashif AhmedApr 18, 2017, 12:39:00 AM

Hi Bhai
I have a question. I don't use H2 in blog post. I use H3 (i.e. Sub heading). So how should I apply TOC in my blog post?

Also, tell me bro, what is the benefit of using H2 over H3?

ReplyDelete

Buzzy TricksApr 30, 2017, 7:40:00 PM

Salam Mustafa Bhai,
The previous version of TOCplugin work well on my blogger site But when I try this version only the header "content" text is shown. Please have a visit of my site and kindly solve this issue. Thanks (site:http://www.buzzytricks.com )

ReplyDelete

Jannat ki KunjiJul 17, 2017, 1:33:00 PM

How can i insert content heading in TOC

ReplyDelete

Ahsan ArshadSep 11, 2017, 7:50:00 PM

Its doesn't seems to be working on my blog. Can you please check why?
http://www.thepacificminds.com/2017/09/test.html

ReplyDelete

Mohammad Mustafa AhmedzaiSep 12, 2017, 3:12:00 PM

The TOC is working just perfectly. Most often it does not work when might have added multiple instances of jQuery library or have not properly added all JS code on your site below the head tag or above the closing body tag.

ReplyDelete

The Ph.D GuySep 13, 2017, 3:54:00 AM

I did a trial but it did not work...any suggestions??
http://www.thephdguy.com/p/blog-page_12.html
Thanks in advance!

ReplyDelete
Replies

Sourav ChatterjeeOct 9, 2017, 5:12:00 PM

Hello Mohammad Sir
Finally you have invented this Plugin in blogger platform. and it is working in google where it shows jump to. Now i am using this Java script in my blogger and it is working properly.

But i have a issue on this. When you will see TOC plugin in Wordpree (hide) option it is not similar to your TOC Plugin In blogger. The Script area is not same. please have a look on this.
Thanks

ReplyDelete

Mobiprox ManJul 8, 2018, 1:09:00 AM

Thanks for this great article. Ihave implemented it on my blog, works well, but the hide toggle doesn't function though. Please, any solution for that.

ReplyDelete