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>

Advertisements

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;
}
}

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

remove-first

 

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:

remove-last

 

Hope this helps!

SVG with PNG fallback

SVG is a very good way of presenting images, however not all browsers support it. Browsers that do not support it would simply show nothing!

In order to be able to use SVG images both as <img> html tags and as css background images, we can use PNG fallbacks for older browsers that do not support SVG.

On the internet, a lot say that a simple onerror attribute in the <img> would suffice, however this did not work for me. The modernizer makes it very easy to have html element fallbacks using javascript.

If you do not already have modernizer installed, download here.

Once you add the reference to the modernizer and placed all your <img src=”image.svg” /> tags, place the following code at the bottom of you page in a javascript tag, preferably in document ready :


<script type="text/javascript">


if (!Modernizr.svg) {
var imgs = document.getElementsByTagName('img');
var svgExtension = /.*\.svg$/
var l = imgs.length;
for(var i = 0; i < l; i++) {
if(imgs[i].src.match(svgExtension)) {
imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
console.log(imgs[i].src);
}
}
</script>

Moreover, when using background images a very simple css change should be enough. Instead of using background or background-image, we will use them both. This would set the png first and if SVG is supported, it will be set after the png.


#myImage {
background: url("myImage.png") no-repeat 0 0;
background-image: url("myImage.svg");
}

FACEBOOK IS DOWN

download

 

Today 19th June, Facebook has been down for over 8 minutes already. For the past minutes, the domain was not even found, browser returned a page not found. Now, after few minutes, the domain seems to be back up BUT still the site is down. Atm, the page returns a facebook interface with “Oops… something went wrong”. Wonder how long this will take to fit. Thousands of businesses depend on facebook to be up and running, how much will the loss add up to?

For the rest, hold on to your selfies until Facebook is back up!   🙂

 

 

UPDATE:

Facebook is back up after approximately 30 minutes down time, no messages or explanations are given, the site is simply up as if it never happened.

Quick JavaScript Confirm Message Validator

For a quick and simple confirm message validator fire an OnClientClick event on the element required to validate. For instance on a delete link paste the following javascript call:

OnClientClick=”javascript:return confirm(‘Are you sure you want to Delete?’);”

This will display a pop up message giving yes or no as an option. If no is clicked, the click event is ignored, if yes is clicked, the click event is accepted.