Dynamic javascript function [duplicate]

Question

I have a javascript function which I want to execute only if the browser screen with is bigger than 1024px.

if ($(window).width() > 1024) {

The problem with this code is that if a user first load the webpage in a browser screen 800px and then just rescale the browser screen to 1024 (or more) the function is not executed. In order to be executed the screen needs to be refreshed.

Do you have any suggestion how to fix it?

Answered in a jQuery way because you already use jQuery. Normally I would not as it is only tagged JavaScript. But anyhow ... do you want it tagged as javascript or javascript + jQuery? If you are after a pure javascript solution, I'll delete answer. — user13500
– user13500, Commented Apr 5, 2014 at 16:25

Patrick Evans · Accepted Answer · 2014-04-05 16:09:41Z

2

Just set the window.resize event, which will be called at least once on load and anytime there is a resize, and use a flag to make sure it isnt executed more than once.

(function(){
   var executed = false;
   $(window).resize(function(){
      if(executed) return;
      if($(window).width()>1024){
         executed = true;
         executeSomeFunc();
      }
   });
})();

answered Apr 5, 2014 at 16:09

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

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

Comments

user13500 · Accepted Answer · 2014-04-05 17:10:03Z

0

jQuery resize

$(document).ready(function() {
    if ($(window).width() > 1024) {
        my_awesome_window_above1024_function();
    }
});
$(window).resize(function() {
    if ($(window).width() > 1024) {
        my_awesome_window_above1024_function();
    }
});

edited Apr 5, 2014 at 17:10

answered Apr 5, 2014 at 16:09

user13500

3,8642 gold badges29 silver badges34 bronze badges

4 Comments

user13500 Over a year ago

And down-vote was because of?

user3066588 Over a year ago

But now the problem is that it is not working on "document ready" - what I mean is when I load the page I need to resize it before the function can be executed e.g If my browser screen is 1050px the function won't work before I resize the screen.

user13500 Over a year ago

@user3066588: Like that?

user13500 Over a year ago

@user3066588: Glad to be at service :)

Ani · Accepted Answer · 2014-04-05 16:09:00Z

0

Use:

  $( window ).resize(function() {
    if ($(window).width() > 1024) {

         // Your code.
    }
 }

answered Apr 5, 2014 at 16:09

Ani

4,5434 gold badges28 silver badges32 bronze badges

1 Comment

user13500 Over a year ago

Anyone care to explain the down vote?

BenMorel · Accepted Answer · 2014-06-23 15:09:44Z

0

I would use native JS for this one like this:

window.onresize=function(){
  if(window.innerWidth > 1024){
    alert('GT 1024');
    // Your function here
  }
};

The width property is innerWidth (http://www.w3schools.com/jsref/prop_win_innerheight.asp) and the resize function is (http://www.w3schools.com/jsref/event_onresize.asp)

Not clear exactly what you want to do, but if you're changing CSS rules for display you're better off using CSS media queries (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)

edited Jun 23, 2014 at 15:09

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Apr 5, 2014 at 16:19

amay0048

1,09110 silver badges11 bronze badges

Collectives™ on Stack Overflow

Dynamic javascript function [duplicate]

4 Answers 4

Comments

4 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

1 Comment

Comments

Linked

Related