How to load a plugin according to the width of the screen?

Asked

Viewed 84 times

4

Hello, my problem is this, I have two Plugins with similar functions, however they cannot be loaded at the same time as errors occur.

Is there any way to load a particular script according to browser resolution?

Ex:

<script>
    var largura = window.innerWidth;

    if(largura > X){
        //carregar plugin 1
        //<script type="text/javascript" src="_js/plugin1.js"></script>
    }

    else{
        //carregar plugin 1
        //<script type="text/javascript" src="_js/plugin2.js"></script>
    }
</script>
javascript

  • The way you put the question should work. Put more information about your code to be clearer. Then we can better understand.

  • It would be something like this, maybe it’s easier than I think, but I don’t know the right syntax. var width = window.innerWidth; if(width > X){ // would be this plugin /// <script type="text/javascript" src="_js/jquery.fullPage.js"></script> } Else{ //load plugin 2 }

1 answer

5


Vinicius, here’s an answer that might work:

 <script>
  function verifySize(){
    var largura = window.innerWidth;
    // Cria  a tag script
    script = document.createElement("SCRIPT");

    if(largura > 900){
      //carregar plugin 1 mudando o src pro script desejado
      script.src = "_js/jquery.fullPage.js";
    }else{
      //carregar plugin 2 mudando o src pro script desejado
      script.src = "_js/jquery.fullPage.js";
    }
    //Carrega o script dentro do body
    document.body.appendChild(script);
  }
  // Caso você queira que o pluggin seja carregado somente ao entrar na pagina use o onload
  window.onload = verifySize;
  // Caso você queira que o pluggin seja carregado ao longo de mudanças dinâmicas no tamanho da janela use o onresize.
  window.onresize = verifySize;
</script>

  • Perfect, worked right. Thanks Mto!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.