Posts

Showing posts from July, 2018

Custom Load More

$('body').on('click', '.cb_section_media .load-more > a', function(){ //            console.log('button clicked')               if( ! loading ) {                   button.addClass('loading');                   loading = true; //                  console.log('begin to load');                   var data = {                       action: 'auka_ajax_load_more',                       page: page,                       query: auka.query,                       layout: $('#js-section-details').data('layout'),                       cols: $('#js-section-details').data('cols')                   };                   $.post(auka.url, data, function(res) {                       if( res.success) {                           $('.cb_section_media .row .row').append( res.data );                           if( res.data ) {                             $('.cb_section_media > .container&

Resizing the Captcha in a Form

.hs_recaptcha iframe {    transform:scale(0.77);   -webkit-transform:scale(0.77);   transform-origin:0 0;   -webkit-transform-origin:0 0; } .hs_recaptcha .input div {   width: 200px !important; }

Add more than one map in a same page using custom module in hubspot.

Html ================================== <div class="offices-group"> <h4 class="offices-heading">{{ module.heading }}</h4>   <div class="offices-wrapper">     {% for item in module.office_item %}     <div class="office-col">       <div class="office-inner">         <h5 class="office-title">{{ item.location }}</h5>         <p class="office-address">{{ item.address }}</p>         <div id="map-aux{{ loop.index }}" style="height: 325px; width: 100%;"></div>       </div>     </div>     {% endfor %}   </div> </div> ---------------------------------------------------------- JS ================================== <script src="map1.js"></script> <script>   {% for item in module.office_item %} function initMap{{ loop.index }}() {  var map2{{ loop.index }} = ne

Active Menu Script

var path = window.location.href; $("a").each(function() {     var href = $(this).attr('href');     if (path == href) {     $(this).addClass('active');   } }); // Option Two if there are special characters being used for foreign pages  var url = window.location.pathname; urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); $("a").each(function() {     if (urlRegExp.test(this.href.replace(/\/$/, ''))) {         $(this).addClass('active');     } });

Add Fancybox Popup in Image Gallery

<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.1/jquery.fancybox.min.css " /> <script src=" https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.1/jquery.fancybox.min.js "></script> <script>    $(window).load(function() {    if ( $('.row1-content-careers ').length == 1 ){      $('.row1-content-careers .hs_cos_gallery .slick-slide-inner-wrapper').each(function(){        var imgSrc = $(this).children('img').attr('src') || $(this).children('img').attr('data-lazy');        var imgAlt = $(this).children('img').attr('alt');        $(this).children('img').wrap('<a href="'+ imgSrc +'" data-fancybox="images" title="' + imgAlt + '"></a>');      });    }  });  $(document).ready(function(){    $('[data-fancybox="images"]').fancybox({      margin : [44,0,22,

Fatch Data From HubDB (Filter With Load More) Using Ajax

<!-- HubDB Html --> {% set tableId = 847400 %} <div class="row-fluid">     {% set types = hubdb_table_column(847400, "tag").options %}   <ul class="tag_list resources-tags">     <li value="all"><a class="tagall" href="{{ request.path }}">All</a></li>     {% for row in hubdb_table_rows(tableId)|uniq ue('tag_name')|sort(False, False, 'tag_name') %}     {% if row.tag_name %}         <li><a class="tag-filter" href="{{ request.path }}?tag={{ row.tag_name }}&page=1">{{ row.tag_name }}</a></li>       {% endif %} {% endfor %}   </ul> </div> {% set page_size = 10 %} {# Define Page Size Here #} {% set rowCount = hubdb_table(tableId).row_count %} {% set pageCount =(rowCount/page_size)|round(0, 'ceil') %} {% if request.query_dict.page %} {% set page_num = request.query_dict

HubDb Filter

<div class="row-fluid">    {% set types = hubdb_table_column(847400, "tag").options %}   <ul class="tag_list resources-tags">     <li value="all"><a href="javascript:void(0)">All</a></li>     {% for choice in types %}       {% set tag_list = tag_list~choice.id|list%}       {% if choice.id == request.query_dict.tag%}         <li><a href="#{{ choice.id }}">{{ choice.name }}</a></li>       {% else %}     <li><a href="#{{ choice.id }}">{{ choice.name }}</a></li>       {% endif %}     {% endfor %}   </ul> </div> https://prnt.sc/k7bpr6

Hub DB

Create a Custom Module and past the Code and change the Hubdb  table ID (847400). {% set table = hubdb_table_rows(847400, queryparam)%} {% if table == [] %}     <p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p> {% else %}   {% for row in table %} <div class="team-member-card-container {{ widget.cards_in_row }}">     <div class="team-member-card">         <div class="image-container">             <img src="{{ row.image.url }}" width="500" {% if row.image.width > row.image.height  %}class="landscape"{% endif %} alt="{{ row.name }} Headshot">         </div>         <div class="team-member-info">             <h3>{{ row.name }}</h3>             <h4>{{ row.title }}</h4>             <p>{{ row.description }}</p>        </div>     </

How To Remove Time From Date In Rss or other module

$('.custom-home-row1 .hs-rss-item').each(function(){ $(this).find('span.hs-rss-date').text($(this).find('span.hs-rss-date').text().split(' at')[0]); })

For Email Template

Image
https://www.campaignmonitor.com/css/ https://designers.hubspot.com/docs/cos/email-template-markup#hs-inline-css-and-data-hse-inline-css   

When You Want to open popup(first time load)

$(document).ready(function() {    if (localStorage.getItem("popState") != "shown") {        $('.service_modal_box').fadeIn();        localStorage.setItem("popState", "shown")    }    $(".sqs-popup-overlay-close").click(function(a) {        $(".service_modal_box").fadeOut()    }); });

How to apply background Image in email for outlook

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile hero-section" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">     <tbody>         <tr>             <td style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; background:url(' https://themes.googleusercontent.com/image?id=iOjEWmpWlNVmx91RAaWC3irZSyq8cu05pASFz84khXxbIM83x8QP6Hnw7ZIDcZFvcAGSBpGCNsBC ') !important; background-image:url( https://themes.googleusercontent.com/image?id=iOjEWmpWlNVmx91RAaWC3irZSyq8cu05pASFz84khXxbIM83x8QP6Hnw7ZIDcZFvcAGSBpGCNsBC ) !important; background-position:center !important; background-repeat:no-repeat !important; -webkit-background-size:cover!important; -moz-background-size:cover!important; -o-background-siz

Email Template Style

{% set email_width = "600px" %} {% set email_background = "#f6f6f6" %} {% set email_body_background = "#ffffff" %} {% set sans_serif = "'Helvetica Neue', Helvetica, Arial, sans-serif" %} {% set base_color = "#606060" %} {% set base_link_color = "#3863A0" %} {% set base_font_size = "14px" %} {% set base_Line_height = "160%" %} {% set heading_font_family = "'Helvetica Neue', Helvetica, Arial, sans-serif" %} {% set heading_font_weight = "bold" %} {% set heading_Line_height = "100%" %} <!--[if !mso]><!--> <!-- Add Google / custom fonts here --> <!--<![endif]--> <style>         [style*="sans-serif"] {         font-family: {{ sans_serif }} !important;     }     *{         box-sizing:border-box!important;     -webkit-box-sizing:border-box!important;         -webkit-font-smoothing: antialiased !importa

Numbered Pagination

                            <!-- Numbered Pagination --> <div class="blog-pagination">     {% set page_list = [-2, -1, 0, 1, 2] %}     {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}     {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}     {% elif current_page_num == 2 %}{% set offset = 1 %}     {% elif current_page_num == 1 %}{% set offset = 2 %}     {% else %}{% set offset = 0 %}{% endif %}     <div class="blog-pagination-left">         {% if last_page_num %}<a class="prev-link" href="{{ blog_page_link(last_page_num) }}">❮</a>{% endif %}         {% if contents.total_page_count > 5 %}             {% if current_page_num >= 4 %}                 <a href="{{ blog_page_link(1) }}">1</a>                 <a class="elipses" href="{% if current_page_num <= 5 %}{{ blog_page_link(1) }}{% else %}{{

Related Posts Module

                          {% if content.topic_list %}   <h3>Related posts</h3>   {% set max_posts = 4 %}{# Set the max number of related posts to be output to the page here #}   {% set post_list = [] %}   {% for topic in content.topic_list %}     {% set post_list = post_list + blog_recent_topic_posts('default', topic.slug, max_posts + 1 ) %}     {% if loop.last %}       {% set post_list = post_list|sort(true, false, 'publish_date')|unique('name') %}       {% set i = 0 %}       {% for post in post_list %}         {% if content.absolute_url != post.absolute_url and i < max_posts %}           <div class="related-post-item">             <div class="related-image"><img src="{{ post.featured_image }}" alt="{{ post.name }}"></div>             <div class="related-title"><a href="{{post.absolute_url}}">{{ post.name}}</a></div>      

Google Map Script

Check L atitude  & L ongitude  with  zoom  on live <div id=" map -aux" style="height: 440px; width: 100%;"></div> < script  src="// maps .google.com/ maps / api/js?sensor=false " type="text/javascript"></ script > < script > function initMap() {  var map2 = new google. maps . Map (document. getElementById(' map -aux'), {    zoom:  6 ,    center: { lat: 40.528106, lng:-3.65319 }  });  var marker2 = new google. maps .Marker({          position: { lat: 40.528106, lng:-3.65319 },           map : map2        });  var geocoder2 = new google. maps .Geocoder; <!--if u dont need to display address on  map  | remove this | iff needed then change address and link--> var infowindow2 = new google. maps .InfoWindow({       content : '<span style="color:#111;">Auxilium Mortgage Corporation,  307 Goldstream Ave, Victoria, BC  </span><a href=&quo

Back Menu JS

============================== ============================= BACK MENU JS (WITH SMOOTHNESS) ============================== ============================= ============================== ========= JS DEPARTMENT ============================== ========= <script> $(function() {     //===== Add js-enabled class in body     $('.custom-menu-primary'). addClass('js-enabled');     //========= add mobile-trigger     $('.custom-menu-primary'). after('<div class="mobile-trigger">Menu</ div>');     //========= add child-trigger     $('.custom-menu-primary .flyouts .hs-item-has-children > a').after(' <div class="child-trigger"><i></i>< /div>');     //========= wrap custom-menu-primary with a div     $('.custom-menu-primary'). wrapInner('<div class="inner-menu-section"></ div>');     //========= add back menu i