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 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); docume...

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    ...

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 %}       ...

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-filte...

Hover slider

custom module -  https://prnt.sc/nip624 output -  https://prnt.sc/nip6cn demo -  http://huronassociates-5576036.hs-sites.com/  ,  http://huronassociates.com/ HTML ============== <div class="cycle-slider-wrapper {{ module.content_size }}">   <h2 style="text-align: center" class="cycle-slider-heading">{{ module.heading }}</h2>   <div class="cycle-slider-box loop_{{ module.item|length }}">     {% for item in module.item %}     <div class="cycle-slider-box-item item_{{ loop.index }}">       <div class="icon-wrapper">         <div class="mpc-icon-wrap">           <i class="mpc-icon-part mpc-regular mpc-transition  etl etl-{{ item.icon_name }}"></i>         </div>       </div>       <div class="content-wrapper">       ...

Instagram Feeds - by yogesh

<section class="content-instagram-feed">  <div class="col-wrapper clearfix">    <div class="instafeed-items" data-token=" 7371049852.1677ed0.dba3180e29b848f1b665fbe1902c3a53 "></div>  </div> </section> <script src=" https://cdn2.hubspot.net/hubfs/5490511/Cyclerun_Fitness_April2019%20Theme/Javascript/instafeed.min.js "></script> <script> function getIntaFeedToken(elem, id, token) { var feed = new Instafeed({ get: 'user', target: elem.toString(), userId: id.toString(), accessToken: token.toString(),    resolution: 'low_resolution',    limit: 8 });   feed.run(); }  jQuery(document).ready(function($) { $(".content-instagram-feed").each(function(){ var o = $(this); if (o.hasClass("init")) {    return; } o.addClass("init"); var headerId = "id-" + Math.random().toString().slice(2); o.find('.instafeed-items').attr("id...

SQS Parallax banner

demo - http://5490511.hs-sites.com/free-consultation https://www.cyclerun.com/free-consultation ======================================================== HTML ======================================================== {% if module.banner_title or module.banner_image.src %} <div class="custom-banner-area title-{{ module.title_size }}">   <div class="banner-bg" style="background-image:url({{ module.banner_image.src }});">   </div>   <div class="page-center">     <div class="inner-group">       {% if module.banner_title %}       <h1 class="title">         {{ module.banner_title }}       </h1>       {% endif %}     </div>   </div> </div> {% endif %} ======================================================== CSS ======================================================== .custom-banner-area { ...

jump to specific slide in slick

When data fetch from other custom module =========== <div class="hs-section bios-next-profiles case-studies-next carousel-block light-grey-background hs-work-pagination-wrapper hs-what-next-pagination">   <div class="page-center container">     {% if module.heading %}     <div class="hs-row text-center">       <h3>{{ module.heading }}</h3>     </div>     {% endif %}     <div class="hs-row">       <div class="hs-col-md-10 hs-col-md-offset-1">         <div class="owl-carousel next-items-carousel hidden-sm-down">           {% set my_page = page_by_id(module.select_page) %}           {% for item1 in my_page.widget_containers %}           {% for item2 in item1.widgets %}           {% if item2.body.widget_name == "Feat...

add coma between topic & add 'and' in last in topic list

{% set my_topics = blog_topics(group.id, 250) %}{% for item in my_topics %}{% if not loop.last %}{% if not loop.first %}, {{ item }}{% else %}{{ item }}{% endif %}{% else %} and {{ item }}{% endif %}{% endfor %} https://prnt.sc/n3rffl

Show Pagination in post page

eg - https://prnt.sc/mx57c7 <div class="post-no-pagination">       {% set totalPostCount = blog_total_post_count(group.id) %}       {% set rec_posts = blog_recent_posts(group.id, 5000) %}       {% for rec_post in rec_posts|reverse %}       {% if content.absolute_url == rec_post.absolute_url %}       <strong class="post-count"> {{ loop.index }}</strong>       {% endif %}                                  {% if loop.last %}       <span class="total-count">/ {{ totalPostCount }}</span>       {% endif %}       {% endfor %}     </div>

Sidebar Social Share with Add This option

ScreenShot -  https://prnt.sc/mleyjr <div class="at-above-post-page addthis_tool" data-url=" https://alliancebusgroup.com/about-us/news/ "></div> <script type='text/javascript' src=' https://s7.addthis.com/js/300/addthis_widget.js?ver=5.0.3#pubid=ra-5b45133d033906ae '></script>

Text Typing Script

Demo - http://sdxpress-4567973.hs-sites.com/pet-clinic Html ================== <h1> <span id =" type1 "> </span> </h1> JS ================== <script src =" https://cdn2.hubspot.net/hubfs/4567973/Pet%20Clinic%20Website/JS/typed.js "> </script> <script>   document.addEventListener('DOMContentLoaded', function(){     Typed.new('#type1', {       strings: ["^Helping your dog live a fuller life.", "^The best you can do for your dog.", "^You keep them happy, we’ll keep them healthy.", "^Live lighter, Love longer.", "^Your Pet. Our Passion."],       typeSpeed: 0,       showCursor: true,       backSpeed: 0,       backDelay: 1600,       loop: true,     });   }); </script>

Multiple Filter Search in HubDb

Image
{% if dynamic_page_hubdb_row %} <div class="property_images"> {% set string_to_split = dynamic_page_hubdb_row.property_images|striptags %} {% set names = string_to_split|split(',') %} <ul {% if names|length > 1 %}class="hs-slider" {% endif %}> {% for name in names %} <li><img src="{{ name }}" alt="{{ dynamic_page_hubdb_row.property_name }}"></li> {% endfor %} </ul> <div class="top-header-title-and-price"> <div class="top-header-title"> <h4>{{ dynamic_page_hubdb_row.property_name }}</h4> </div> <div class="top-header-price"> <h4>{{ dynamic_page_hubdb_row.property_price }}</h4> </div> </div> </div> <div class="property_tabber"> <ul> <li><a class="active" href="#tab1"...