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

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

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;}” +
“”);

}
});

CSS showing overflowing text using “….”

It always annoyed me when a title or a paragraph is not big enough to fit all text and I would have to shorten it using javascript and append a “…” to show that there is more text. Now, I discovered that there is a way to do this using ONLY CSS!!!! Which I think is AWESOME…. Here it goes… very simple:

h1 {

width: 500px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

 

Using “overflow:hidden”, as we all should know by now, sets the overflow of the h1 (or whatever element in use) hidden, making all text outside the element hidden too. Meanwhile, “white-space: nowrap” is used to avoid having the text breaking over different lines. We want out title to fit in a line. Finally, “text-overflow: ellipsis” is telling the browser that IF there is an overflow of text, add “…” at the end of the text before the rest is hidden.

Hope this is as helpful to you as it was was for!

Flash / Video Responsiveness while maintaining Aspect Ratio

Lets take an aspect ratio of 16:9 since it is the most common ratio for videos/media. We all know that setting width: 100% and height: 100% will make it responsive in terms of size but in terms of keeping the same aspect ratio, this is not done right. View the demo below to compare the top example (bad) and the one below it (maintains aspect ratio).

 

View Demo Here

And this is how simple it is to get it done, using a stylesheet or by putting a style tag at the head of the page and pasting the following:


.player-container { /* Change to Default Size - Max player size */
max-width: 640px;
max-height: 360px;
}
#player {
position: relative;
padding-bottom: 56.25%; /* Maintains an aspect ratio of 16:9 */
padding-top: 25px;
height: 0;
}
#player object, #player embed{ /* for flash / embeds */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

And finally, this is how it would look like in your html:

<div class="player-container">
<div id="player">

</div>
</div>

Note: player-container is optional and is only suggested when embedding in an empty page or else the whole page will be the player.

 

Thanks and Enjoy 🙂

CSS Width 100% Height 100% issue with paddings!

Explanation and Solution:

Sometime, which tends to happen very often, we need to create an element which is 100% in terms of both width and height however with the padding it ends up being bigger than 100%. Let’s say we have an element 100% and a padding 10px on all sides. CSS does not work well if we just write width: 100% – 10px but I have a quick and easy solution to this. There is a CSS3 property that allows you to consider the padding as part of the width and height set. This CSS3 property is called box-sizing which basically calculated the width assuming the padding is included within the width / height set.

This would mean:  

width + padding = 100%

height + padding = 100%

 

CSS Code Sample:

.myElement{

width: 100%;

height: 100%;

padding: 10px;

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

-moz-box-sizing: border-box; /* Firefox */

box-sizing: border-box; /* Opera/IE 8+ */

}

 

Enjoy 🙂

CSS Selectors and Pseudo Selectors Helper

Important Selectors which might not be the most popular selectors, but make your like 100 times easier:

Selector Explanation Example
::after / ::before  prepends / appends a new element with the given content.  p::after { content: ‘This comes after’; }
+  for immediate adjacent sibling  p + p { } // 2 p’s next to each other
~  selects all sibling after of the given class within the same element  img ~ p { } // all p’s after img
>  child element – for first descendent children only  ul > li { } //only li’s directly under ul
::first-letter  selects the first letter of an element only  p::first-letter { font-size: 20px; }
::first-line  selects first line of an element. (won’t work on display:inline)  p::first-line { color: red; }
:first-child

:last-child

:nth-child

 selects any first child of an element

selects any last child of an element

selects the given child by position in an element

 p:first-child { color: red; }

p:last-child { color: green; }

p:nth-child(2) { color: blue; }

:first-of-type

:last-of-type

:nth-of-type

:nth-last-of-type

 selects first child of a specific type in an element

selects last child of a specific type in an element

selects  the given child by position of a specific type in an element

selects  the given child by position from bottom of a specific type in an element

 p:first-of-type { color: blue; } //1st of type p

p:last-of-type { color: navy; } //last of type p

p:nth-of-type(2) { color: navy; } //2nd from top

p:nth-last-of-type(2) { color: black; } //2nd from last

:in-range /

:out-of-range

 for input type range, can be used as a validator  input:in-range { border: 1px solid green; }

input:out-of-range { border: 1px solid red;}

:invalid  used for validations when using the required attribute to denote an error input:invalid { border: 1px solid red; }
:valid  used for validations when using the required attribute to denote valid  input:invalid { border: 1px solid green; }
:matches  groups by selectors  :matches(nav, div) h1 { color: red; }

:matches(nav, div) :matches(h2,h3) { color: green; }

:not(x)  selects all except given type or class  p:not(span) { font-size: 14px; } //span wouldn’t be 14px
:only-child  if the type given is the only child in the element  div p:only-child { color: red; } //if p is the only child in div
:required  indicated a required field when the required attribute is present  label:required { border: 1px solid red; }
:target  matched the hash in the url and the id of the element  http://example.com/#games

<div id=”games”></div>

#games { display: none;}

#games:target { display: block;}

 *  universal selector refers to all elements and types  *{ margin: 0px; }