dezinezync · December 16, 2015 20:39
diff --git a/clipp.html b/clipp.html
 <!DOCTYPE>
 <html>
 	
 	<head>
 		<title>Clipp - More text than an element can fit? Clipp it!</title>
 	
 		<style>
 			body,html {
 				margin: 0;
 			}
 			
 			body {
 				font: 16px/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 			}
 			
 			#intro,#examples {
 				width: 600px;
 				margin: 60px auto 0;
 			}
 			
 			#non,#access {
 				width: 600px;
 				background: #f7f7f7;
 				padding: 30px;
 				
 				margin: 30px auto 0;
 			}
 			
 			.clipp:first-child {
 				height: 24px;
 			}
 			
 			.clipp:nth-child(2) {
 				height: 50px;
 			}
 			
 			.clipp:nth-child(3) {
 				height: 24px;
 			}
 			
 			#examples {
 				margin-bottom: 60px;
 			}
 			
 		</style>
 	
 	</head>
 	
 	<body>
 	
 		<div id="intro">
 			
 			<h1>Clipp.js</h1>
 			
 			<p>
 				Clipp.js is a simple drop-in javascript function allowing you to clip text whenever it cannot fit within it's element's bounding box.
 			</p>
 		
 		</div>
 		
 		<div id="examples">
 			
 			<div id="non">
 				<h2>These are some elements without access to the Clipp function.</h2>
 				
 				<p>
 					This app does everything you could possibly want it to do and not only that, it is beautifully designed and extremely intuitive to use. Download it from the App Store for FREE if you don't mind some adverts popping up or if you prefer an ad-free experience then you can download the ad-free version for 99p.
 				</p>
 				
 				<div>
 					Here are just some of the fantastic reviews that we are very humbled to say our app will never receive
 				</div>
 				
 			</div>
 			
 			<div id="access">
 				
 				<h2 class="clipp">These are elements with access to the Clipp function. Check the source code. It's really this simple. Nothing complicated.</h2>
 				
 				<p class="clipp">
 					This app does everything you could possibly want it to do and not only that, it is beautifully designed and extremely intuitive to use. Download it from the App Store for FREE if you don't mind some adverts popping up or if you prefer an ad-free experience then you can download the ad-free version for 99p.
 				</p>
 				
 				<div class="clipp">
 					Here are just some of the fantastic reviews that we are very humbled to say our app will never receive.Here are just some of the fantastic reviews that we are very humbled to say our app will never receiveHere are just some of the fantastic reviews that we are very humbled to say our app will never receive.
 				</div>
 				
 			</div>
 			
 		</div>
 		
 		<script type="text/javascript">
 		
 		document.addEventListener('DOMContentLoaded', function(event) {
 			
 			//DOM content has loaded. We are ready to tackle elements that need some fixing!
 			
 			/*
 			* If document.getElementsByClassName isn't available,
 			* you should load this http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/
 			*/
 			
 			
 			//Looking for elements with the clipp class
 			var elems = document.getElementsByClassName('clipp');
 			
 			for(var i=0,x=elems.length;i<x;i+=1) {
 				parseAsClipp(elems[i]);
 			}
 			
 			function parseAsClipp(elem, delimiter) {
 			
 				delimiter = delimiter || '...';
 				
 				function stringClipAt() {
 					
 					var delem = document.createElement(t),
 						styleBlock = {
 							position: 'absolute',
 							width: elem.offsetWidth,
 						};
 						
 						delem.innerHTML='';
 						
 						for(var i in styleBlock) {
 							delem.style[i]=styleBlock[i];
 						}
 						
 						document.body.appendChild(delem);
 						
 					for(var i=0,cH=0,x=s.length; i<x;i+=1) {
 						delem.innerHTML+=s.charAt(i);
 						
 						if(delem.offsetHeight > h) {
 							
 							document.body.removeChild(delem);
 							return i-1;
 							
 						}
 					
 					}
 					
 					document.body.removeChild(delem);
 					
 					return 0;
 					
 				}
 				
 				if(!elem) return; //Don't do anything if there is no element provided.
 				
 				if(elem.offsetHeight) { // Element's height is defined
 					
 					var h = parseInt(elem.offsetHeight),
 						s = elem.innerHTML,
 						t = elem.tagName || elem.nodeName;
 						
 					if(!s.length) return; //If the element has no text, don't do anything.
 					
 					var o = stringClipAt();
 					
 					if(o>5) {
 						// Text in our element is longer than it should be
 						
 						s = s.slice(0,o-3);
 						s += ' ' + delimiter; 
 						
 						elem.innerHTML = s;
 					}
 					
 					else elem.style['display'] = 'none'; //Simply hide the element if we cannot clipp it but it needs to be.
 					
 					
 				}
 				
 				
 			}
 			
 		});
 		
 		</script>
 		
 	</body>
 	
 </html>
	<!DOCTYPE>
	<html>

	<head>
	<title>Clipp - More text than an element can fit? Clipp it!</title>

	<style>
	body,html {
	margin: 0;
	}

	body {
	font: 16px/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	}

	#intro,#examples {
	width: 600px;
	margin: 60px auto 0;
	}

	#non,#access {
	width: 600px;
	background: #f7f7f7;
	padding: 30px;

	margin: 30px auto 0;
	}

	.clipp:first-child {
	height: 24px;
	}

	.clipp:nth-child(2) {
	height: 50px;
	}

	.clipp:nth-child(3) {
	height: 24px;
	}

	#examples {
	margin-bottom: 60px;
	}

	</style>

	</head>

	<body>

	<div id="intro">

	<h1>Clipp.js</h1>

	<p>
	Clipp.js is a simple drop-in javascript function allowing you to clip text whenever it cannot fit within it's element's bounding box.
	</p>

	</div>

	<div id="examples">

	<div id="non">
	<h2>These are some elements without access to the Clipp function.</h2>

	<p>
	This app does everything you could possibly want it to do and not only that, it is beautifully designed and extremely intuitive to use. Download it from the App Store for FREE if you don't mind some adverts popping up or if you prefer an ad-free experience then you can download the ad-free version for 99p.
	</p>

	<div>
	Here are just some of the fantastic reviews that we are very humbled to say our app will never receive
	</div>

	</div>

	<div id="access">

	<h2 class="clipp">These are elements with access to the Clipp function. Check the source code. It's really this simple. Nothing complicated.</h2>

	<p class="clipp">
	This app does everything you could possibly want it to do and not only that, it is beautifully designed and extremely intuitive to use. Download it from the App Store for FREE if you don't mind some adverts popping up or if you prefer an ad-free experience then you can download the ad-free version for 99p.
	</p>

	<div class="clipp">
	Here are just some of the fantastic reviews that we are very humbled to say our app will never receive.Here are just some of the fantastic reviews that we are very humbled to say our app will never receiveHere are just some of the fantastic reviews that we are very humbled to say our app will never receive.
	</div>

	</div>

	</div>

	<script type="text/javascript">

	document.addEventListener('DOMContentLoaded', function(event) {

	//DOM content has loaded. We are ready to tackle elements that need some fixing!

	/*
	* If document.getElementsByClassName isn't available,
	* you should load this http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/
	*/


	//Looking for elements with the clipp class
	var elems = document.getElementsByClassName('clipp');

	for(var i=0,x=elems.length;i<x;i+=1) {
	parseAsClipp(elems[i]);
	}

	function parseAsClipp(elem, delimiter) {

	delimiter = delimiter \|\| '...';

	function stringClipAt() {

	var delem = document.createElement(t),
	styleBlock = {
	position: 'absolute',
	width: elem.offsetWidth,
	};

	delem.innerHTML='';

	for(var i in styleBlock) {
	delem.style[i]=styleBlock[i];
	}

	document.body.appendChild(delem);

	for(var i=0,cH=0,x=s.length; i<x;i+=1) {
	delem.innerHTML+=s.charAt(i);

	if(delem.offsetHeight > h) {

	document.body.removeChild(delem);
	return i-1;

	}

	}

	document.body.removeChild(delem);

	return 0;

	}

	if(!elem) return; //Don't do anything if there is no element provided.

	if(elem.offsetHeight) { // Element's height is defined

	var h = parseInt(elem.offsetHeight),
	s = elem.innerHTML,
	t = elem.tagName \|\| elem.nodeName;

	if(!s.length) return; //If the element has no text, don't do anything.

	var o = stringClipAt();

	if(o>5) {
	// Text in our element is longer than it should be

	s = s.slice(0,o-3);
	s += ' ' + delimiter;

	elem.innerHTML = s;
	}

	else elem.style['display'] = 'none'; //Simply hide the element if we cannot clipp it but it needs to be.


	}


	}

	});

	</script>

	</body>

	</html>