Book Flip 3D Animation Effect- Useful Tips From The Experts

3D Animation Effect
Introduction

This is a custom 3D animated effect for Menu/ catalog/Book/brochure can be kept on the restaurant websites and as a real menu card for displaying the varieties of food available at their place. In Web Design Service this menu card can also be used in other product based websites were the varieties can be displayed as a brochure.

Animation effects

Initially,  we can only see the cover of the folded menu, on click of the ‘view Inside’ option the menu unfolds to three-panel menu card. Simple CSS3/jQuery is used for folding and unfolding of the menu-card. On clicking an item in the unfolded menu, a small description of that item is popped up. A close button is provided to close the pop-up/menu-card.

Feature

  • Browsers compatible
  • Working on touchscreen devices
  • Need not to use any external js, script, and libraries
  • SCSS & CSS both codes are available
  • Easy to use

Below is the code used to implement the concept.

HTML:

<div class="main-container">
  <div id="#main-wraper" class="main-wraper">

    <!-- Menu card -->
    <div class="menu-card">
      <!-- Cover Page -->
      <div class="cover-page">
        <!-- Front Page -->
        <div class="front-page">
          <div class="front-content">
            <div class="food-menu-content">

              <!-- Add Body content -->

              <div class="view-menu">
                <a href="javascript:void(0);" class="open-btn">Look Inside &#8594</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Front back Page -->
        <div class="front-page back-page">

          <!-- Add Body content -->

          <div class="side-overlay"></div>
        </div>
      </div>

      <!-- Middle Page -->
      <div class="middle-page">
        <div class="middle-page-content">
          <div class="middle-wraper">
            <div class="main-course-content">
              <div class="first-row">
                <a href="javascript:void(0);" class="popup">AngularJS Development Services</a>
              </div>
              <div class="first-row">
                <a href="javascript:void(0);">Custom Drupal Module Development</a>
              </div>
            </div>
          </div>
        </div>
        <div class="side-overlay"></div>
      </div>

      <!-- Right Page -->
      <div class="right-page">
        <!-- Right Blank Page -->
        <div class="right-blank-page"></div>

        <!-- Right Front Page -->
        <div class="right-front-page">
          <span class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></span>

          <!-- Add Body content -->

          <div class="side-overlay"></div>
        </div>
      </div>
    </div>
    <!-- Menu card end -->

    <!-- After click content -->
    <div class="after-click-content">
      <div class="inner-content">
        <span class="after-close"><i class="fa fa-times" aria-hidden="true"></i></span>
        <h2>ANGULARJS DEVELOPMENT SERVICES</h2>
        <p>AngularJS is an open source structural framework for web application to create RICH Internet Applications. It predominates the development of dynamic and single page application and supporting MVC to develop client side applications.s</p>
      </div>
    </div><!-- After click end -->
  </div>
</div>

 

CSS:
 
(Get CSS code from  JSFiddle demo)

Javascript:
  // Open btn
  jQuery('.open-btn').click(function() {
    jQuery('.menu-card').addClass('menu-card-shadow');
    jQuery('.cover-page').addClass('cover-in');
    jQuery('.cover-page').removeClass('cover-out');
    jQuery('.right-page').addClass('right-in');
    jQuery('.right-page').removeClass('rigt-out');
    jQuery('.back-page, .right-front-page').addClass('flip-back-page');
  });

  // Close btn
  jQuery('.close-btn').click(function() {
    jQuery('.menu-card').removeClass('menu-card-shadow');
    jQuery('.cover-page').addClass('cover-out');
    jQuery('.cover-page').removeClass('cover-in');
    jQuery('.right-page').addClass('rigt-out');
    jQuery('.right-page').removeClass('right-in');
    jQuery('.back-page, .right-front-page').removeClass('flip-back-page');
    jQuery('.after-click-content').removeClass('after-click');
    jQuery('.menu-card').removeClass('bg-effect');
  });

  // After click on inner link effect
  // Open btn
  jQuery('.popup').click(function() {
    jQuery('.after-click-content').addClass('after-click');
    jQuery('.menu-card').addClass('bg-effect');
  });
  // Close btn
  jQuery('.after-close').click(function() {
    jQuery('.after-click-content').removeClass('after-click');
    jQuery('.menu-card').removeClass('bg-effect');
  });

 

Snapshots of the 3D menu card:

3D menu card cover
3D menu card unfolding
3D menu card unfolded
3D menu card popup (onclick of an item).

Please click here for Demo. Hope this helps you well, feel free to add your comments/feedbacks. Need more assistance regarding Web Design Service Get in touch today!

Advertisements

3D Animated Hover Effect Of Thumbnails Images

new-blog-addweb_2
This is a custom 3D animated effects for thumbnails images, grid box & card rotate design.
You can use below code for 3D Animation hover effect of images without using any jQuery code and JS libraries.
Feature
  • Browser compatible css
  • Responsive for mobile & i-pad
  • Need not to use any external js, script and libraries
  • SCSS & CSS both codes are available
  • Easy to use
How To Create a 3D Animation hover Effect of Thumbnails Images
Step 1: Manage HTML structure
HTML: Please use below HTML code
<div class="aws-image-thumbnail">
     <a href="#"></a>
      <span>Addweb Solution</span>
 </div>
Step 2: Use below SCSS code
SASS:
.aws-image-thumbnail {
  display: inline-block;
  float: left;
  height: 200px;
  width: 400px;
  margin: 0 0 100px;
  text-align: center;
  -webkit-perspective: 500px;
       -moz-perspective: 500px;
            perspective: 500px;
  span {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding-top: 5px;
    color: $white;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotateX(-80deg) scale(.9);
       -moz-transform: rotateX(-80deg) scale(.9);
            transform: rotateX(-80deg) scale(.9);
    -webkit-transition: all .5s ease 0s;
       -moz-transition: all .5s ease 0s;
            transition: all .5s ease 0s;
  }
  a {
    position: relative;
    display: inline-block;
    height: 200px;
    width: 100%;
    background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/img6.jpg');
    background-size: 0, cover;
    background-repeat: no-repeat;
    text-decoration: none;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: all .5s;
         -moz-transition: all .5s;
              transition: all .5s;
    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 36px;
      width: 100%;
      background: inherit;
      background-size: cover, cover;
      background-position: bottom;
      -webkit-transform: rotateX(90deg);
         -moz-transform: rotateX(90deg);
              transform: rotateX(90deg);
      -webkit-transform-origin: bottom;
         -moz-transform-origin: bottom;
              transform-origin: bottom;
      content: '';
    }
    &:before {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
         -moz-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
      -webkit-transition: all 0.5s;
         -moz-transition: all 0.5s;
              transition: all 0.5s;
      opacity: 0.15;
      -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
         -moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
              transform: rotateX(95deg) translateZ(-80px) scale(0.75);
      -webkit-transform-origin: bottom;
         -moz-transform-origin: bottom;
              transform-origin: bottom;
      content: '';
    }
  }
  &:hover {
    a {
     -webkit-transform: rotateX(79deg);
        -moz-transform: rotateX(79deg);
             transform: rotateX(79deg);
     -webkit-transform-origin: bottom;
        -moz-transform-origin: bottom;
             transform-origin: bottom;
     &:after {
       display: inline-block;
       color: $white;
       -webkit-transform: rotateX(99deg);
          -moz-transform: rotateX(99deg);
               transform: rotateX(99deg);
       transform-origin: bottom;
     }
     &:before {
     -webkit-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
             box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
     opacity: 1;
     -webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);
        -moz-transform: rotateX(0) translateZ(-60px) scale(0.85);
             transform: rotateX(0) translateZ(-60px) scale(0.85);
     }
    }
    span {
     visibility: visible;
     opacity: 1;
     -webkit-transform: rotateX(0) scale(1.2);
        -moz-transform: rotateX(0) scale(1.2);
             transform: rotateX(0) scale(1.2);
     -webkit-transition: all .8s;
      -moz-transition: all .8s;
           transition: all .8s;
    }
  }
}
CSS:
.aws-image-thumbnail {
    display: inline-block;
    float: left;
    height: 200px;
    width: 400px;
    margin: 0 0 100px;
    text-align: center;
    -webkit-perspective: 500px;
       -moz-perspective: 500px;
         perspective: 500px;
  }
  .aws-image-thumbnail span {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding-top: 5px;
    color: #FFF;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotateX(-80deg) scale(0.9);
       -moz-transform: rotateX(-80deg) scale(0.9);
                transform: rotateX(-80deg) scale(0.9);
    -webkit-transition: all .5s ease 0s;
       -moz-transition: all .5s ease 0s;
                transition: all .5s ease 0s;
  }
  .aws-image-thumbnail a {
    position: relative;
    display: inline-block;
    height: 200px;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../images/img6.jpg");    background-size: 0, cover;
    background-repeat: no-repeat;
    text-decoration: none;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
               transform-style: preserve-3d;
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
               transition: all .5s;
  }
  .aws-image-thumbnail a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 36px;
    width: 100%;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    -webkit-transform: rotateX(90deg);
       -moz-transform: rotateX(90deg);
                transform: rotateX(90deg);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
    content: '';
  }
  .aws-image-thumbnail a:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
                transition: all 0.5s;
    opacity: 0.15;
    -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
       -moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
                transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
    content: '';
  }
  .aws-image-thumbnail:hover a {
    -webkit-transform: rotateX(79deg);
       -moz-transform: rotateX(79deg);
                transform: rotateX(79deg);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
  }
  .aws-image-thumbnail:hover a:after {
    display: inline-block;
    color: #FFF;
    -webkit-transform: rotateX(99deg);
       -moz-transform: rotateX(99deg);
               transform: rotateX(99deg);
    transform-origin: bottom;
  }
  .aws-image-thumbnail:hover a:before {
    -webkit-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    opacity: 1;
    -webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);
       -moz-transform: rotateX(0) translateZ(-60px) scale(0.85);
                transform: rotateX(0) translateZ(-60px) scale(0.85);
  }
  .aws-image-thumbnail:hover span {
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0) scale(1.2);
       -moz-transform: rotateX(0) scale(1.2);
                transform: rotateX(0) scale(1.2);
    -webkit-transition: all .8s;
       -moz-transition: all .8s;
    transition: all .8s;
  }
Hope this helps you to make things work..!!! Need more assistance regarding Web design service…! Feel free to leave your valuable feedback and stay tuned for more similar blogs.

Create Sliders To Move In Opposite Direction With Each Other

This is a custom animated slider with left & right offset slide effect. Animated effect like opening/closing door effects.
This slider can be used in testimonial, display 2 items in a slide, simple content & image slider and more.
Feature
  • Support in responsive view, tablet & mobile views
  • Support fluid responsive width
  • Content & images can slide
  • Compatible with IE 9 and higher
  • No need to add other dependences of CSS/JS
  • jQuery library: 1.4 and higher
  • Easy to use
HTML: Please use below HTML code:
<div class="aws-slider">
  <div class="aws-controls">
    <a class="aws-prev-link hide-arrow" href="javascript:void();"> 
        <img src="image-path"> <!-- prev icon -->
     </a>
    <a class="aws-next-link" href="javascript:void();”>
        <img src="image-path"> <!-- Next icon -->
    </a>
  </div> <!-- /.aws-controls -->
  <div class="aws-grid">
    <!-- Slide content wrapper div -->
    <div class="aws-row aws-row-1">
      <div class="aws-col aws-col-1">
        <div class="aws-content">
          <div class="aws-title">Title</div>
          <div class="aws-body">Informative text</div>
        </div>
      </div> <!-- /.aws-col -->
      <div class="aws-col aws-col-2">
        <div class="aws-content">
          <div class="aws-title">Title</div>
          <div class="aws-body">Informative text</div>
        </div> 
      </div> <!-- /.aws-col -->
    </div> <!-- /.aws-row -->
    ...
    ...
  </div> <!-- /.aws-grid -->
</div> <!-- /.aws-slider -->
JS: Use below code for animation effect for desktop and mobile device.
jQuery(document).ready(function() {
  var window_width = jQuery(window).width();

  jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
  
  // Animate slide for Desktop & Mobile
  slider_desktop ();
  slider_mobile ();

  jQuery(window).resize(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      jQuery('.aws-slider .aws-row.active .aws-col').removeClass('active');

      // Resize
      jQuery('.aws-slider').css('height', 'auto');
      jQuery('.aws-slider .aws-row .aws-col').css('height', 'auto');
      var aws_col_h_max = 0;
      jQuery('.aws-slider .aws-row').each(function() {
        var awscolHeight = jQuery(this).outerHeight();
        if (awscolHeight > aws_col_h_max) {
          aws_col_h_max = awscolHeight;
        }
      });
      jQuery('.aws-slider').css('height', aws_col_h_max);
      jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
      // Resize End
    }
    else if (window_width < 768) {
      //slider_mobile (window_width);
      jQuery('.aws-slider .aws-row.active .aws-col-1').addClass('active');

      // Resize
      jQuery('.aws-slider').css('height', 'auto');
      jQuery('.aws-slider .aws-row .aws-col').css('height', 'auto');
      var aws_col_h_max = 0;
      jQuery('.aws-slider .aws-row').each(function() {
        var awscolHeight = jQuery(this).children('.aws-col').outerHeight();
        if (awscolHeight > aws_col_h_max) {
          aws_col_h_max = awscolHeight;
        }
      });
      jQuery('.aws-slider').css('height', aws_col_h_max);
      jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
      // Resize End
    }
  });
  // End

  // Set height for Col FOR DESKTOP
  if (jQuery(window).width() > 767) {
    var aws_col_h_max = 0;
    jQuery('.aws-slider .aws-row').each(function() {
      var awscolHeight = jQuery(this).outerHeight();
      if (awscolHeight > aws_col_h_max) {
        aws_col_h_max = awscolHeight;
      }
    });
    jQuery('.aws-slider').css('height', aws_col_h_max);
    jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
  }

  // Set height for Col FOR MOBILE
  if (window_width < 768) {
    var aws_col_h_max = 0;
    jQuery('.aws-slider .aws-row').each(function() {
      var awscolHeight = jQuery(this).children('.aws-col').outerHeight();
      if (awscolHeight > aws_col_h_max) {
        aws_col_h_max = awscolHeight;
      }
    });
    jQuery('.aws-slider').css('height', aws_col_h_max);
    jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
  }
});

// For Desktop
function slider_desktop () {
  jQuery('.aws-slider .aws-row:nth-child(1)').addClass('active');
  // For Prev
  jQuery('.aws-controls .aws-prev-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      if (jQuery('.aws-slider .aws-row.active').is(':first-child')) {
        // To detect first row
      }
      else if (jQuery('.aws-slider .aws-row:nth-child(2)').hasClass('active')) {
        jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').prev().addClass('active');
      }
      else {
        jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
        jQuery('.aws-controls .aws-next-link').removeClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').prev().addClass('active');
      }
    }
  });
  // For Next
  jQuery('.aws-controls .aws-next-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      if (jQuery('.aws-slider .aws-row:nth-last-child(1)').hasClass('active')) {
        // To detect last row
      }
      else if (jQuery('.aws-slider .aws-row:nth-last-child(2)').hasClass('active')) {
        jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').next().addClass('active');
      }
      else {
        jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').next().addClass('active');
      }
    }
  });
}
// For Mobile
function slider_mobile () {
  jQuery('.aws-slider .aws-row:nth-child(1)').addClass('active');
  jQuery('.aws-slider .aws-row:nth-child(1) .aws-col-1').addClass('active');
  // For Prev
  jQuery('.aws-controls .aws-prev-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width < 768) {
      jQuery('.aws-controls .aws-next-link').removeClass('hide-arrow');
      if (jQuery('.aws-slider .aws-row .aws-col-2.active').hasClass('active')) {
        jQuery('.aws-slider .aws-row .aws-col.active').removeClass('active').prev().addClass('active');
        if (jQuery('.aws-slider .aws-row:first-child').hasClass('active')) {
          jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
        }
      }
      else if (jQuery('.aws-slider .aws-row .aws-col-1.active').hasClass('active')) {
        if (jQuery('.aws-slider .aws-row:first-child').hasClass('active')) {
          jQuery('.aws-slider .aws-row:first-child').addClass('active');
        }
        else {
          jQuery('.aws-slider .aws-row .aws-col.active').parent('.aws-row').removeClass('active').prev().addClass('active');
          jQuery('.aws-slider .aws-row .aws-col').removeClass('active');
          jQuery('.aws-slider .aws-row.active .aws-col-2').addClass('active');
        }
      }
    }
  });
  // For Next
  jQuery('.aws-controls .aws-next-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width < 768) {
      if (jQuery('.aws-slider .aws-row .aws-col-1.active').hasClass('active')) {
        if(jQuery('.aws-slider .aws-row:last-child .aws-col').length == '2' && jQuery('.aws-slider .aws-row:last-child').hasClass('active')) {
          jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        }
        if (jQuery('.aws-slider .aws-row.active .aws-col-2').length) {
          jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
          jQuery('.aws-slider .aws-row .aws-col.active').removeClass('active').next().addClass('active');
        }
      }
      else if (jQuery('.aws-slider .aws-row .aws-col-2.active').hasClass('active')) {
        if (jQuery('.aws-slider .aws-row:last-child .aws-col').length == '1' && jQuery('.aws-slider .aws-row:nth-last-child(2)').hasClass('active')) {
          jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        }
        if (jQuery('.aws-slider .aws-row:last-child').hasClass('active')) {
          // To detect last row
        }
        else {
          jQuery('.aws-slider .aws-row .aws-col.active').parent('.aws-row').removeClass('active').next().addClass('active');
          jQuery('.aws-slider .aws-row .aws-col').removeClass('active');
          jQuery('.aws-slider .aws-row.active .aws-col-1').addClass('active');
        }
      }
    }
  });
}
CSS:
.aws-slider .aws-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  margin: 0 0 0 -30px;
}
.aws-slider .aws-controls a {
  display: inline-block;
  height: 23px;
  width: 30px;
  text-align: center;
}
.aws-slider .aws-controls a.hide-arrow {
  opacity: .3;
}
@media (max-width: 767px) {
  .aws-slider .aws-controls {
    right: 0;
    left: 0;
    width: -webkit-calc('100% - 30px');
    width: -moz-calc('100% - 30px');
    width: calc('100% - 30px');
    margin: 0 15px;
  }
  .aws-slider .aws-controls a.aws-next-link {
    float: right;
  }
}

 

Hope this helped you a lot, feel free to share your feedbacks, Need more assistance regarding Quality Web Design Services Contact us now.
If you want to know how 3D Animation hover effect of images done without using any jQuery code and JS libraries click here

How Filter Works In WordPress

Filter Hooks are very powerful features of WordPress that provide huge amount of flexibility for modifying WordPress, including custom themes and plugins. In this tutorial, I’m just showing a simple example that demonstrates what a filter hook does.
There are four core functions that use when working with filters:
  • add_filter(): Used for adding new custom filter.
  • remove_filter(): used for removing an already registered filter.
  • apply_filters(): runs the provided data through the specified filter.
  • has_filter(): checks whether a specific filter has been registered or not.
You can think of a filter as a method for modifying data. Here an example for following colors:
function demo_show_colors() {    
    $colors = array('Red', 'Green', 'Blue');
    $list = '<ul>';
    foreach($colors as $color) {
     $list .= '<li>' . $color . '</li>';
    }
    $list .= '</ul>';
    return $list;    
}
echo demo_show_colors();
Output:
* Red
* Green
* Blue
Now if we want to modify list of colors via plugin, we need to include a filter.
function demo_show_colors() {
    $colors = array('Red', 'Green', 'Blue');
    $list = '<ul>';
    if(has_filter('modify_colors')){
     $colors = apply_filters('modify_colors', $colors);
    }
    foreach($colors as $color) {
     $list .= '<li>' . $color . '</li>';
    }
    $list .= '</ul>';
    return $list;    
}
In if condition we check if there “modify_colors” filter exists then apply that filter to $color array.
After applying filter we can add colors, remove selective colors, change color name etc.
Here’s Example For Add Color:
function add_extra_color($colors) 
{
    $extra_color = array('Navy', 'Skyblue', 'Brown');
    $colors = array_merge($extra_color, $colors);
    return $colors;
}
add_filter('modify_colors', 'add_extra_color');
Output:
* Red
* Green
* Blue
* Navy
* Skyblue
* Brown
remove_filter is used for just remove addition done by the add_filter() if any.
Here is example of remove filter:
function add_extra_color($colors) 
{
 $extra_color = array('Navy','Skyblue','Brown');
 $colors = array_merge($extra_color, $colors);
 return $colors;
}
add_filter('modify_colors', 'add_extra_color')

function demo_show_colors() 
{
 $colors = array('Red','Green','Blue');
 $list = '<ul>';
 if(has_filter('modify_colors')){
     $colors = apply_filters('modify_colors', $colors);
 }
 foreach($colors as $color) {
     $list .= '<li>' . $color . '</li>';
 }
 $list .= '</ul>';
 return $list;    
}

remove_filter('modify_colors','add_extra_color');
Output:
* Red
* Green
* Blue
Hope you all understood the concept of Filters in WordPress. Feel free to contact us for any suggestions/queries and hire WordPress developer.
Read More…. https://goo.gl/wt9svz

How Autocomplete Done In Angularjs Using Directive And Factory

The Autocomplete textbox is used for providing a suggestion when we are typing into the input box (text field). You notice when we typing in the Google search, that is called Autocomplete. It is mostly used for instant search from the predefined or AJAX based listing.

Use of filters is also known part in Angularjs. Filters are used for filtering the data based on passed argument. Filters are used in template files in angularjs. In filters, we can use expressions as well. And we are going to use all these for getting the autocomplete functionality.
Example of filters in template file is,
Ex.(ng-repeat=”i in items | filtersearch:searchString”).
Here, filtersearch is a name of filter and ‘searchString’ is arguments that it will passed text parameter. Whatever we will put into the Textbox, it will be passed as an array and it will be stored as an elements of an Array.
Note: Here you also need to supply ‘searchString’ this as your ng-model name for input search box in web development service.
Let me walk you through how to create Autocomplete textfield 
1. Make a Simple form to create autocomplete textfield
Create a one input textfield, give a ng-change event in this text field
And give one ng-model name for this text field,and And Also Create a one select box it would be ‘multiple’ also give ng-style  because whenever user selects text from the list then selected item will be copied in the text box and we also need to hide the list.
<div>
<input type="text" ng-model="searchString"  ng-change="searching()" ng-keydown="changecursor($event)" id="input" autofocus><br>
<select id="select" ng-style="vis" ng-model="txt" ng-click="copy($event)" ng-keypress="copy($event)" ng-keydown="changecursor($event)” multiple>
<option ng-repeat="i in items | filtersearch:searchString">{{i.string}}</option>
</select >
</div>
Here, ng-model=”txt” is used for copy text into the text field.

Reaf more https://goo.gl/qrmAI8

Generate Custom Pdf Using Print Module In Drupal

Please follow the below steps to Generate custom pdf:

1: First you need to install and enable print module.
2: Download dompdf from https://github.com/dompdf/dompdf on github.
3: Put dompdf library in “/sites/all/modules/print/lib/dompdf”.
4: Add below code at the starting of the custom module file.

    use Dompdf\Dompdf;

5: Create your html structure that you want to print in pdf and set your html structure to $result like below example.


    $result = '<table>
      <tr>
        <td>
          fitst row first column
        </td>
        <td>
          fitst row second column
        </td>
      </tr>
    </table>';
  

6: Add condition for print module and not empty result.

  if (module_exists('print') && !empty($result))

7: If condition is TRUE then under condition add library path like that

$file_path_include = drupal_get_path('module', 'print') .'/lib/dompdf/autoload.inc.php';
    require_once $file_path_include;

8: Create object for Dompdf.

    $dompdf = new Dompdf();

9: Add your html structure in object’s load_html method.

    $dompdf->load_html($result);

10: Add below line to generate output.

 $dompdf->render();
    $pdfoutput = $dompdf->output();

11: Set file name and file path that you want to store. Keep the name dynamic if there are multiple pdfs by appending date-time.

$filename = 'demo.pdf';
    $filepath = 'sites/default/files/pdf/demo.pdf';

12: Write file using below code. This will generate pdf at “sites/default/files/pdf/demo.pdf”.

    $fp = fopen($filepath, "w+");
    fwrite($fp, $pdfoutput);
    fclose($fp);

Here is the full code:

    use Dompdf\Dompdf;

    $result = '<table>
      <tr>
        <td>
          fitst row first column
        </td>
        <td>
          fitst row second column
        </td>
      </tr>
    </table>';

    if (module_exists('print') && !empty($result)) {
      $dompdf = new Dompdf();
      $dompdf->load_html($result);
      $dompdf->render();
      $pdfoutput = $dompdf->output();
      $filename = 'demo.pdf';
      $filepath = 'sites/default/files/pdf/demo.pdf';
      $fp = fopen($filepath, "w+");
      fwrite($fp, $pdfoutput);
      fclose($fp);
    }

Hope this demo helps you.Need more assistance regarding drupal web design services…!
Author: Deepali Agarwal

Drupal 7 – Data Migration Through Feeds

Working with Drupal, often times we are required to import a large set of data in site. We have various ways to import data. Feeds module is simple and easy to use. Feeds out of the box supports many features which can cover a variety of scenarios. The module is well documented and you can access documentation here.

 

In this part, we are going to explain basics for how to import data using feeds.
To use feeds module, we need ctools and job scheduler module enabled.
The first step in the process is to turn required modules enabled. Enable Feeds, Feeds Admin UI. If you want an example of node importer and user importer then turn Feeds Import enabled.

 

Next step is to add an importer that lets you import data. To do this, go to “admin/structure/feeds” and click on “Add importer”. If you have turned Feeds Import on, you will see example importers here.
Next step is to configure importer. There are various parts in this.
  1. Basic Settings
  2. Fetcher
  3. Parser
  4. Processor
Each is explained in detail below:
These are basic settings for importers:
Name and description are what you specified while creating the importer. “Attach to content type” is used to determine whether we want to attach importer to any content type form or use standalone form.
We use the standalone form if we want to import by using a form that comes with the custom drupal module development at /import path. If we go with content type then import is executed by creating a node of selected content type.
Periodic updates are used to run import periodically. Proper cron configuration is required to run periodic updates. Keep periodic updates off if you are importing data one time only.
Import on submission will start importing process as soon as the form is submitted. There is an option to run the process in the background. This is particularly helpful when importing large data.
Fetcher
The Fetcher is where your feed is fetched from. We have two options here: File upload and HTTP fetcher.
We get a template sample on this page which helps in CSV file construction. Upload the CSV file in required format and import content. Upon completion, a status message is displayed.
In case, we want to delete all nodes that we imported we can do so by going to “Delete Items” tab on import page.
Feeds module out of the box provides many features and is very powerful. There are various other modules available that enhances feeds module functionality.
Hope this helps you, feel free to share your valuable feedback and inputs.
For read more, Click Here