Dynamic javascript function

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?

Use the window `resize` event. See https://api.jquery.com/resize/ — tewathia, Apr 05 '14 at 16:07
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, Apr 05 '14 at 16:25

score 2 · Answer 1 · answered Apr 05 '14 at 16:09

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 05 '14 at 16:09

Patrick Evans

38,456
6
62
84

Works great, thank you a lot. – user3066588 Apr 05 '14 at 16:16

score 0 · Answer 2 · answered Apr 05 '14 at 16:09

0

Use:

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

         // Your code.
    }
 }

answered Apr 05 '14 at 16:09

Ani

4,241
4
23
29

Anyone care to explain the down vote? – user13500 Apr 05 '14 at 16:14
Works great, thank you a lot. – user3066588 Apr 05 '14 at 16:14
@user3066588 Welcome. Glad could help. – Ani Apr 05 '14 at 16:16

user13500 · Accepted Answer · 2014-04-05T17:10:03.737

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 05 '14 at 17:10

answered Apr 05 '14 at 16:09

user13500

3,619
2
24
33

And down-vote was because of? – user13500 Apr 05 '14 at 16:13
Works great, thank you a lot. – user3066588 Apr 05 '14 at 16:16
@user3066588: You are very welcome. – user13500 Apr 05 '14 at 16:17
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. – user3066588 Apr 05 '14 at 17:06
@user3066588: Like that? – user13500 Apr 05 '14 at 17:10
Perfect! Thank you very much! – user3066588 Apr 05 '14 at 17:11
@user3066588: Glad to be at service :) – user13500 Apr 05 '14 at 17:13

score 0 · Answer 4 · edited Jun 23 '14 at 15:09

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)

Dynamic javascript function

4 Answers4