Jquery - Detect Window Width

Question

i have this little script where i try to detect the window size to apply the limit of caracters of an element.

the problem the detection is not working. Always apply the limit of 150.

i have set an alert to look if detect or not, and now i´m sure that he is always apply the same.

can someone help me to find out what is wrong with this script?

here is my code:

$(function () {
        $(".block6 p").each(function (i) {
            len = $(this).text().length;
            if (len > 10) {
                if ($(window).width() <= 1280) {
                    $(this).text($(this).text().substr(0, 150) + '...');
                }
                else if ($(window).width() > 1280) {
                    $(this).text($(this).text().substr(0, 10) + '...');
                }
            }
        });
    });

write console.log($(window).width()) above the if condition. What does that give you? a jsfiddle would help us. — Venkata Krishna
– Venkata Krishna, Commented Jan 15, 2014 at 17:22

Community · Accepted Answer · 2017-05-23 11:57:38Z

4

Your code only runs once, on document.ready. You need to run the test every time the window is resized:

    $(window).on('resize',function() {
        if ($(window).width() <= 1280) {
            $(".block6 p").each(function (i) {
                var len = $(this).text().length;
                if (len > 10) {
                    $(this).text($(this).text().substr(0, 150) + '...');
                }
            });
        } else { //if ($(window).width() > 1280) {
            $(".block6 p").each(function (i) {
                var len = $(this).text().length;
                if (len > 10) {
                    $(this).text($(this).text().substr(0, 10) + '...');
                }
            });
        }
    });

    $(document).ready(function() {
        $(window).trigger('resize');
    }

http://jsfiddle.net/mblase75/6PQ4Q/

That said, you have a problem in that you're altering the text of each element directly, so switching back and forth by resizing the browser will be destructive. I suggest using text-overflow: ellipsis instead if possible.

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Jan 15, 2014 at 17:22

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2232273 Over a year ago

the problem is now that the script only work when i resize the window, but i want on load page.

user2232273 Over a year ago

can i do something like (document).load ??

Blazemonger Over a year ago

Forgot you had that in the <head>. Fixed that too.

user2232273 Over a year ago

its working now.... you are the man... heheh... thank you ver much for this great help... +1

Collectives™ on Stack Overflow

Jquery - Detect Window Width

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related