Solution 1 :

Extract the inner code block to a named function:

function adjustPadding() {
   if ($(window).width() < 1024) {
       $(".aaa").css( "padding-left", "250px" );
   }
}

Then call that in both places:

$("#english").click(adjustPadding);
$(window).resize(adjustPadding);

You don’t usually want event handlers to be nested, so a resize handler inside a click handler isn’t ideal. You’re essentially creating a new resize handler on every click with that strategy.

Also, as was mentioned in a comment by wlh, this could be accomplished with CSS and a media query:

.aaa {padding: 250px;}

@media (min-width: 1024px) {
    .aaa {padding: 0;}
}

Solution 2 :

The issue is you are binding the window resize event once the link is clicked. You need to separate your window binding from your click binding:

    $(document).ready(function() {

        //Click event binding
        $("#english").click(function() {                                   
            Resize();
        });

        //Window resize event binding
        $(window).resize(function () {
            Resize();
        });

        function Resize() {
            console.log("Resize function called");
            if ($(window).width() < 1024) {
                console.log("Window Resize Executed");
                $(".aaa").css("padding-left", "250px");
            }
        }

    });

Problem :

I’ve implemented responsive design in my website, but also I’ve applied 2 languages option, so the responsive design isn’t accurate once language is changed (because of text direction ltr/rtl).

So I’ve used jQuery resize function to check when screen size is below 1024px, if true, the css will change.

$(document).ready(function() {
 $("#english").click(function() {
    //responsive resizing css
    $(window).resize(function() {
   if ($(window).width() < 1024) {
            $(".aaa").css( "padding-left", "250px" );
   }
  });
 });
});

Codepen

So far it works, but if you refresh the page on 1024px, and click English, the CSS will only apply once you resize the page (using CTRL + Mouse scroller).

How can I apply the CSS changes even if user refresh the page on a smaller screen?

EDIT:

I want the CSS change to be applied only once the screen is below 1024px, otherwise the CSS will not be applied.

Comments

Comment posted by wlh

I think there is a CSS only solution. Are you setting the

Comment posted by tympanus.net/codrops/css_reference/lang

Check out this

Comment posted by Ajit Panigrahi

What benefit do you see with only applying it

Comment posted by Yotam Dahan

@AjitZero I’m trying to optimize the code not only when the page is resized, but I don’t know the right approach to do it.

Comment posted by Yotam Dahan

But now I always when I click english the css change will apply

Comment posted by Yotam Dahan

I want it to apply only when size is below 1024

Comment posted by Ajit Panigrahi

@YotamDahan

By

Leave a Reply

Your email address will not be published. Required fields are marked *