Posts

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

Bootstrap Popup Js

Image
HTML ======================= <a type="button" data-toggle="modal" data-target="#termsModal">Terms of Use</a> <div id="termsModal" class="modal fade" role="dialog" style="display: none;">   <div class="modal-dialog modal-md">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal">×</button>         <h4 class="modal-title">Terms of Use Agreement</h4>       </div>       <div class="modal-body">       </div>       <div class="modal-footer">         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>       </div>     </div>   </div> </div> CSS ===============...

add active menu but not shown in menu

CSS============================= .hs-menu-wrapper ul li.hs-item-has-children.hide-child > .child-trigger { display: none !important; } .hs-menu-wrapper ul li.hs-item-has-children.hide-child > ul { display: none !important; } .hs-menu-wrapper ul li.hs-item-has-children.hide-child > a:after{ display: none !important; } .hide {     display: none !important; } JS============================= $('.hs-menu-wrapper ul li a').each(function(){ $(this).parent().addClass( $(this).text().split(" ").join('-').toLowerCase() ); }); $('.hs-menu-wrapper ul li.hs-item-has-children').each(function(){ var childLength = $(this).children('ul').children('li').length; var childHideLength = $(this).children('ul').children('li.hide').length; if( childLength == childHideLength ){ $(this).addClass('hide-child'); } });

mobile trigger effect

Image
/*============= JS ==============*/ $('.custom-menu-primary .hs-menu-wrapper').before('<div class="mobile-trigger"><span></span><span></span><span></span><span></span><span></span><span></span></div>'); /*============= CSS ==============*/ .mobile-trigger {     display: inline-block !important;     cursor: pointer;     position: absolute;     left: 15px;     top: 22px;     z-index: 9999999;     width: 34px;     -webkit-transform: rotate(0deg);     -moz-transform: rotate(0deg);     -o-transform: rotate(0deg);     transform: rotate(0deg);     -webkit-transition: .5s ease-in-out;     -moz-transition: .5s ease-in-out;     -o-transition: .5s ease-in-out;     transition: .5s ease-in-out;     height: 24px;   }   .mo...

SlideToggle Effect In Menu

Image
SlideToggle Effect In Menu ====== CSS ====== @media (min-width:768px){ .custom-menu-primary .hs-menu-wrapper > ul > li ul {    visibility:visible !important;    opacity:1 !important;    max-height:0;    overflow:hidden;    transition:all 0.5s ease !important;  } } ====== JS ======= $('.custom-menu-primary .hs-menu-wrapper > ul > li ul').each(function(){    $(this).wrapInner('<div class="inner_part"></div>');  });  $('.custom-menu-primary .hs-menu-wrapper > ul li').hover(function(){    var eachHeight = $(this).children('ul').children('.inner_part').outerHeight();    $(this).children('ul').css('max-height', eachHeight );  },function(){    $(this).children('ul').css('max-height', '0px' );  });  $('.custom-menu-primary .hs-menu-wrapper > ul > li ul').hover(function(){    $(this).css('overflow', 'visible' );  },function(...