Tag: web design service

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.
Advertisements

How To Show Facets On Non-Search Page As Normal Widget Instead Of List

Show facets on non-search page

Facets allow users to search the site based on selected criteria. Using Facet API module we can add facets on site. For each field that is indexed, we can have facets. These facets can be configured and displayed on search pages. We have various configuration options available for this.

Many times we need to show these facets on pages that are not Search pages. Facet API module does provide this functionality. You need to create a view display of type “Facet blocks”. Below are the steps to do so.

1 – Create a view of search index and a display of type “Facets Block”. You can make this display in the same view as the search page.

2 – Configure “Facet field” and “Search page path”. Search page path is the path of the search page.

The block is then available to be assigned to the region in blocks page.

However, there are several limitations to this:

  1. The facet links will always be styled as a list, no rewrite or format selection is possible.
  2. It is also not possible to use the normal Facet API widgets for these facets. This is because re-using the Facet API components from outside of the Facet API cannot be easily achieved.

In many cases, Professional Web Development need to show facets on the non-search pages as normal facets instead of the list. To achieve this, follow steps below:

  1. Create a facet block as mentioned above.
  2. Show this block on the non-search page as usual.
  3. Make sure that facets blocks are displaying on non-search page as well. Also, make sure that facet block is showing above views facets blocks i.e weight of facets block is higher than the views facets block.
  4. Edit the facet block and set “Display for searches of facets” to “All search page”.

Doing this will make both the blocks visible on the non-search page. You can hide the block showing list using CSS. This solution works for Search API Database Search and Search API Solr Search.

The final result is something like this:

Read more Blogs https://goo.gl/jhRmqR

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

How To Modify WordPress Dashboard Without Plugin

How To Modify WordPress Dashboard Without Plugin

Today, I am going to provide you easy and quick steps to modify wordpress dashboard without plugin. Please follow below steps:
1. Hiding unwanted widget from wordpress dashboard
You can easily hide widgets from wordpress dashboard that you have no longer needed.
You have to add following code into your active theme’s function.php file:
add_action('wp_dashboard_setup', 'custom_hide_widgets');
function custom_hide_widgets() {
     global $wp_meta_boxes;
    
//for Activity
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_activity']);
    
//for At Glance    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);    
}
This will hide Activity & At Glance from your wordpress dashboard.
2. Replace “Howdy” with your text in wordpress admin bar
By default in wordpress admin bar “Howdy” text is shown you can easily change it with your text. You have to add following code into your active theme’s function.php file:
function replace_howdy_with_your_text( $wp_admin_bar ) {
 $account_info=$wp_admin_bar->get_node('my-account');
 $your_title = str_replace( 'Howdy,', 'Your Text', $account_info->title );
 $wp_admin_bar->add_node( array(
     'id' => 'my-account',
     'title' => $your_title,
 ) );
}
add_filter( 'admin_bar_menu', 'replace_howdy_with_your_text', 25 );
Here we use admin_bar_menu filter to replace text.
3. Change wordpress dashboard footer text.
You can change wordpress dashboard footer text by your own text or link or other. You have to add following code into your active theme’s function.php file:
 function custom_footer_admin_text () {
       echo "Your own text or link";
  }
  add_filter('admin_footer_text', 'custom_footer_admin_text');
Here we use admin_footer_text for change admin footer text. For link you need to use anchor tag (<a>).
4. Create your own Admin Color Scheme  
You can create you own admin color scheme for that you need to create css for your color scheme. Create a directory called admin-css into your active theme and add your css file in it.