Posts

Service Filter

Image
https://www.awesomescreenshot.com/video/3075020?key=60ee7802b59aa9042128db94c23ecc2f {{ module.title }} + Add Filter All Services {% for item in module.service_type %} {{ item.Title }} {% endfor %} Cancel Apply Filters {% for item in module.service_type %} {{ item.Title }} {% for item2 in item.services %} {% if item2.image_field.src %} {% set sizeAttrs = 'width="{{ item2.image_field.width }}" height="{{ item2.image_field.height }}"' %} {% if item2.image_field.size_type == 'auto' %} {% set sizeAttrs = 'style="ma

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,""); }) })();

Particle JS

Demo -  https://vincentgarreau.com/particles.js/ HTML ================ <div id="particles-js"></div> Script ================ <script src="https://cdn2.hubspot.net/hubfs/5140200/Mirai_June2019%20Theme/CSS%20and%20JS/particles.min.js"></script> /* ---- particles.js config ---- */ particlesJS("particles-js", {   "particles": {     "number": {       "value": 80,       "density": {         "enable": true,         "value_area": 800       }     },     "color": {       "value": "#eaeaea"     },     "shape": {       "type": "polygon",       "stroke": {         "width": 0,         "color": "#000000"       },       "polygon": {         "nb_sides": 5       },       "image": {         "src": "img/github.sv

Calculate days counts from current date to given date.

              {% set  f = local_dt %}               {% set  f2 = listitem.body.date.start_date|plus_time(1, 'days') %}               {{ f|between_times(f2, 'days') }}            

Create number pagination in custom module using jQuery

DEMO =============================== https://info.boosterthon.com/design/design-archive/school-names-logos/ https://boosterspiritwear.com/design/design-archive/school-names-logos/ HTML =============================== <div class="col-wrapper">    <div class="col-group"></div>    <div class="col-group"></div>    <div class="col-group"></div>    <div class="col-group"></div> </div> JS =============================== //=== wrap in page section var divs = $(".col-wrapper .col-group"); for(var i = 0; i < divs.length; i+=32) {   divs.slice(i, i+32).wrapAll("<div class='page'></div>"); } $('.col-wrapper > .page').each(function(i){   i = i + 1;   $(this).addClass('page'+i) }); //=== generate page count var totalLength = $('.col-wrapper > .page').length; var pages = totalLength; if(

Add subject in email address (when prob. occur in mailTo option)

https://prnt.sc/nkzsvq {% set href = module.button.button_link.url.href %}         {% if module.button.button_link.url.type is equalto "EMAIL_ADDRESS" %}                 {% if module.button.email_subject %}         {% set emailSubject = "?subject=" + module.button.email_subject %}         {% set href = "mailto:" + href + emailSubject %}         {% else %}         {% set href = "mailto:" + href %}         {% endif %}                 {% endif %}         <a class="button white orange" href="{{ href }}"            {% if module.button.button_link.open_in_new_tab %}target="_blank"{% endif %}            {% if module.button.button_link.no_follow %}rel="nofollow"{% endif %}            >           {{ module.button.button_label }}           {% if module.button.button_link.url.type is equalto "EMAIL_ADDRESS" %}<i class="fa fa-envelope" aria-hidden="true"><

slider with masonry effect

screenshot -  https://prnt.sc/nip75x custom module -  https://prnt.sc/nip7hj demo -  http://huronassociates-5576036.hs-sites.com/  ,  http://huronassociates.com/ HTML ===================================================== <div class="custom-service-offerings">   <div class="page-center">     <h3 class="vc_custom_heading">{{ module.heading }}</h3>     <div class="service-offerings-wrapper">       <div class="tg-filters-holder">         <div class="tg-filter tg-filter-active" data-filter="*">           <span class="tg-filter-name tg-nav-color tg-nav-font">All</span>         </div>         {% for item in module.item %}         {% for item2 in item.category_item %}         <div class="tg-filter" data-taxo="post_tag" data-filter=".{{ item2.category|replace(' ','_')|lower|replace('/',