2

I'm using fullcalendar on a site and want to style events slightly differently on smaller screen sizes. How can I trigger the code below if a window is below a certain size?

eventAfterRender: function(event, element, view) {
    $(element).css('height','10px');
}
dtlvd
  • 457
  • 1
  • 8
  • 21
JulianJ
  • 1,259
  • 3
  • 22
  • 52
  • 2
    Don't use JS, use CSS's `@media` directive – gogaz Apr 06 '18 at 08:18
  • You probably won’t be able to trigger that event on mobile only, but you can easily wrap what you are doing inside the handler function in a condition. – CBroe Apr 06 '18 at 08:18
  • Does this answer your question? [Only run JQuery on mobile view](https://stackoverflow.com/questions/36454146/only-run-jquery-on-mobile-view) – Jesse Nickles Oct 26 '22 at 17:10

2 Answers2

5

You can use $(window).width() as

    var width = $(window).width();
    if (width <= 480) {
      //code for mobile devices
    } else {
      //code for other devices
    }

$(window).width() gives you the width of the device in pixel and you can use that value to determine the mobile, tablet or desktop devices accordingly and add your device specific code accordingly.

Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62
  • 1
    Please be aware that this would not be responsive. It would be better to apply style changes via css and `@media` – Michael Walter Apr 06 '18 at 08:22
  • @MichaelWalter I agree with you but this could be still useful when you want to run some JavaScript or Jquery that applies to specific device configurations. – Ankit Agarwal Apr 06 '18 at 08:25
0

For smaller screen in jquery you can define the size of window with

$(window).width()

And make an if condition

var windowWidth = $(window).width();
if(windowWidth<768){//Your script if device width is under 768px}
Bambou
  • 1,005
  • 10
  • 24