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