Tuesday, March 22, 2016

Creating a sticky header bar using jQuery

Many websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport. This tutorial show you sample code jQuery create Sticky Header.

1.HTML
<div class="wrapper">
    <div class="header_placeholder"></div>
    <header id="header"></header>
</div>


2. CSS

<style>
#header {
    min-height: 85px;
    background-color: #fff;
    border-bottom: 8px solid #005bac;
    position: relative;
}
#header .is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}
</style>



(function(){
 var stickyHeader = {
  onReady: function () {
   this.doScroll();
  },
  doScroll:function() {
   $(window).scroll(function () {
    stickyHeader.doSticky();
   });
  },
  doSticky: function () {
   var $header = $('#header'),
   headerHeight = $header.height(),
   window_y = $(window).scrollTop();

   if (window_y > headerHeight) {
    if (!$header.hasClass('is-sticky')) {
     $('.header_placeholder').height(headerHeight);
     $header.addClass('is-sticky').css('top', -headerHeight)
     .animate({
      'top': 0
     },300);
    }
   } else {
    if ($header.hasClass('is-sticky')) {
     $('.header_placeholder').height(0);
     $header.removeClass('is-sticky');
    }
   }
  }
 }
  $(document).ready(function(){
    stickyHeader.onReady();
  });
})(jQuery);

Working Demo

Saturday, March 19, 2016

Custom Excerpt Function WordPress

By default WordPress excerpts are set to 55 words and there is an excerpt_length filter which allows you to change this default value to your length of choice. But what if you wanted a different excerpt length on your post type or somewhere in page you need create custom function for set limit.


function get_excerpt($limit) {
 $excerpt = explode(' ', get_the_excerpt(), $limit);
  if (count($excerpt)>=$limit) {
   array_pop($excerpt);
   $excerpt = implode(" ",$excerpt).'...';
  } else {
   $excerpt = implode(" ",$excerpt);
  }
 $excerpt = preg_replace('`[[^]]*]`','',$excerpt);
 
 return $excerpt;
}

function get_content($limit) {
 $content = explode(' ', get_the_content(), $limit);
 if (count($content)>=$limit) {
  array_pop($content);
  $content = implode(" ",$content).'...';
 } else {
  $content = implode(" ",$content);
 }
 $content = preg_replace('/[.+]/','', $content);
 $content = apply_filters('the_content', $content);
 $content = str_replace(']]>', ']]>', $content);
 
 return $content;
}