Add Overlay For A Background Image In CSS

If you are looking for a cross browser solution to add an overlay to a background image with css, look no more. Here I’m adding a black transparent overlay to the header image.


background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/header.jpg);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/header.jpg);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/header.jpg);
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/header.jpg);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url(img/header.jpg);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/header.jpg);

Hope this helps!

How To Capture a Page Title Using PHP

Since we know that the title of the page in html will be inside the title tag, we can use the following regular expression to capture the page title of a page easily.


$title_regex = '%<title>(.+)<\/title>%i';
$page = file_get_contents(urlencode("http://www.google.com"));
$matches = array();
 if (preg_match($title_regex, $page, $matches) && isset($matches[1]))
$title = $matches[1];
else
$title = "Not Found";
echo $title;

Formatting Phone Numbers In PHP

To format a phone number before displaying it on the page, you can use the following function. This function insert spaces so that the phone number becomes easier to read by the user. You can modify the function to replace the spaces with hyphen or parenthesis if you want.


//FUNCTION TO FORMAT PHONE NUMBERS
function formatPhone($num)
{
$num = preg_replace('/[^0-9]/', '', $num);
$len = strlen($num);

if($len<=6)
{
$num = preg_replace('/([0-9]{3})([0-9]{3})/', ' $1 $2', $num);
}
else if(($len>6)&&($len<=9))
{
$num = preg_replace('/([0-9]{3})([0-9]{3})([0-9]{1})/', ' $1 $2 $3', $num);
}
else if($len == 10)
{
$num = preg_replace('/([0-9]{3})([0-9]{3})([0-9]{4})/', ' $1 $2 $3', $num);
}
else if($len>10)
{
$num = preg_replace('/([0-9]{3})([0-9]{3})([0-9]{4})([0-9]{1})/', ' $1 $2 $3 $4', $num);
}
return $num;
}
//END OF FUNCTION TO FORMAT PHONE NUMBERS

Create Fullscreen HTML5 Background Video

Adding a Background Video to your website is pretty easy with HTML5 Video tag.


<div class="video_container">
<video autoplay loop poster="includes/sample.jpg" id="vid">
<source src="includes/sample.webm" type="video/webm">
<source src="includes/sample.mp4" type="video/mp4">
</video>
</div>

This video will autoplay and will be played in a loop. Keep in mind that this is an HTML5 feature, so older browsers won’t support this feature.

To make the video full screen, add the following css:

.video_container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
#vid{
width: 100%;
}

Now you have a fullscreen HTML5 Background Video.

Allow Only Numbers In a Text Box Using JQuery

In some occasions you might have to disable alphabets in a text field and only allow numbers. For example, in fields like phone number or amount.

You can achieve this using the JQuery code given below:


//ALLOW ONLY NUMBERS
$("#mobilenumber").keydown(function(event) {
// Allow: backspace, delete, tab, escape, enter and
if ( $.inArray(event.keyCode,[46,8,9,27,13]) !== -1 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.keyCode == 67 && event.keyCode == 86 || event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
//END OF ALLOWING ONLY NUMBERS

Remove Contents and Delete The Directory in PHP

With the below PHP code you can recursively delete all the contents in the directory and then the directory itself.  This function checks for sub files and sub directories and delete them first before deleting the main folder.


$directory      = "uploads";

if(is_dir($directory)){
recursiveRemoveDirectory($directory);
}

function recursiveRemoveDirectory($directory) {
foreach(glob("{$directory}/*") as $file) {
if(is_dir($file)) {
recursiveRemoveDirectory($file);
} else {
unlink($file);
}
}
rmdir($directory);
}

Hope this helps. Thank You.

Centering Bootstrap Modal Window Using JQuery

By default the Bootstrap Modal Window is centered horizontally, but not vertically. If you want to vertically center the Modal, you can use the following JQuery Code.


$('.modal').on('shown.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});