Description Summary using Ellipsis …

CSS

.ellipsis {
overflow: hidden;
position: relative;
height: 120px;
line-height: 20px;
}
.ellipsis:before {
content:"";
float: left;
width: 5px; height: 120px; }

.ellipsis> *:first-child {
float: right;
width: 100%;
margin-left: -5px; }

.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -20px; left: 100%;
width: 3em; margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, right top,
from(rgba(255, 255, 255, 0)), to(white), color-stop(15%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 15%, white);
}

.ellipsis a {
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
overflow: hidden; text-indent: -9999px;
}
.ellipsis i, .ellipsis:after {
font-style: normal;
}

HTML

 <div className="ellipsis"><div>Your multi lined text here<i></i></div></div>

Recover file history from Notepad++

While I was working my notepad++ crashed and of course I had not taken a backup in 3 working days. My heart stopped and was panicking as I was of the assumption notepad++ had no history. Well, I was wrong, it does. I found all file backups inn my AppData folder of my computer with time stamp of backup time. To access these files go to:

C:\Users\<user>\AppData\Roaming\Notepad++\backup

Hope this helps you too!

Responsive Tables

When you have a wide table and need it to be responsive just add a class tbl-responsive to the table element and add an attribute  data-title in every td in order to be used as title on small screens.

Example:

<table class=”tbl-responsive”>
<thead>
<tr>
<th> Full Name</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title=”Full Name”>John Smith</td>
</tr>
</tbody>
</table>

Finally paste the below in your css file. You might need to change some sizes/colors according to your design/table.

 

/************************************
Responsive Table
************************************/

table.tbl-responsive td, table.tbl-responsive td a {
padding: 0 5px;
}

table.tbl-responsive td a:hover, table.tbl-responsive td a:focus{ color: #fff; }
@media only screen and (max-width: 800px),
only screen and (max-device-width: 800px) {
table.tbl-responsive,
.tbl-responsive thead,
.tbl-responsive tbody,
.tbl-responsive th,
.tbl-responsive td,
.tbl-responsive tr {
display: block !important;
position: relative;
}

.tbl-responsive thead tr {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}

.tbl-responsive tr { border: 1px solid #ccc !important; }

.tbl-responsive td {
border: none !important;
border-bottom: 1px solid #eee !important;
position: relative !important;
padding-left: 30% !important;
white-space: normal !important;
text-align:left !important;
width: auto !important;
}

table.tbl-responsive td, table.tbl-responsive td a {
padding: 3px 5px;
}

.tbl-responsive td:hover a{
color: white !important;
}

.tbl-responsive td:before {
position: absolute !important;
top: 4px !important;
left: 6px !important;
width: 65% !important;
padding-right: 10px !important;
white-space: nowrap !important;
text-align:left !important;
font-weight: bold !important;

}

/*
Label the data
*/
.tbl-responsive td:before { content: attr(data-title); }

.dataTables_wrapper .form-control { width: auto !important; }
.dataTables_length { display: none; }
div.dataTables_length, div.dataTables_filter, div.dataTables_info, div.dataTables_paginate { text-align: right !important; }
}
@media only screen and (max-width: 450px),
only screen and (max-device-width: 450px)
{
.tbl-responsive td {
padding-left: 140px !important;
}
}

WordPress rewrite search query string

I recently needed to remove the querystring “?s=mysearch” and found it a little hard as no htaccess rewrite was working. I added the following function in my functions.php and worked perfectly.

function rewrite_search_url() {
	if ( is_search() && ! empty( $_GET['s'] ) ) {
		wp_redirect( home_url( "/search/" ) . urlencode( get_query_var( 's' ) ) );
		exit();
	}	
}
add_action( 'template_redirect', 'rewrite_search_url' );

Trim Video using FFMPEG

Hi,

I recently needed to trim a video as I wanted to remove the intro part. I found a really easy way to do this and anyone can do this from home using their own computer for free. It might seem techy and geeky but it will work like magic and really simple.

First you will need FFMPEG, you just need to download it, down even need to install. Download here:

https://ffmpeg.zeranoe.com/builds/

Once download complete, extract zip file and cut the folder inside and paste it in your C:/ drive directly to be quicker. Rename folder to ffmpeg. Open the folder and find the folder called bin, it should have a file called ffmpeg.exe in it. Copy and paste the video you need to trim in that same folder to make it quicker.

Now, go to “Start” button and search for “cmd”, click to open. It will open a small black window called Command Prompt. I use it often for work but some people might have never used it. When opening the cmd and type the following to check if all is good:

C:/ffmpeg/bin/ffmpeg.exe

This should print a whole bunch of lines, that’s good.

Now let’s do the actual trimming from movie.mp4 starting from 10 seconds and stop it at 1 minute to create a new video called new.mp4

Write the following in the cmd:

C:/ffmpeg/bin/ffmpeg.exe -i C:/ffmpeg/bin/movie.mp4 -ss 00:00:10 -t 00:01:00 -async 1 new.mp4

Press enter and let the magic happen on its own. Once video is complete you can play the video and place it where you want 🙂

 

 

 

Calculate Age in JavaScript

HTML:

<input type="date" id="DOB" name="DOB" />

 

 JAVASCRIPT in SCRIPT tags:

//Since new Date() created a date in the format mm/dd/yyyy, we need to format our dob to match the same format
var dob_formatted = switchMonthDate(document.getElementById(“DOB”).value);

//Calculate Age
//Subtract dob from today's date and divide by total milliseconds in a year
var age = Math.floor((new Date() - dob_formatted)/ 31536000000);


if(age >= 18)
{
console.log("adult");
}


function switchMonthDate(dateFirst)
{


if(dateFirst.indexOf("/") !== -1)
dateFirst=dateFirst.split("/");
else if(dateFirst.indexOf("-") !== -1)
dateFirst=dateFirst.split("-");
else if(dateFirst.indexOf(".") !== -1)
dateFirst=dateFirst.split(".");
var monthFirst=dateFirst[1]+"/"+dateFirst[0]+"/"+dateFirst[2];


return new Date(monthFirst);


}

 

 

Notepad++ remove first or last character of every line

If you would like to remove the first character pf every line, use regular expressions in the find and replace option.

Find: ^.?(.*)

Replace with: \1

 

If on the other hand you would like to remove the last character of every line, use also the regular expressions in the find and replace option but instead using the following:

Find: .{1}$

Replace with:

 

Hope this helps!

Skype – change download location

Tools -> Options

 

IM settings -> Show advanced options

Change Folder

Select destination of the downloaded files desired

 

Click OK and SAVE

Change iFrame Height according to iFrame content (no jQuery required)

In the Parent page (which references the iframe), include the following in a script tag within your head section of your html:

if (window.addEventListener) {
addEventListener(“message”, messageListener, false)
} else if (window.attachEvent) {
attachEvent(“onmessage”, messageListener)
}
function messageListener(event) {
var originSecure = event.origin === “http://myiframe.com ” ;
if (!originSecure)
return;

if (parseInt(event.data) > 0)
document.getElementById(“test”).style.height = event.data + “px”;
}

 

Meanwhile, in your iframe include the following post message in your document ready script:

parent.postMessage(window.innerHeight, “*”);

Bootstrap fallback helper for IE8

Bootstrap has its own fallbacks for old browsers, but I was never fully satisfied with the result. The following helps setting the basic elements in place:

1. First add a JavaScript function to check if IE and if IE get the version

function isIE() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf(‘msie’) != -1) ? parseInt(myNav.split(‘msie’)[1]) : false;
}

 

1. On document load detect if IE and if version 8, append fallback classes to the head section of the page:

$(document).ready( function () {
if (isIE () == 8) {
$(“head”).append(“” +
“.container { width: 1170px; max-width: 1170px; min-widt: 1170px; } ” +
“.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{float:left}” +
“.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1 { width: 8%; }.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2 { width: 16%; }.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3 { width: 25%; }.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4 { width: 33%; }.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5 { width: 41%; }.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6 { width: 50%; }.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7 { width: 58%; }.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8 { width: 66%; }.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9 { width: 75%; }.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10 { width: 83%; }.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11 { width: 91%; }.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { width: 100%; }” +
“.col-sm-2 { width: 160px; margin:0; padding:0; float: left; }.col-sm-10 { width: 670px; margin:0; padding:0; float: left; }.col-md-12 { width: 100%; margin:0; padding:0; float: left; }.col-md-6 { width: 450px; margin-left: 10px;}.divider { height: 560px; }” +
“.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display:block;}” +
“”);

}
});