Author: rajumdhaka

Ticker menu

<div class="mhm-ticker-menu-wrapper">
<div class="mhm-ticker-menu">Our all branches are open today and online delivery is going on. Mega Home Market offering exciting offer on exciting products. 
</div>
</div>

.nav>li>a>i {
    color: #FF0000;
}

.icon-box-img svg, .icon-box-img img {
   padding-top: 0px; 
}

.mhm-ticker-menu-wrapper {
    position: fixed;
    bottom: 0;
/*     display: block; */
    width: 100%;
    text-align: right;
    left: 0;
    background: #ddd;
    color: #D10000;
    font-weight: bold;
	  padding: 5px;
}

.mhm-ticker-menu{
	  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  white-space: nowrap;
}


@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

YITH Wishlist counter button

You can try to add the following code to functions.php of your theme or child

 if ( defined( 'YITH_WCWL' ) && ! function_exists( 'yith_wcwl_get_items_count' ) ) {
  function yith_wcwl_get_items_count() {
    ob_start();
    ?>
      <a href="<?php echo esc_url( YITH_WCWL()->get_wishlist_url() ); ?>">
        <span class="yith-wcwl-items-count">
          <i class="yith-wcwl-icon fa fa-heart-o"><?php echo esc_html( yith_wcwl_count_all_products() ); ?></i>
        </span>
      </a>
    <?php
    return ob_get_clean();
  }

  add_shortcode( 'yith_wcwl_items_count', 'yith_wcwl_get_items_count' );
}

if ( defined( 'YITH_WCWL' ) && ! function_exists( 'yith_wcwl_ajax_update_count' ) ) {
  function yith_wcwl_ajax_update_count() {
    wp_send_json( array(
      'count' => yith_wcwl_count_all_products()
    ) );
  }

  add_action( 'wp_ajax_yith_wcwl_update_wishlist_count', 'yith_wcwl_ajax_update_count' );
  add_action( 'wp_ajax_nopriv_yith_wcwl_update_wishlist_count', 'yith_wcwl_ajax_update_count' );
}

if ( defined( 'YITH_WCWL' ) && ! function_exists( 'yith_wcwl_enqueue_custom_script' ) ) {
  function yith_wcwl_enqueue_custom_script() {
    wp_add_inline_script(
      'jquery-yith-wcwl',
      "
        jQuery( function( $ ) {
          $( document ).on( 'added_to_wishlist removed_from_wishlist', function() {
            $.get( yith_wcwl_l10n.ajax_url, {
              action: 'yith_wcwl_update_wishlist_count'
            }, function( data ) {
              $('.yith-wcwl-items-count').children('i').html( data.count );
            } );
          } );
        } );
      "
    );
  }

  add_action( 'wp_enqueue_scripts', 'yith_wcwl_enqueue_custom_script', 20 );
}

This will define [yith_wcwl_items_count] shortcode in your site; place it wherever you want your counter to appear, and the plugin will do the rest

Image shine effect of hover

.image-shine {
  background-color: #337bb2;
  background-image: url('https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');
  background-repeat: no-repeat;
  overflow: hidden;
  display: inline-block;
}

.image-shine:after {
  content: "";
  position: absolute;
    top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);

  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* Hover state - trigger effect */
.image-shine:hover:after {
  opacity: 1;
  left: 130%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

/* Active state */
.image-shine:active:after {
  opacity: 0;
}

Setting up VS code Environment

Stopping double quote and arrow function brackets

Create a file name .prettierrc

then put this code

{
  "singleQuote": true,
  "arrowParens": "avoid"
}

Setting console.log snippet

Go to preferences -> user snippets new global snippets file -> Name it and put this code

{  “singleQuote”: true,  “arrowParens”: “avoid”}

Enabling default formater

Settings search default formatter and select Prettier – code formatter

Enabling format on save

Setting -> search format on save and check it.

Extension

Settings Sync

WPForm show All non-input fields to Notification message

/**
 * Filters non-input field types to include in {all_fields} output.
 *
 * @link   https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/
 *
 * @param  array $fields
 * @return array
 */
function wpf_dev_email_display_other_fields( $fields ) {
 
    return array( 'divider', 'pagebreak', 'html' );
}
 
add_filter( 'wpforms_email_display_other_fields', 'wpf_dev_email_display_other_fields', 10, 1 );

CSS skeleton loading screen animation

<div class="video"></div>

.video:empty {
  width: 315px;
  height: 250px; 
  cursor: progress; 
  background: 
    linear-gradient(0.25turn, transparent, #fff, transparent),
    linear-gradient(#eee, #eee),
    radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
    linear-gradient(#eee, #eee);  
  background-repeat: no-repeat;
  background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px; 
  background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
  animation: loading 1.5s infinite;
}

@keyframes loading {  
  to {
    background-position: 315px 0, 0 0, 0 190px, 50px 195px;
  }
}