Js Code

Javascript Codes

Wrap Text Node

   
function wrapSpan(node, index) {
    if (node.nodeName === '#text') {
        var text = node.textContent;
        var s = document.createElement('span');

        s.textContent = text;
        node.parentElement.insertBefore(s, node.parentElement.childNodes[index]);
        node.remove();

    } else {
        var length = node.childNodes.length;
        // childNodes is a collection, not an array. :-/
        for (var i = 0; i < length; i++)
            wrapSpan(node.childNodes[i], i);
    }
}


var h2 = document.getElementsByTagName('h2')

for(i=0; i< h2.length ;i++){
 wrapSpan( h2[i], 0)
}
 
   

Use this for Add Class on menu links using Javascript

   
   (function(){
      var el = document.querySelectorAll('.custom-menu-primary a')
      el.forEach(function(e){
      e.classList = e.textContent.toLowerCase().replace(/[^a-zA-Z0-9\.-]+/g,"");
      })
   })();
   
   

Use this for Add Class active class on categories

   
(function(){

  var value1 = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); 
  document.querySelectorAll('.category-filter ul li a').forEach(function(e){ 
    var url = e.getAttribute('href'); 
    var lastSegment = url.split('/').pop(); 
    if (lastSegment == value1) { 
      e.parentNode.classList.add('active2'); 
    } 
  });

})()

   

Add Class on Scroll using Varible Height

   
   (function() {
       let _body = document.getElementsByTagName('body');
       window.addEventListener('scroll', function() {
           _top = window.scrollY;
           if (_top > 100) {
               _body[0].classList.add("fadIn");
           } else {
               _body[0].classList.remove("fadIn")
           }
       });
   })();
   
   

Add Class on Scroll using Varible Height

   
   (function() {
       let _body = document.getElementsByTagName('body');
       let herderHeight = document.querySelector('.header-container-wrapper').scrollTop;
       window.addEventListener('scroll', function() {
           _top = window.scrollY;
           if (_top > herderHeight) {
               _body[0].classList.add("fadIn");
           } else {
               _body[0].classList.remove("fadIn")
           }
       });
   })();
   
   

Back To Top

   
   function scrollToTop(scrollDuration) {
    var scrollStep = -window.scrollY / (scrollDuration / 15);
    var scrollInterval = setInterval(function() {
        if (window.scrollY != 0) {
            window.scrollBy(0, scrollStep);
        } else {
            clearInterval(scrollInterval);
        }
    }, 15);
};

document.querySelector(".custom-back-to-top a").addEventListener("click", function(e) {
    e.preventDefault();
    scrollToTop(500);
});
   
   

Child Trigger

   
var childTirgger = document.querySelectorAll('.child-trigger')

childTirgger.forEach( function(ele){

 ele.addEventListener('click', function(e){

  var _style = window.getComputedStyle(ele.nextElementSibling, null).display;
  console.log(_style)

  if ( _style == 'none' ) {

   var sliblings = ele.parentNode.parentNode.children;
   for( var i =0; i < sliblings.length; i++ ){
    if (sliblings[i].classList.contains('has-submenu') ){
     sliblings[i].children[1].classList.remove('open-child');
     sliblings[i].children[2].style.display = 'none'
    }
   }

   ele.classList.add('open-child');
   ele.nextElementSibling.style.display = 'block'
  } else {

   ele.classList.remove('open-child');
   ele.nextElementSibling.style.display = 'none'
  }
 })

})
   
   

Child Trigger

      
         var childTrigger = document.querySelectorAll(' .child-trigger');
         var listitem = document.querySelectorAll('.custom-menu-primary  .navigation-primary >  ul > li.has-submenu');
         console.log(listitem);
Array.prototype.slice.call(childTrigger).forEach(function (ele, index) {

            ele.addEventListener('click', function (e) {
               var display = window.getComputedStyle(ele.nextElementSibling, null).display;
               if (display === 'none') {
                  Array.prototype.slice.call(listitem).forEach(function (elmenu) {
                     if (elmenu.children[2] !== e.target.nextElementSibling) {
                        elmenu.classList.remove('child-open');
                        if (elmenu.children[2]) {
                           slideUp(elmenu.children[2], 300);
                        }
                     }
                     elmenu = elmenu.nextElementSibling;
                  });
                  ele.classList.toggle('child-open');
                  slideDown(ele.nextElementSibling, 300);
               }
               else {
                  ele.classList.remove('child-open');
                  slideUp(ele.nextElementSibling, 300);
               }
            });
});  
   
   

Back Trigger

var mainNav = document.querySelector('nav.navigation-primary');
var menuWrap = document.querySelector('.custom-menu-primary > div');
var firstLevel = document.createElement('div');
var secondLevel = document.createElement('div')
var childTirgger = document.querySelectorAll('.child-trigger');
var backBtn = document.querySelectorAll('.submenu');

Array.prototype.slice.call(backBtn).forEach(function(ele){
   ele.insertAdjacentHTML('afterbegin', '<li class="back-btn">Back</li>')
})

firstLevel.setAttribute('class', 'first-level');
secondLevel.setAttribute('class', 'second-level');

menuWrap.appendChild(firstLevel)
menuWrap.appendChild(secondLevel)

Array.prototype.slice.call(childTirgger).forEach(function(ele, ind){

   ele.addEventListener('click', function(e){
      var firstLevel = document.querySelector('.first-level')
      var isEmpty = firstLevel.innerHTML === "";
      var subHtml = ele.nextElementSibling.cloneNode(true);

      if (isEmpty == true) {
         firstLevel.appendChild(subHtml)         
      } else {
         firstLevel.removeChild(firstLevel.childNodes[0]);
         firstLevel.appendChild(subHtml);
      }
   })

})