Trim string depending on window width, issue on resize

Question

I want to trim the number of characters allowed using javascript. It works on load, but on resize the number goes to 0. Why is that? Can it be done without plugins?

Notes:

text-overflow property is of no help here because I need more lines.

Not that css hack with the background image (Text overflow ellipsis on two lines)

No jquery plugins.

Thanks!

function trimWords(){//change number of words depending on width in the category blog page
    var theString = $(".trimmed-words").html(); //the string
    var contentWidth = $(document).width(); //get width of browser
    if(contentWidth < 600){
        var maxLength = 80 // maximum number of characters to extract
    }
    else if (contentWidth >= 600 && contentWidth < 1025){
        var maxLength = 400   
    }
    else if (contentWidth >= 1025 && contentWidth < 1279){
        var maxLength = 40   
    }
    else if (contentWidth >= 1279){
        var maxLength = 75   
    }
    //trim the string to the maximum length
    var trimmedString = theString.substr(0, maxLength);

    //re-trim if we are in the middle of a word
    trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")));
    $(".trimmed-words").html(trimmedString);
}
trimWords();
$(window).resize(trimWords)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="trimmed-words">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

`maxLength` is local to those `if` blocks... is it ever working? — tymeJV, Mar 03 '15 at 16:27
@tymeJV yes, it is working on load (it loads the right number of characters depending on width), but not on resize — Claudiu Creanga, Mar 03 '15 at 16:29
Try declaring `maxLength` outside the `if` blocks - then assigning inside (dont redeclare with `var` — tymeJV, Mar 03 '15 at 16:31
Why you use `$(document).width()` while you need to get width of browser/window? Use `$(window).width()` instead — hindmost, Mar 03 '15 at 16:36

score 1 · Answer 1 · answered Mar 03 '15 at 16:37

You are using the trimmed value and I do not see anyplace you are storing the original string. So each time the resize routine is triggered you are reducing the string. You should be keeping a full version of the string someplace and evaluate what needs to be written out to the content area based on the full string not the altered one. Other than that your code should work fine.

score 1 · Answer 2 · answered Mar 03 '15 at 16:37

1

 var theString = $(".trimmed-words").html(); //the string

should be outside the trimWords() function.

It's not working during resize because the theString becomes "" empty.

JSBIN DEMO

answered Mar 03 '15 at 16:37

mohamedrias

18,326
2
38
47

score 1 · Accepted Answer · answered Mar 03 '15 at 16:39

You're not storing an original value to the string. check out my JS Fiddle

var trimmedStringOriginal = $(".trimmed-words").html();
trimWords();
$(window).resize(trimWords)

http://jsfiddle.net/s0svqyv4/

On load I store the string in a variable and then that variable is referenced on every resize.

Trim string depending on window width, issue on resize

3 Answers3