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;}
}
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");
}
}
});
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.
I think there is a CSS only solution. Are you setting the
@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.