{"id":20634,"date":"2022-11-10T08:24:52","date_gmt":"2022-11-10T02:54:52","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/"},"modified":"2022-11-10T08:24:52","modified_gmt":"2022-11-10T02:54:52","slug":"solved-from-jquery-to-vanilla-javascript","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/","title":{"rendered":"[Solved] From jQuery to vanilla javascript"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

NOTE: I had to downgrade the jQuery to match the tocify<\/p>\n

What is the point of rewriting jQuery when you are still dependent on jQuery?<\/p>\n

Findings so far without having access to the HTML<\/p>\n

    \n
  1. The jQuery also does not work – .size has been removed in jQuery 3.0.<\/em>
    \nUse the .length property instead. translates to document.querySelectorAll(\"#content h1\").length<\/code> – vanilla does not have has<\/code><\/li>\n
  2. Your (function() {<\/code> means you have to add the JS after the document. Instead use window.addEventListener(\"load\",function() {<\/code><\/li>\n
  3. append is not vanilla<\/li>\n
  4. element.attr<\/code> is not vanilla. element.getAttribute(\"id\")<\/code> or just element.id<\/code><\/li>\n
  5. show<\/code>\/hide<\/code> is not vanilla. You need classList.toggle(\"hide\")<\/code> OR use media queries or set the hidden<\/code> attribute<\/li>\n
  6. element.resize<\/code> is not vanilla. window.addEventListener(\"resize\", handleTocOnResize);<\/code> is or element.onresize<\/code><\/li>\n
  7. getElementsByName is not valid on an ID and would return a node list if the element(s) had name, which is not a valid attribute on a div.<\/li>\n
  8. getElementsByClassName<\/code>You cannot change classes on a node list – I changed to querySelector<\/code><\/li>\n
  9. document.width is not vanilla. <\/li>\n<\/ol>\n
    \n
    \n
    window.addEventListener(\"load\", function() {\r\n  document.getElementById(\"toc\").innerHTML += \"<div id='generated-toc'><\/div>\";\r\n  const $genToc = $(\"#generated-toc\"); \/\/ seems it MUST be a jQuery object\r\n  $genToc.tocify({\r\n    extendPage: true,\r\n    context: \"#content\",\r\n    highlightOnScroll: true,\r\n    hideEffect: \"slideUp\",\r\n    hashGenerator: function(text, element) {\r\n      return element.id;\r\n    },\r\n    smoothScroll: false,\r\n    theme: \"none\",\r\n    selectors: document.querySelectorAll(\"#content h1\").length > 0 ? \"h1,h2,h3,h4,h5\" : \"h2,h3,h4,h5\",\r\n    ignoreSelector: \".discrete\"\r\n  });\r\n\r\n  var handleTocOnResize = function() {\r\n    \/\/ https:\/\/gist.github.com\/joshcarr\/2f861bd37c3d0df40b30\r\n    const w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth;\r\n    const show = x < 768 \/\/ or use media queries\r\n   \/\/ $genToc[0].classList.toggle(\"hide\", !show);\r\n    document.querySelector(\".sectlevel0\").classList.toggle(\"hide\", show);\r\n    document.querySelector(\".sectlevel0\").classList.toggle(\"hide\", show);\r\n  }\r\n\r\n  window.addEventListener(\"resize\", handleTocOnResize);\r\n  handleTocOnResize();\r\n});<\/code><\/pre>\n
    .hide {\r\n  display: none\r\n}\r\n\r\n\r\n.tocify-header {\r\n    font-style: italic;\r\n}\r\n\r\n.tocify-subheader {\r\n    font-style: normal;\r\n    font-size: 90%;\r\n}\r\n\r\n.tocify ul {\r\n    margin: 0;\r\n }\r\n\r\n.tocify-focus {\r\n    color: #7a2518; \r\n    background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.tocify-focus > a {\r\n    color: #7a2518; \r\n}<\/code><\/pre>\n
    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js\"><\/script>\r\n<script src=\"https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery.tocify\/1.9.0\/javascripts\/jquery.tocify.min.js\"><\/script>\r\n\r\n\r\n<div id=\"content\">\r\n  <h1>Toc<\/h1>\r\n  <p class=\"sectlevel0\">Level 0<\/p>\r\n  <p class=\"sectlevel1\">Level 1<\/p>\r\n<\/div>\r\n<div id=\"toc\"><\/div><\/code><\/pre>\n<\/div>\n<\/div>\n
    jQuery test version to see if we can make the original code work<\/p>\n<\/p>\n
    \n
    \n
    const handleTocOnResize = function() {\r\n  const show = $(document).width() < 768;\r\n  $(\"#generated-toc\").toggle(!show);\r\n  $(\".sectlevel0\").toggle(show);\r\n  $(\".sectlevel1\").toggle(show);\r\n};\r\n\r\n\r\n$(function() {\r\n  $(\"#toc\").append(\"<div id='generated-toc'><\/div>\");\r\n  $(\"#generated-toc\").tocify({\r\n    extendPage: true,\r\n    context: \"#content\",\r\n    highlightOnScroll: true,\r\n    hideEffect: \"slideUp\",\r\n    hashGenerator: function(text, element) {\r\n      return $(element).attr(\"id\");\r\n    },\r\n    smoothScroll: false,\r\n    theme: \"none\",\r\n    selectors: $(\"#content h1\").length > 0 ? \"h1,h2,h3,h4,h5\" : \"h2,h3,h4,h5\",\r\n    ignoreSelector: \".discrete\"\r\n  });\r\n\r\n\r\n  $(window).on(\"resize\", handleTocOnResize);\r\n  handleTocOnResize();\r\n});<\/code><\/pre>\n
    .hide {\r\n  display: none\r\n}\r\n\r\n.tocify-header {\r\n  font-style: italic;\r\n}\r\n\r\n.tocify-subheader {\r\n  font-style: normal;\r\n  font-size: 90%;\r\n}\r\n\r\n.tocify ul {\r\n  margin: 0;\r\n}\r\n\r\n.tocify-focus {\r\n  color: #7a2518;\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.tocify-focus>a {\r\n  color: #7a2518;\r\n}<\/code><\/pre>\n
    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js\"><\/script>\r\n<script src=\"https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery.tocify\/1.9.0\/javascripts\/jquery.tocify.min.js\"><\/script>\r\n\r\n<div id=\"content\">\r\n  <h1>Toc<\/h1>\r\n  <p class=\"sectlevel0\">Level 0<\/p>\r\n  <p class=\"sectlevel1\">Level 1<\/p>\r\n<\/div>\r\n<div id=\"toc\"><\/div><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
    <\/div>\n<\/div>\n
                3<\/span> <\/p><\/div>\n<\/div>\n
    [ad_2]<\/p>\n
    solved From jQuery to vanilla javascript <\/p>\n","protected":false},"excerpt":{"rendered":"
    [ad_1] NOTE: I had to downgrade the jQuery to match the tocify What is the point of rewriting jQuery when you are still dependent on jQuery? Findings so far without having access to the HTML The jQuery also does not work – .size has been removed in jQuery 3.0. Use the .length property instead. translates … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333,388],"class_list":["post-20634","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript","tag-jquery"],"yoast_head":"\n[Solved] From jQuery to vanilla javascript - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] From jQuery to vanilla javascript - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] NOTE: I had to downgrade the jQuery to match the tocify What is the point of rewriting jQuery when you are still dependent on jQuery? Findings so far without having access to the HTML The jQuery also does not work – .size has been removed in jQuery 3.0. Use the .length property instead. translates ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-10T02:54:52+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-from-jquery-to-vanilla-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-from-jquery-to-vanilla-javascript\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] From jQuery to vanilla javascript\",\"datePublished\":\"2022-11-10T02:54:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-from-jquery-to-vanilla-javascript\\\/\"},\"wordCount\":171,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-from-jquery-to-vanilla-javascript\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-from-jquery-to-vanilla-javascript\\\/\",\"name\":\"[Solved] From jQuery to vanilla javascript - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-11-10T02:54:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-from-jquery-to-vanilla-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-from-jquery-to-vanilla-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-from-jquery-to-vanilla-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] From jQuery to vanilla javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] From jQuery to vanilla javascript - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] From jQuery to vanilla javascript - JassWeb","og_description":"[ad_1] NOTE: I had to downgrade the jQuery to match the tocify What is the point of rewriting jQuery when you are still dependent on jQuery? Findings so far without having access to the HTML The jQuery also does not work – .size has been removed in jQuery 3.0. Use the .length property instead. translates ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/","og_site_name":"JassWeb","article_published_time":"2022-11-10T02:54:52+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] From jQuery to vanilla javascript","datePublished":"2022-11-10T02:54:52+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/"},"wordCount":171,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/","url":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/","name":"[Solved] From jQuery to vanilla javascript - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-10T02:54:52+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-from-jquery-to-vanilla-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] From jQuery to vanilla javascript"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=20634"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20634\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=20634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=20634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=20634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}