Posts

Showing posts from August, 2018

BX Slider / continuous Logo Slider

I am a slide. I am another slide. <html> <head>   <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>   <script>     $(document).ready(function(){       $('.slider').bxSlider({   mode:"horizontal", speed:40000, slideMargin:15, infiniteLoop:true, hideControlOnEnd:false, captions:false, ticker:true, tickerHover:true, adaptiveHeight:false, responsive:true, pager:false, controls:false, autoControls:false, minSlides:5, maxSlides:5, moveSlides:1, slideWidth:200, auto:false, pause:2000, useCSS:false });     });
Post a Comment
Read more

Posts by category

Image
ADD " module.blog" as a field in custom module <h2>Posts by category</h2> {% set topics_list = blog_topics(module.blog, 250) %} {% if topics_list %} <ul> {% for topic in topics_list %}   <li><strong>Category: </strong> <a href="{{ blog_tag_url(module.blog, topic.slug) }}">{{ topic.name }}</a></li> {% set topic_posts = blog_recent_topic_posts( module.blog , topic.slug , 10) %}   {% for topic_post in topic_posts %}     {% if topic_post.absolute_url != request.full_url %}       <div class="post-title"><a href="{{topic_post.absolute_url}}">{{ topic_post.name }}</a></div>     {% endif %}   {% endfor %} {% endfor %} </ul> {% endif %}
Post a Comment
Read more

upcoming webinar using hubl

============ upcoming webinar ================ <ul class="eventsCalendar-list webinar"> {% for item in module.event_group %}   {% if not item.event_expired %}     <li>   <time><em>{{ item.datetime_field|datetimeformat('%B %e, %Y, %h:%m %p') }} </em></time>   <span>{{ item.heading }}</span>   <p><strong>When: {{ item.datetime_field|datetimeformat('%B %e, %Y, %h:%m %p') }} (MDT)<br>Where: {{ item.where }}</strong><br>     <br>{{ item.content }}</p>   <div style="padding-top: 10px;"><a class="btn btn-default" href="{{ page_by_id(item.button_link).absolute_url }}" target="_blank">{{item.button_text}}</a></div>   <p style="margin: 0 0 10px;"><!--blank--></p>   </li>     {% else %}     <li class="eventsCalendar-noEvents"><p>There are no e
Post a Comment
Read more

Multi Option Gallery

Add options C arousel [ c arousel  ]  and Center Mode [center_mode ] in display_mode and create respective field that is mentioned in script ..make sure u apply the condition on the respective fields visible according to Display Mode and when all Set .. Just Copy and Paste Below Code in Editor {% set slides = [] %} <div class='custom_logo_slider image_{{ module.display_mode }} {% if module.display_mode == "center_mode" %} custom-image-gallery {% endif %}'> {% for slide in module.slides %} {% if (slide.link_url is string_startingwith "http") or (slide.link_url is string_startingwith "/") %}     {% set link = slide.link_url %} {% elif !slide.link_url %}     {% set link = none %} {% else %}     {% set link = "//" ~ slide.link_url %} {% endif %}   {{ slides.append({ "caption":  slide.caption,         "show_caption": slide.show_caption,         "link_url": link,         "alt_text&q
Post a Comment
Read more

add animation manually using jquey

============================= JS =============================== $(window).on("load resize scroll",function(){   if ( $('.wow').length > 0 ){     $('.wow').each(function(){       var itemPos = $(this).offset().top;       var windowHeight = $(window).outerHeight();       var scrollTop = $(window).scrollTop();       var result = scrollTop + windowHeight ;       if ( result > itemPos ){         $(this).addClass('active');       }     });   } }); ============================= CSS =============================== /*===== default animation =====*/ .wow {     opacity: 0; } .wow.active {     transition-property: opacity, -webkit-transform;     transition-property: opacity, transform;     transition-property: opacity, transform, -webkit-transform;     transition-duration: 0.6s;     transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);     opacity: 1;     transition-delay: .2s; } /*===== delay animation =====*/
Post a Comment
Read more

add dot for scrolling effect

Image
================html=============== add "scrollable-section" class to those section where you want scrolling effect. and wrap that div with " <div class="nameSec" data="About Us">{{ html }}</div> " ===================css================ .bullets-container {    position: fixed;    z-index: 52;    top: 50%;    right: 15px;    padding: 0 10px 0 0;    -webkit-transition: opacity .3s 0s linear;    -moz-transition: opacity .3s 0s linear;    -o-transition: opacity .3s 0s linear;    transition: opacity .3s 0s linear;    -webkit-transform: translate3d(0,-50%,0);    -moz-transform: translate3d(0,-50%,0);    -ms-transform: translate3d(0,-50%,0);    -o-transform: translate3d(0,-50%,0);    transform: translate3d(0,-50%,0);    height: auto;    display: block; } .bullets-container ul li {    margin: 0; } .bullets-container ul.section-bullets li a {    display: block;    margin: 0;    padding: 10px 0 10px 15px;  
Post a Comment
Read more

Add Parallax using Jquery

$(window).scroll(function() {   var scrollTop = $(this).scrollTop();   $(".parallax").each(function(){     var topGap = $(this).offset().top / 2;;     var a = topGap; //predefine val     var b = scrollTop; //each scroll val     var c = parseInt(b * 0.50, 10); //diff. on each scroll     var result = a - c;     $(this).css("background-position", "center "+ result +"px");   }); });
Post a Comment
Read more

Add Class for Different Browser

    $(document).ready(function() {   if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) {     $('body').addClass('opera');   } else if (navigator.userAgent.indexOf("Chrome") != -1) {     $('body').addClass('chrome');   } else if (navigator.userAgent.indexOf("Safari") != -1) {     $('body').addClass('safari');   } else if (navigator.userAgent.indexOf("Firefox") != -1) {     $('body').addClass('firefox');   } else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) //IF IE > 10   {     $('body').addClass('IE');   } else {     $('body').addClass('unknown');   } });
Post a Comment
Read more

Call Data from One Page to Another

{% set module_name = "Event Module" %} {# Set the name Of module #} {% for targeted_module in page_by_id(module.select_page).widgets %} <!-- select_page || page option --> {% if targeted_module.body.widget_name == module_name %} {% set eventList = targeted_module.body.add_event %} <!-- add_event  || Group name of filled data --> <h2>Upcoming Events</h2> <div class="event-module">   <div class="event-item-wrapper">     {% for item in eventList|sort(False, False, 'date') %}     {% if loop.index <= module.number_of_item_to_show %}     <div class="event-item">       <div class="event-image">         {% if item.image.src %}         <img src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="{{ item.image.width }}" height="{{ item.image.height }}">         {% endif %}       </div>       <div class="event
Post a Comment
Read more

Counter

<head>     <script>         jQuery(document).ready(function($) {             $('.counter').counterUp({                 delay: 10,                 time: 1000             });         });     </script> </head> <body>     <span class="counter">1,234,567</span>     <script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>     <script src="jquery.counterup.min.js"></script> </body>
Post a Comment
Read more