Make Bootstrap Popover Appear/Disappear on Hover Instead of Click

By default, Bootstrap’s popover box appears when the user clicks a specific element. However, you can also force this popover message box to appear on mouse hover instead of mouse click. There are two ways to accomplish this tasks.

Method 1: By adding data-trigger attribute to HTML markup

You can make the popover appear on mouse hover by simply adding data-toggle attribute to your HTML element and setting its value to hover.

<button id="pop1" class="btn btn-primary" data-toggle="popover" data-trigger="hover" title="Sample Popover 1" data-placement="top" data-content="This is first sample popover">Popover 1</button>

Method 2: By passing trigger argument while initialization.

In this method, you can simply pass trigger while initialization of popup and set it to hover.

$(function () {
    $('#pop2').popover({ trigger: "hover" });
})

Must Read: CSS Flip Animation

How To Build Pagination in AngularJS

Pagination in one of the most important and essential component in any web based application. It is the process of dividing data into small groups and creating pages to display each of these groups.

In this tutorial, we are going to use AngularJS to paginate the data. For this tutorial, we are going pagination directive by Michael Bromley.

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>AngularJS Pagination</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<script src="angular.min.js"></script>
	<script src="dirPagination.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<div class="container" ng-app="myApp">
		<div ng-controller="countryCtrl">
			<table class="table">
			    <thead>
					<tr>
						<th>Country</th>
						<th>City</th>
					</tr>
			    </thead>
				<tbody>
					<tr dir-paginate="item in items | itemsPerPage: 5">
						<td>{{ item.country }}</td>
						<td>{{ item.city }}</td>
					</tr>
				</tbody>
  			</table>
  			<dir-pagination-controls
  				boundary-links="true"
  				direction-links="true"
  			></dir-pagination-controls>
		</div>
	</div>
</body>
</html>

As you can see, we are using bootstrap to style our page. Apart from that we have included following Javascript files,

  1. angular.min.js (Core AngularJS file)
  2. dirPagination.js (Pagination Directive)
  3. app.js (Custom JavaScript file which contains code for our application)

Within our HTML code we are using dir-paginate directive instead of regular ng-repeat directive and to display pagination itself we are using dir-pagination-controls directive. The itemsPerPage attribute for dir-paginate directive states the total number of items which will be displayed on each page. The direction-links attribute for dir-pagination-controls directive used to determine whether to show next and previous arrows and the boundary-links attribute is used to determine if we want to display arrows which points first and last pages. Items variable contains data which it is retrieving from JSON file.

JavaScript:

var app = angular.module('myApp',['angularUtils.directives.dirPagination']);

app.controller('countryCtrl', ['$scope','$http', function($scope, $http){
    $scope.items = [];
    $http.get("country.json").success(function(response){ 
        $scope.items = response;
    });
}]);

As you can see in our JavaScript code we have added angularUtils.directives.dirPagination as a dependency to our application. We have created an scope variable items which will hold our data. Then, we are using $http object to fetch data from country.json file. We are going to store the response i.e the data fetched from country.json inside items variable.

JSON:

[
	{
		"country"	: 	"India",
		"city"		: 	"Pune"
	},
	{
		"country"	: 	"Canada",
		"city"		: 	"Waterloo"
	},
	{
		"country"	: 	"Russia",
		"city"		: 	"Moscow"
	},
	{
		"country"	: 	"France",
		"city"		: 	"Paris"
	},
	{
		"country"	: 	"Japan",
		"city"		: 	"Tokoyo"
	},
	{
		"country"	: 	"New Zealand",
		"city"		: 	"Auckland"
	},
	{
		"country"	: 	"Nepal",
		"city"		: 	"Kathmandu"
	},
	{
		"country"	: 	"United Kingdom",
		"city"		: 	"London"
	},
	{
		"country"	: 	"Brazil",
		"city"		: 	"Rio De Janeiro"
	},
	{
		"country"	: 	"Peru",
		"city"		: 	"Lima"
	},
	{
		"country"	: 	"Chile",
		"city"		: 	"Santiago"
	},
	{
		"country"	: 	"Germany",
		"city"		: 	"Berlin"
	},
	{
		"country"	: 	"China",
		"city"		: 	"Beijing"
	},
	{
		"country"	: 	"Thailand",
		"city"		: 	"bangkok"
	},
	{
		"country"	: 	"South Korea",
		"city"		: 	"Seoul"
	},
	{
		"country"	: 	"Belgium",
		"city"		: 	"Brussels"
	},
	{
		"country"	: 	"Spain",
		"city"		: 	"Madrid"
	},
	{
		"country"	: 	"Netherlands",
		"city"		: 	"Amsterdam"
	}
]

Our JSON file contains a list of countries and cities which we have hardcoded inside that file. In your case it might come from the database or from an api.

Read Also: Limit the length of a string with AngularJS

So, in the way we can create a basic pagination using AngularJS. If you have any queries or suggestions, please let me know in the comment section.

Remove Author From Recent Comments Widget

By Default, WordPress recent comment widget displays the comment author name and the title of post where the comment was posted. But, this widget doesn’t come with an option in dashboard to remove comment author name from the widget.

However, you can easily fix this issue by adding a small amount of code to your functions.php file located inside your theme directory.

function ccw_remove_comment_author( $array ) {
	global $post;
	$array['user_id'] = !$post->post_author;
	return $array;
}
add_action( 'widget_comments_args', 'ccw_remove_comment_author' );

Read Also : Remove Pingbacks from Recent Comments Widget

How to Strip HTML Tags in AngularJS

Here’s a reusable code snippet which allows you to remove HTML tags from text using a simple AngularJS filter.

var app = angular.module('myApp', []);

app.filter('stripTags', function() {
	return function(text) {
		return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
	};
});

Usage:

<p>{{ someRandomText | stripTags }}</p>  

Read Also: Capitalize The First Letter of String Using AngularJS

Source: http://stackoverflow.com/a/17315483

How to Allow SVG Through WordPress Media Uploader

Here’s a reusable piece of PHP code which allows the users to upload SVG files via WordPress media uploader. All you have to do is copy the following code and paste it inside the functions.php file located inside your themes directory.

function ccw_upload_svg_files($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'ccw_upload_svg_files');

Read Also: Restricting Users to View Only their own Media Library Items

Capitalize The First Letter of String Using AngularJs

AngularJS provides an uppercase filter out of the box which can capitalize all letters of a string. But, it doesn’t have a built-in solution to capitalize just the first letter of the string.

However, you can easily fix this issue by using the following custom filter.

var app = angular.module('app', []);

app.filter('ucfirst', function() {
    return function(text) {
      return (!!text) ? text.charAt(0).toUpperCase() + text.substr(1).toLowerCase() : '';
    }
});

Usage:

<p>{{ randomText | ucfirst }}</p>

Read Also: Using Custom Filter to Reverse a Input String in AngularJS

Check If Database Table Has Column in Laravel

Laravel comes with a handy built-in hasColumn method which allows the developers to determine whether a a specific column exists in a particular table or not.

You can use hasColumn method as follows;

if(Schema::hasColumn('users', 'email'))
{
    //do something if email column exists inside users table
}

The above code will check if an email column exists inside the users table.

Quick Tip : How to Override Default Controller Namespace in Laravel