Support » Developing with WordPress » condicional para ejecutar .js por resolucion

  • buenas amigos quiero que una hoja de Js. se cargue dependiendo de la resolucion digas if >= 987 algo asi pero no se como seria se que se puede cargar dependiendo la pagina donde se encuentre “if( is_page(’29’) ){cargar la pagina}” pero como sera para q se cargue dependiendo de la resolucion “por ejemplo no quiero que se cargue en disṕositivos pequeñso ni mediano solo en grandes !”

    tambien añado que si no se puede hacer de esa manera cual seria la solucion ? ya que tengo poco conocimiento en js como pondria esa condicional para q se me ejecute esa accion de js. en solo resoluciones grandes ! gracias de ante mano !

    • This topic was modified 1 year, 11 months ago by cronaxvz.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    Hola, I think this link will give you the information you seek.

    Thread Starter cronaxvz

    (@cronaxvz)

    gracias por tu respuesta asi lo hice pero aunque no quede conforme por que al bajar la resolucion si no recargo la pagina sigue ejecutandose en tamaño < al grande debe refrescarse la pagina para q funcione ! pero al entrar en modo movil si se ejecuta “en inicio ” pero al estar en la pagina y bajar la resolucion ya no se sigue ejecutando amenos q refresque !

    • This reply was modified 1 year, 10 months ago by cronaxvz.
    Moderator bcworkz

    (@bcworkz)

    You can add script that listens for the window resize event. Your resize handling script may need to undo whatever was done conditionally by your script for the previous window size. Or it can just reload the page itself so the user does not need to do so.

    Thread Starter cronaxvz

    (@cronaxvz)

    entiendo lo que dices pero no se como hacer ese codigo ! aclaro q lo intente lo de renderizar pero no lo logre por mi poco conocimiento en JS! si me podrias facilitar algun ejemplo yo lo estoy aplicando asi “este es una porcion del codigo”

    jQuery(document).ready(function($){
         detectarTamanio();
         $(window).resize(detectarTamanio);
         });
    
     function detectarTamanio(){
     if ( window.screen.width > 993){
    
     window.onscroll = () => {
         const scroll = window.scrollY;

    You cannot determine window size from the server. Ergo, you cannot write the conditional in php in a plugin or theme functions.php.

    You CAN add a conditional to the JS file to be loaded, however. This is especially simple if you have the entire script in a single function.

    Let’s say the script to run IS a single function called smallScreen();

    You’re already most of the way there with the snippet you shared.

    
    jQuery(document).ready(function() {
      if (window.width < 600px) { //see comments below about checking for height as well
        smallScreen();
      }
      jQuery(window).on('resize', function() {
        if (window.width < 600px) {
          smallScreen(); //function to execute if window width is less than 600px
        else {
          largeScreen(); //function to execute if window width is 600px or greater.
        });
      }
    });
    

    If you also want to account for landscape mode tablets, you’ll want to also check for height, which you can do as an OR statement in the javascript conditional.

    
    if (window.width < 600px || window.height < 800px) {
    

    This must be written in the JS file, and the JS file can be included on a per page basis as in your example, but it cannot be loaded conditionally to device size. However, within the script, you can selectively call the function based on window size.

    I hope this helps!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘condicional para ejecutar .js por resolucion’ is closed to new replies.