jqueryexample.com css and jQuery ellipsis ... - jqueryexample.com
Prev PostNext Post

css and jQuery ellipsis … by jqueryuser

Today I learn a new thing css & jQuery ellipsis:

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
————————-

Above css not woks in Firefox so the best way is  jQuery script for the same.

<html>
<head>
<title>CSS3 Text Overflow Test</title>
<script type=”text/javascript” src=”jquery-1.3.1.js”></script>
<script type=”text/javascript” src=”jquery.text-overflow.js”></script>
<style type=”text/css”>
.overflow {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
width: 20%;
white-space: nowrap;
border: 1px solid black;
overflow: hidden;
margin-bottom: 15px;
}
</style>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#one”).ellipsis(true);
$(“#two”).ellipsis();
});
</script>
</head>
<body>
<h1>Ellipsis Test Page</h1>
<p>
This is a test page for the ellipsis jQuery plugin.  You can see the original blog post</p>
<p>
<strong>$(“#one”).ellipsis(true);</strong><br>
If you resize your window, the ellipsis will be updated.
<div id=”one”>Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</p>
<p>
<strong>$(“#two”).ellipsis();</strong><br>
This one will not update when you resize your window.
<div id=”two”>Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</p>
</body>
</html>

————–
Jquery Code
————–

(function($) {
$.fn.ellipsis = function(enableUpdating){
var s = document.documentElement.style;
if (!(‘textOverflow’ in s || ‘OTextOverflow’ in s)) {
return this.each(function(){
var el = $(this);
if(el.css(“overflow”) == “hidden”){
var originalText = el.html();
var w = el.width();

var t = $(this.cloneNode(true)).hide().css({
‘position’: ‘absolute’,
‘width’: ‘auto’,
‘overflow’: ‘visible’,
‘max-width’: ‘inherit’
});
el.after(t);

var text = originalText;
while(text.length > 0 && t.width() > el.width()){
text = text.substr(0, text.length – 1);
t.html(text + “…”);
}
el.html(t.html());

t.remove();

if(enableUpdating == true){
var oldW = el.width();
setInterval(function(){
if(el.width() != oldW){
oldW = el.width();
el.html(originalText);
el.ellipsis();
}
}, 200);
}
}
});
} else return this;
};
})(jQuery);

————–

for more reference visit

: http://dl.dropbox.com/u/534786/index.html
Did you like this? Share it:

Discussion

No comments yet, be the first.

Leave a Comment


Prev PostNext Post