JavaScript code 





// Select ==================>
$( ".heapbox" ).heapbox( {
   effect: {
      "type": "slide",
      "speed": "fast"   },
   "onChange": function( val, elm ) {
      elm.trigger( 'change' );
   }
} );
// auto increament class name
$( document ).ready( function( e ) {
   $( 'ul li' ).each( function( i ) {
      i = i + 1;
      $( this ).addClass( 'item-' + i );
   } );
} );
$( window ).scroll( function() {
  jQuery( '.home .header nav > ul > li > a' ).each( function() {
     var $scroll = jQuery( window ).scrollTop();
     var $href = jQuery( this ).attr( 'href' );
     var $offset = jQuery( $href ).offset().top - jQuery( '.header' ).outerHeight();
     var $el_height = jQuery( $href ).outerHeight();
     if ( $scroll >= $offset && $scroll < $offset + $el_height ) {
 jQuery( this ).parent( 'li' ).addClass( 'is-active' ).siblings( 'li' ).removeClass( 'is-active' );
     } else {
 jQuery( this ).parent( 'li' ).removeClass( 'is-active' );
     }
   } )
} );

var position = jQuery( window ).scrollTop();
jQuery( window ).scroll( function() {
 var scroll = jQuery( window ).scrollTop();
 if ( scroll > position ) {
  jQuery( '.header' ).removeClass( 'header--active' );
 } else {
  jQuery( '.header' ).addClass( 'header--active' );
 }
 position = scroll;
} );


// upload styling ============>
$( 'input[type="file"]' ).change( function() {
   var vl = $( this ).val();
   // for file name not full path   
   var file = vl.split( '\\' ).pop();
   $( '.uploadFile' ).val( file );
} );

// counter =====>
$( '.counter' ).each( function() {
   var counter = 0;
   $( this ).children( '.counter-plus' ).click( function() {
      $( this ).siblings( 'input[type="text"]' ).val( ++ counter );
   } );
   $( this ).children( '.counter-minus' ).click( function() {
      $( this ).siblings( 'input[type="text"]' ).val( (counter - 1 < 0) ? counter : -- counter );
   } );
} );


// html =====>   
<div class="counter">      
  <span class="counter-minus">+</span>
  <input type="number">
  <span class="counter-plus">+</span>
</div>

// Load More ===========================>   
// Html ------>
<div class="js-filter-more">
    <ul>
       <li>List</li>
       <li>List</li>
       <li>List</li>
       <li>List</li>
       <li>List</li>
    </ul>
</div>

var $block = $( '.js-filter-more' );


$block.each( function() {
   var $li = $( this ).children( 'ul' ).children( 'li' );

      $( '.js-filter-more ul li:nth-child(4)' ).nextAll( 'li' ).hide();

      if ( $li.length > 4 ) {
         $( this ).append( '<a class="more" href="#">meer</a>' );
      }
   } );

   var x = 3;
   $( '.js-filter-more .more' ).click( function( event ) {
      event.preventDefault();
      var size_li = $( this ).siblings( 'ul' ).children( 'li' ).size();
      x = (x + 3 <= size_li) ? x + 3 : size_li;

      $( this ).siblings( 'ul' ).children( 'li:lt(' + x + ')' ).show();

      if ( size_li === x ) {
         $( this ).remove();
      }
   } );

// html5 video play and pause button
$('.js-play').click(function(event) {
    event.preventDefault();
    $(this).parent().addClass('is-active');
    $('.js-video').get(0).play();
});

$('.js-pause').click(function(event) {
    event.preventDefault();
    $(this).parent().removeClass('is-active');
    $('.js-video').get(0).pause();
});



document.addEventListener( 'wpcf7mailsent', function( event ) {
  alert( "Fire!" );
}, false );
 


// Number counter


var $counter = $( '.js-number-counter' );
$( window ).scroll( startCounter );
function startCounter() {
   var hT = $counter.offset().top,
      hH = $counter.outerHeight(),
      wH = $( window ).height();
   if ( $( window ).scrollTop() > hT + hH - wH ) {
      $( window ).off( "scroll", startCounter );
      $counter.each( function() {
         var $this = jQuery( this );
         $( { Counter: 0 } ).animate( { Counter: $this.text() }, {
            duration: 2000,
            easing: 'swing',
            step: function() {
               $this.text( Math.ceil( this.Counter ));
            }
         } );
      } );
   }
} 


 


// form validation


$( '#contact-form' ).submit( function() {
   const $name = $( 'input[name="name"]' );
   const $email = $( 'input[name="email"]' );
   const $tel = $( 'input[name="tel"]' );

   const $nameRx = /^[a-zA-Z]+$/;
   const $emailRx = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;
   const $telRx = /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/;
   
   if ( ! $nameRx.test( $name.val() ) ) {
    $name.addClass( 'is-error' );
   }

   if ( ! $emailRx.test( $email.val() ) ) {
    $email.addClass( 'is-error' );
   }

   if ( ! $telRx.test( $tel.val() ) ) {
    $tel.addClass( 'is-error' );
   }

   if ( ! $nameRx.test( $name.val() ) || ! $emailRx.test( $email.val() ) || ! $telRx.test( $tel.val() ) ) {
    return false;
   }
  } )


//==========================================================
 


jQuery('.js-validation button').click(function(  ) {
 const $email = jQuery('input[name="email"]');
 const $tel = jQuery('input[name="phone"]');

 const $emailValid = /[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/igm;
 const $phoneValid = /^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$/;

 if($emailValid.test($email.val())){
  $email.removeClass('is-error');
  return (true);
 } else {
  $email.addClass('is-error');
  return (false);
 }

 if ($phoneValid.test($tel.val())){
  $tel.removeClass('is-error');
  return (true);
 } else {
  $tel.addClass('is-error');
  return (false);
 }
})

<form action="#">
 <input type="text" placeholder="Name" name="name">
 <input type="email" placeholder="Email" name="email">
 <input type="text" placeholder="Phone" name="phone">

 <button class="button" type="submit">Submit</button>
</form>


 


// Mouse move animation
 


var pixelToMove = 10;

$( '[data-component="effect"]' ).each( function() {
   var $this = $( this );

   $( $this ).find( '.js-effect' ).mousemove( function( e ) {
      var width = $( this ).innerWidth();
      var height = $( this ).innerHeight();
      var newValueX = (e.pageX / width) * pixelToMove;
      var newValueY = (e.pageY / height) * pixelToMove;
      $( this ).css( { 'transform': 'translate(' + newValueX + 'px' + ', ' + newValueY + 'px' + ')' } );
   } );
} );   


 


// Heapbox ==== 


 


$('select').heapbox({
   "onChange":function(val, elm) {
      elm.trigger('change');
   },
   effect: {
      'speed': 'fast'   }
}); 


 


// mmenu close check ===


 


$('#mm-blocker').on('click mousedown touchstart', function() {
   $( '.header' ).removeAttr('style');
}); 






// Toggle button =====


var $el = $( '.yes-no label' );
if ( $el.length ) {
 $el.on('click', function() {
  if ( $( this ).siblings( 'input' ).prop("checked") == true ) {
   $( this ).siblings( 'input' ).prop( 'checked', true );
   $( this ).addClass( 'is-active' );
  } else {
   $( this ).siblings( 'input' ).prop( 'checked', false );
   $( this ).removeClass( 'is-active' );
  }
 } );
}




// Video in slider ===  


$slider.on( 'afterChange', function( event, slick, currentSlide, nextSlide ) {
   var $slide = jQuery( '.home-slider__slide[data-slick-index="' + currentSlide + '"]' );
   var vid = jQuery( '.home-slider__slide[data-slick-index="' + currentSlide + '"] video' );
   if ( vid.length ) {

      vid.get( 0 ).play();

      $slider.slick( 'slickPause' );

      var $duration = $slide.attr( 'data-length' );
      var $str = $duration.split( ':' );

      if ( $str.length === 1 ) {
         var $time = $duration;
         setTimeout( function() {
            $slider.slick( 'slickPlay' );
            var $src = vid.attr( 'src' );
            var $play = $src.replace( '&autoplay=1', '' );
            vid.attr( 'src', $play );
         }, $time * 1000 );
      }

      if ( $str.length === 2 ) {
         var $min1 = $str[ 0 ];
         var $sec1 = $str[ 1 ];
         var $time1 = $min1 * 60 + Number( $sec1 );
         setTimeout( function() {
            $slider.slick( 'slickPlay' );
            var $src = vid.attr( 'src' );
            var $play = $src.replace( '&autoplay=1', '' );
            vid.attr( 'src', $play );
         }, $time1 * 1000 );

      }

      if ( $str.length === 3 ) {
         var $hou2 = $str[ 0 ];
         var $min2 = $str[ 1 ];
         var $sec2 = $str[ 2 ];
         var $time2 = ($hou2 * 3600) + ($min2 * 60) + Number( $sec2 );
         setTimeout( function() {
            $slider.slick( 'slickPlay' );
            var $src = vid.attr( 'src' );
            var $play = $src.replace( '&autoplay=1', '' );
            vid.attr( 'src', $play );
         }, $time2 * 1000 );

      }
   }
} );




// Page scroll in percent ===


jQuery( window ).scroll( function() {
   var scroll = jQuery( window ).scrollTop();
   var $wh = jQuery( window ).height();
   var $dh = jQuery( document ).height() - $wh;
   var $point = scroll * 100 / $dh;
   jQuery( '.js-progress-bar' ).css( 'width', $point + '%' );
} )
 


// Range slider decimal added


function thousands_separators( num ) {
   var num_parts = num.toString().split( "." );
   num_parts[ 0 ] = num_parts[ 0 ].replace( /\B(?=(\d{3})+(?!\d))/g, "." );
   return num_parts.join( "." );
}

$( 'input[type="range"]' ).each( function() {
   $( this ).slider( {
      formatter: function( value ) {
         return thousands_separators( value );
      },
   } )
} );

$window = $( window );
$( 'div[data-type="background"]' ).each( function() {
   var $bgobj = $( this );

   var yPos = - ($window.scrollTop() / $bgobj.data( 'speed' ));
   var coords = '50% ' + (yPos - 150) + 'px';
   $bgobj.css( {
      backgroundPosition: coords
   } );

   $( window ).scroll( function() {
      var yPos = - ($window.scrollTop() / $bgobj.data( 'speed' ));
      var coords = '50% ' + (yPos - 150) + 'px';
      $bgobj.css( {
         backgroundPosition: coords
      } );
   } );
} );


// Slider dots progress with slide change =====>
let time = 2;
let $bar;
let $slick;
let isPause;
let tick;
let percentTime;

$slick = $( '.js-photo-slider' );
$slick.slick( {
   rows: 0,
   cssEase: 'linear',
   speed: 500,
   autoplaySpeed: 4000,
   autoplay: true,
   fade: true,
   dots: true,
   arrows: false,
} );

$slick.on( {
   mouseenter: function () {
      isPause = true;
   },
   mouseleave: function () {
      isPause = false;
   },
} );

$slick.each( function () {
   function startProgressbar () {
      resetProgressbar();
      percentTime = 0;
      isPause = false;
      tick = setInterval( interval, 10 );
   }

   $( this ).children( '.slick-dots' ).children( 'li' ).children( 'button' ).css( {
      width: `${0}%`,
   } );
   $bar = $( this ).children( '.slick-dots' ).children( '.slick-active' ).children( 'button' );

   function interval () {
      if ( isPause === false ) {
         percentTime += 1 / ( time + 0.1 );
         $bar.css( {
            width: `${percentTime}%`,
         } );
         if ( percentTime >= 100 ) {
            $slick.slick( 'slickNext' );
            startProgressbar();
         }
      }
   }

   function resetProgressbar () {
      $bar.css( {
         width: `${0}%`,
      } );
      clearTimeout( tick );
   }

   startProgressbar();

   $( this ).on( 'afterChange', function () {
      function startProgressbar () {
         resetProgressbar();
         percentTime = 0;
         isPause = false;
         tick = setInterval( interval, 10 );
      }

      $( this ).children( '.slick-dots' ).children( 'li' ).children( 'button' ).css( {
         width: `${0}%`,
      } );
      $bar = $( this ).children( '.slick-dots' ).children( '.slick-active' ).children( 'button' );

      function interval () {
         if ( isPause === false ) {
            percentTime += 1 / ( time + 0.1 );
            $bar.css( {
               width: `${percentTime}%`,
            } );
            if ( percentTime >= 100 ) {
               $slick.slick( 'slickNext' );
               startProgressbar();
            }
         }
      }

      function resetProgressbar () {
         $bar.css( {
            width: `${0}%`,
         } );
         clearTimeout( tick );
      }

      startProgressbar();
   } );
} );

// CSS code ====> project -- 20200727-924


.slick-dots {
   margin: 0;
   position: absolute;
   bottom: 40px;
   left: 0;
   display: flex !important;
   align-items: flex-end;
   justify-content: center;
   width: 100%;
   height: 6px;
   text-align: center;
   list-style: none;
   @include max-screen($breakpoint-phone) {
      bottom: 30px;
   }
   @include max-screen($breakpoint-phone) {
      bottom: 20px;
   }

   li {
      margin: 0 7px !important;
      position: relative;
      flex: 1;
      height: 3px;
      list-style: none;
      background: $color-white;
      transition: $transition-base height;
      cursor: pointer;

      &:before {
         display: none;
      }

      &:first-of-type {
         margin-left: 0;
      }

      &:last-of-type {
         margin-right: 0;
      }

      button {
         padding: 0;
         position: absolute;
         left: 0;
         display: block;
         width: 0;
         max-width: 0 !important;
         height: 100%;
         font-size: 0;
         border: 0;
         background: transparent;
         outline: none;
      }

      &.slick-active {
         height: 6px;

         button {
            max-width: none !important;
            background: $color-secondary;
         }
      }
   }
}



https://drive.google.com/drive/folders/1qPAbGqEmhMAb1l4kjLIutkxx1VvjHJK9?usp=sharing








https://urlzs.com/pxKNU








// Check users first visit on website

let cookies = document.cookie;

console.log(cookies.includes('firstVisit=no'));

if (cookies.includes('firstVisit=no')) {
    document.querySelector('.js-block').classList.add('bg-danger');
    document.querySelector('.js-block').classList.remove('bg-success');
} else {
    document.querySelector('.js-block').classList.add('bg-success');
    document.querySelector('.js-block').classList.remove('bg-danger');
}

document.cookie = "firstVisit=no";


// check vising after 10 min

let cookies = document.cookie;

if (cookies.includes('firstVisit=no')) {
    document.cookie = `visitTime `+Date.now();    
    document.querySelector('.js-block').classList.add('bg-danger');
    document.querySelector('.js-block').classList.remove('bg-success');
} else {
    document.querySelector('.js-block').classList.add('bg-success');
    document.querySelector('.js-block').classList.remove('bg-danger');
}

document.cookie = "firstVisit=no";
console.log(document.cookie);

let indexNum = cookies.indexOf('visitTime');
let arr = cookies.substring(indexNum).split(' ');
let timeGap = ((Date.now() - arr[1]) / 1000) / 60;

// check condition after 10 min
if(((Date.now() - arr[1]) / 1000) > 10){
    document.cookie = "firstVisit=yes";
}

































Comments











Post a Comment























Popular posts from this blog









Animation js (Alternative wow js)





















function isScrolledIntoView(elem) {     let docViewTop = $(window).scrollTop();     let docViewBottom = docViewTop + $(window).height();     let elemTop = $(elem).offset().top;     let elemBottom = elemTop + $(elem).height();     return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop)); } $('.animate').each(function() {     if (isScrolledIntoView(this) === true) {         let animation = $(this).attr('data-animation');         let iteration = $(this).attr('data-iteration');         let duration = $(this).attr('data-duration');         let delay = $(this).attr('data-delay');         $(this).addClass('animated');         $(this).css({             'visibility': 'visible',             'animation-duration': duration,     ...








Read more





























Git Add file git add .  hit enter Commit git commit -m "your local text"  hit enter Push git push  origin branch-name   hit enter  








Read more