Page 1 of 1
Characters Length
Posted: Tue Sep 13, 2011 10:05 am
by YoussefSiblini
Hi Guys,
I never used Javascript before, but what I want to achieve is:
I have a div called Limited and I want any text to come to this div to output the first 300 characters only followed by (...) three dots.
Please can you give a code example since I am newb with this
Youssef
Re: Characters Length
Posted: Tue Sep 13, 2011 10:39 am
by Weirdan
https://developer.mozilla.org/en/JavaSc ... ring/slice
Code: Select all
(function(d) {
var elt = d.getElementById('divId');
if (elt.innerHTML.length > 300) {
elt.innerHTML = elt.innerHTML.slice(0,300) + "…";
}
})(document);
Re: Characters Length
Posted: Tue Sep 13, 2011 12:04 pm
by YoussefSiblini
Thank you, that worked perfect.
Re: Characters Length
Posted: Tue Sep 13, 2011 12:31 pm
by YoussefSiblini
Sorry just one thing,
I am using this,
Code: Select all
function validateMyForm ( )
{
var elt = document.getElementById('limit');
if (elt.innerHTML.length > 20) {
elt.innerHTML = elt.innerHTML.slice(0,20) + "...";
}
}
OK what I am having trouble with is: it is working only on the first div and not on the others, I have like 14 div having the same id (limit) and I want it to upply to all of them?
Second thing can I make it like load with the page so the user don have to click a button for it to change?
Youssef
Re: Characters Length
Posted: Wed Sep 14, 2011 8:34 am
by Weirdan
getElementById() always return just one element, because you can't have duplicate ids in a valid html document. You could use the class + getElementsByClassName().
Re: Characters Length
Posted: Wed Sep 14, 2011 8:46 am
by YoussefSiblini
Thank you Weirdan,
I already did that but I am not able to get the innerHTML.length for that classes, I am not sure if I can get the innerHTML for a class? Here is my last code below:
Code: Select all
$(document).ready(function()
{
var elt = document.getElementsByClassName('limit');
console.log(elt);
if (elt.innerHTML.length > 20)
{
elt.innerHTML.slice(0,20) + "...";
}
});
Re: Characters Length
Posted: Wed Sep 14, 2011 9:46 am
by Weirdan
getElemetsByClassName() returns a collection of elements, not a single element, so you need to iterate over the collection and apply the limiting function to each element:
Code: Select all
$(function() {
function limit(max) {
return function (_, elt) {
elt = $(elt);
if (elt.html().length > max) {
elt.html(elt.html().slice(0, max) + "…");
}
};
}
$('.limit').each(limit(20));
});
This is jQuery-flavoured version as you seem to be using jQuery.
Re: Characters Length
Posted: Wed Sep 14, 2011 10:09 am
by YoussefSiblini
Wow I can never understand this code, but the good news is it worked for me Thank you

Re: Characters Length
Posted: Wed Sep 14, 2011 10:17 am
by Weirdan
It's quite easy to understand though:
limit() is a factory function, it returns a function that limits an element contents to the specified length. Then the function returned passed to .each() method of the jQuery object, containing the results of '.limit' selector (selects all elements that have limit class). .each() applies that function to every element of those results.
Re: Characters Length
Posted: Wed Sep 14, 2011 10:32 am
by YoussefSiblini
Thank you I understand it now, Many Many thanks again