CODEWITHSUNDEEP
javascriptjqueryresponsive-designresize
Irina Gluchova
Irina Gluchova

Reputation: 15

run jQuery code when screen size is more tha 1024px

I need to show images and descriptions for body on title hover when the screen size is more than 1024 and to show nothing if it's less. According to my code everything works perfect on load, but when I resize the screen from large to small the images and descriptions are still visible. I tried to write the else statement but it didn't help. 

$(document).ready(function(){

var $window = $(window);
  function checkWidth() {
    var windowsize = $window.width();
    if (windowsize >= 1024) {

    $('#business').hover(function() {
    $('#business_image').fadeIn('500');
    $('#business_description').fadeIn('500');
 },function() {
    $('#business_image').fadeOut('500');
    $('#business_description').fadeOut('500');
 });
 $('#sport').hover(function() {
    $('#sport_image').fadeIn('500');
    $('#sport_description').fadeIn('500');
  },function() {
    $('#sport_image').fadeOut('500');
    $('#sport_description').fadeOut('500');
 });
 } else {
    $('#business_image').hide();
    $('#business_description').hide();
    $('#sport_image').hide();
    $('#sport_description').hide();     
}
}
  checkWidth();
  $(window).resize(checkWidth);
});

I would appreciate any help, thank you!

Upvotes: 1

Views: 615

Answers (2)

Dalin Huang
Dalin Huang

Reputation: 11342

First, few improvement to your code, if window size just changing above 1024 (ex: 1300px changed to 1250px) or below 1024 (600px changed to 700px) you don't need to do anything, it is only the point you cross the 1024px you need to call the method.

On init, lastWinWidth = 0, so curWinWidth >= 1024 && lastWinWidth == 0 will be true if on page load your window width more than 1024.

So this will do the trick:

if ((curWinWidth >= 1024 && lastWinWidth < 1024) ||
      (curWinWidth >= 1024 && lastWinWidth == 0)) {
} else if ((curWinWidth < 1024 && lastWinWidth >= 1024) ||
      (curWinWidth < 1024 && lastWinWidth == 0)) {
}
lastWinWidth = curWinWidth;

Also jQuery allowed you to do multiple-selector so you can combine your code into one line:

$('#business_image, #business_description').fadeIn('500');

Add $('#sport, #business').off(); to the else statement so remove the hover events for both #sport and #business.

jQuery

.off()

Description: Remove an event handler.

REF: http://api.jquery.com/off/

As the comments said, try to clean up your code. My solution will only help you remove the events when the window width < 1024.

$(document).ready(function() {
  var lastWinWidth = 0;

  $(window).resize(resizeHandler);

  function resizeHandler() {
    var curWinWidth = $(window).width();

    if ((curWinWidth >= 1024 && lastWinWidth < 1024) ||
      (curWinWidth >= 1024 && lastWinWidth == 0)) {
      console.log('Window Width >= 1024 now');
      $('#business').hover(function() {
        $('#business_image, #business_description').fadeIn('500');
      }, function() {
        $('#business_image, #business_description').fadeOut('500');
      });
      $('#sport').hover(function() {
        $('#sport_image, #sport_description').fadeIn('500');
      }, function() {
        $('#sport_image, #sport_description').fadeOut('500');
      });
    } else if ((curWinWidth < 1024 && lastWinWidth >= 1024) ||
      (curWinWidth < 1024 && lastWinWidth == 0)) {
      console.log('Window width < 1024 now');
      $('#sport, #business').off();
      $('#business_image, #business_description, #sport_image, #sport_description').hide();
    }
    lastWinWidth = curWinWidth;
  }
  //init
  $('#business_image, #business_description, #sport_image, #sport_description').hide();
  resizeHandler();
});
#business, #sport {
  display: inline-block;
  background: aqua;
  margin: 10px;
  width: 150px;
  height: 100px;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br><br><br>
<div id="business">business
  <div id="business_image">business_image</div>
  <div id="business_description">business_description</div>
</div>

<div id="sport">sport
  <div id="sport_image">sport_image</div>
  <div id="sport_description">sport_description</div>
</div>

Upvotes: 1

Oriles Elkar
Oriles Elkar

Reputation: 46

What do you want to achive is add function to "resize" event. Calling function inside a function can have negative impact on user experience.

If you create function outside and then just attach the the function on the resize event on window, it will do the job.

Sample code:

function checkWidth() {
    console.log("resizing logic");
}

$(window).on("resize", checkWidth);

Upvotes: 0

Related Questions