window resize if and else if state jquery not working

Question

I want to run script based on window resize. when I apply if statement not working while browser resize. the current code working only when I reload the page in every screen. I need to do run the script without page load using if and else if media query in jquery. anyone help me to achieve this.

my webiste

    $(window).resize(function() {
    if ($(window).width() > 1200) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 22;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    }
    if ($(window).width() < 1199) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 15;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    }
    if ($(window).width() < 991) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 10;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    }
    if ($(window).width() < 639) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 10;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    }
});

What error are you getting? have you checked in console by printing a message if your script is getting executed on resize? — SRK, Mar 30 '18 at 09:35
You have a }); at the end of your script on your website that shouldn't exist. — Onyx Caldin, Mar 30 '18 at 09:36
@John Just after the $(window).on('resize', function() { ..... }); — Onyx Caldin, Mar 30 '18 at 09:42

sabithpocker · Answer 1 · 2018-03-30T09:48:53.203

0

Fix the syntax error shown on console: (Check if this answer works)

SyntaxError: Invalid character '\u200b'

Another answer here discusses how this zero width character might have crept in.

Also, Form HTML remove the following onload handler.

<body onload="$(window).resize()">

Instead use a single event handler to bind both load and resize events.

$(window).on('load resize', function(){
    var width = $(window).width();
    console.log('width', width);
})

edited Mar 30 '18 at 09:48

answered Mar 30 '18 at 09:41

sabithpocker

15,274
1
42
75

can you post full answer with using my above script – John Mar 30 '18 at 09:53
@John Please ask a specific question if anything is not clear. – sabithpocker Mar 30 '18 at 15:47

score 0 · Answer 2 · answered Mar 30 '18 at 10:12

We need to trigger the same function during document ready and window resize. Try the below code

$(document).ready(function() {
    processMenuArea($);

    $(window).resize(function() {
        processMenuArea($);
    });
});

function processMenuArea($) {
    if ($(window).width() < 639) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 10;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    } else if ($(window).width() < 991) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 10;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    } else if ($(window).width() < 1199) {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 15;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    } else {
        $('.menus-area .posts .tileh4 span:first-child').each(function() {
            var words = $(this).text();
            var maxWords = 22;
            if (words.length > maxWords) {
                html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                $(this).html(html)
                $(this).find('a.read_more_sec').click(function(event) {
                    $(this).toggleClass("less");
                    event.preventDefault();
                    if ($(this).hasClass("less")) {
                        $(this).html("<i class='fa fa-arrow-left'></i>")
                        $(this).parent().find(".more_text").show();
                    } else {
                        $(this).html("<i class='fa fa-arrow-right'></i>")
                        $(this).parent().find(".more_text").hide();
                    }
                })
            }
        });
    }
}

Hi John, I ran the above code in console of your website page and I see its working fine in resize. Can you explain more on what is not working and are you testing on any device... — Shreyas Kumar, Mar 31 '18 at 12:52
No Mr.Shreysa still not working. anyways thanks for your effort. I got solution already. — John, Apr 02 '18 at 03:43

score 0 · Accepted Answer · answered Apr 02 '18 at 03:45

I have tried using this. Its working for me

$(window).on("load resize", function(e) {
        $('a.read_more_sec').each(function() {
            $(this).remove()
        });
        $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
            var text = $(this).text();
            if ($(this).find(".vhide").length == 0) {
                $(this).html('');
                $(this).text($.trim(text))
            }
        });
        if ($(window).width() > 1200) {
            $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
                var words = $(this).text();
                var maxWords = 21;
                if (words.length > maxWords) {
                    html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                    $(this).html(html)
                    $(this).find('a.read_more_sec').click(function(event) {
                        $(this).toggleClass("less");
                        event.preventDefault();
                        if ($(this).hasClass("less")) {
                            $(this).html("<i class='fa fa-arrow-left'></i>")
                            $(this).parent().find(".more_text").show()
                        } else {
                            $(this).html("<i class='fa fa-arrow-right'></i>")
                            $(this).parent().find(".more_text").hide()
                        }
                    })
                }
            })
        } else if ($(window).width() < 1199 && $(window).width() >= 1025) {
            $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
                var words = $(this).text();
                var maxWords = 15;
                if (words.length > maxWords) {
                    html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                    $(this).html(html)
                    $(this).find('a.read_more_sec').click(function(event) {
                        $(this).toggleClass("less");
                        event.preventDefault();
                        if ($(this).hasClass("less")) {
                            $(this).html("<i class='fa fa-arrow-left'></i>")
                            $(this).parent().find(".more_text").show()
                        } else {
                            $(this).html("<i class='fa fa-arrow-right'></i>")
                            $(this).parent().find(".more_text").hide()
                        }
                    })
                }
            })
        } else if ($(window).width() < 1025 && $(window).width() >= 991) {
            $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
                var words = $(this).text();
                var maxWords = 15;
                if (words.length > maxWords) {
                    html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                    $(this).html(html)
                    $(this).find('a.read_more_sec').click(function(event) {
                        $(this).toggleClass("less");
                        event.preventDefault();
                        if ($(this).hasClass("less")) {
                            $(this).html("<i class='fa fa-arrow-left'></i>")
                            $(this).parent().find(".more_text").show()
                        } else {
                            $(this).html("<i class='fa fa-arrow-right'></i>")
                            $(this).parent().find(".more_text").hide()
                        }
                    })
                }
            })
        } else if ($(window).width() < 991 && $(window).width() >= 767) {
            $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
                var words = $(this).text();
                var maxWords = 9;
                if (words.length > maxWords) {
                    html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"><i class="fa fa-arrow-right"></i></a>'
                    $(this).html(html)
                    $(this).find('a.read_more_sec').click(function(event) {
                        $(this).toggleClass("less");
                        event.preventDefault();
                        if ($(this).hasClass("less")) {
                            $(this).html("<i class='fa fa-arrow-left'></i>")
                            $(this).parent().find(".more_text").show()
                        } else {
                            $(this).html("<i class='fa fa-arrow-right'></i>")
                            $(this).parent().find(".more_text").hide()
                        }
                    })
                }
            })
        } else if ($(window).width() < 767) {
            $('.menus-area .posts .tileh4 > span').not('.vhide,.versn').each(function() {
                var words = $(this).text();
                var maxWords = 10;
                if (words.length > maxWords) {
                    html = words.slice(0, maxWords) + '<span class="more_text">' + words.slice(maxWords, words.length) + '</span>' + ' <a href="#" class="read_more_sec"></a>'
                    $(this).html(html)
                    $(this).find('a.read_more_sec').click(function(event) {
                        $(this).toggleClass("less");
                        event.preventDefault();
                        if ($(this).hasClass("less")) {
                            $(this).html("")
                            $(this).parent().find(".more_text").show()
                        } else {
                            $(this).html("")
                            $(this).parent().find(".more_text").hide()
                        }
                    })
                }
            })
        }

window resize if and else if state jquery not working

3 Answers3