trunKit: "…" to full text on hover

trunKit is a simple jQuery plugin that does two things:

1. Remove words from the end of the content of a fixed-height div until the remaining content plus … fits
2. Add a div inside the displayed div (inheriting most of the css characteristics) that appears on hover with the full content

download

• trunKit.js
• trunKit.css

usage

<link rel="stylesheet" type="text/css" href="trunKit.css" />
<script src="trunKit.js"></script>

<script>
$(document).ready(function(){
	$(".captionDiv").trunKit();
});
</script>

By default, the class "trunKit" will be used for the hover overlay. This can be overridden with a parameter. The default trunKit CSS class is:

.trunKit{
	position:absolute;
	left:-4px;
	top:-4px;
	background-color:white;
	border:2px dashed #999999;
	padding:2px;	
	z-index:100;
}

which creates a white overlay with a dashed board.

The div being styled should have a set height.

parameters

the $.trunKit() function takes an optional set of parameters:

hoverClass

Class used for both the hover selector and the visual display of the full text overlay. (defaults to "trunKit")

durationFadeIn

Standard jQuery duration parameter, in ms, for fadeIn() of overlay. (defaults to 200)

durationFadeOut

Standard jQuery duration parameter, in ms, for fadeIn() of overlay. (defaults to 200)

example