1

Actually i have a hover function which triggers on mouse hover and i want to work this function only on screen size > 768 px as on touch screen there no point to have this function. I have achieved this by adding an if statement in in a javascript function as follow:and placing my jquery inside this function.

function hoverFunction() { if ($(window).width() >760 ){

} }

now this hoverFunction() is called twice once onchange and one onwindow load. Now lets talk about the problem. When i load the page and using developer tools move from large screen seize to small the hover function doen not disable even below 768 px until i refresh the page or i trigger the onchange function. it happens same when i move from small to large screen size, i have to either refresh the page i use onchange. is there any way to over come this issue.

Sohail Shams
  • 121
  • 1
  • 11
  • thank you all for your valuable input. actually i am new to javascript. i tried to fix it but could not do so. can any one please explain how can i attach this resize with my hover function so that each time when screen size changes it checks the if screen with is > 760 and then triggers hover function. – Sohail Shams May 21 '20 at 09:01

4 Answers4

0

Yes you can do it with window.onresize, check the example here:

https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

Tasos
  • 1,880
  • 13
  • 19
0

you need to attach it on resize event, it will trigger on every screen size change

onik
  • 1,579
  • 1
  • 11
  • 19
  • thank you all for your valuable input. actually i am new to javascript. i tried to fix it but could not do so. can any one please explain how can i attach this resize with my hover function so that each time when screen size changes it checks the if screen with is > 760 and then triggers hover function – Sohail Shams May 21 '20 at 09:20
0

Please visit below link , this is how you can trigger your custom function using jquery https://stackoverflow.com/a/15114048/7300804

Dinesh Deshpande
  • 27
  • 7
0

You can just use window.addEventListener('resize', reportWindowSize); For this event reportWindowSize will be triggered lot of times thus you should use debounced[https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf] reportWindowSize. for debouncing in javascript you can refer this[https://lodash.com/docs/4.17.15#debounce]

Kunal Khedkar
  • 1