Characters Length

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
YoussefSiblini
Forum Contributor
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm

Characters Length

Post 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
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Characters Length

Post 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);
YoussefSiblini
Forum Contributor
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm

Re: Characters Length

Post by YoussefSiblini »

Thank you, that worked perfect.
YoussefSiblini
Forum Contributor
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm

Re: Characters Length

Post 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
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Characters Length

Post 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().
YoussefSiblini
Forum Contributor
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm

Re: Characters Length

Post 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) + "...";
       }
  });
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Characters Length

Post 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.
YoussefSiblini
Forum Contributor
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm

Re: Characters Length

Post by YoussefSiblini »

Wow I can never understand this code, but the good news is it worked for me Thank you :)
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Characters Length

Post 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.
YoussefSiblini
Forum Contributor
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm

Re: Characters Length

Post by YoussefSiblini »

Thank you I understand it now, Many Many thanks again
Post Reply