run jQuery code when screen size is more tha 1024px

Question

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!

All you are doing is adding new hover event listeners. Adding event listeners inside other event handlers, especially recurring ones like resize or scroll, is a really bad idea. Based on code shown it's still not very clear what overall intent is. Provide a minimal reproducible example — charlietfl
– charlietfl, Commented May 27, 2017 at 17:51

Community · Accepted Answer · 2020-06-20 09:12:55Z

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>

Thank you for the tips for code cleaning, it really looks better now. But the problem with resizing is still there. Right now, when I load the page on screen more than 1024, there are no images at all. They appear only when I resize the window (even on 1px) and don't dissapear when the window is resized to less than 1024.
@IrinaGluchova Ok I updated, now you have an init call resizeHandler(), also $('#sport, #business').off(); to remove all events to those two ids. Updated if/else if condition to include a situation on init where lastWinWidth = 0 and screen size is whatever you started with
Thank you so much! It's a miracle! It works perfect. You saved me from a heartbreak))

Oriles Elkar · Accepted Answer · 2017-05-27 18:26:48Z

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);

I tried this way by writing console.log('Window Width >= 1024'). It didn't help as it loads nothing at all dimensions at first and when the screen is resized, it shows images on all dimensions as well

Collectives™ on Stack Overflow

run jQuery code when screen size is more tha 1024px

2 Answers 2

jQuery

.off()

3 Comments

1 Comment

Hot Network Questions