1

O que quero fazer é que quando a width da página for menor do que o valor em baixo mostrado ele insira data-tablesaw-mode="stack no sítio mostrado em baixo! Sou novo no JavaScript mas preciso disto para um projeto! Obrigado a quem ajudar estou disponível a fornecer qualquer informação que seja importante.

O que pretendo inserir

 data-tablesaw-mode="stack"

Como estou tentando fazer

<script>
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var table = document.getElementsById('table-hide');

if width<39.9375em {
   table. += "data-tablesaw-mode="stack";
}
</script>

HTML onde pretendo inserir

<table id="table-hide" class="tablesaw tablesaw-stack">
1
  • Está aberto para usar Jquery? 22/06/2018 às 9:55

2 Respostas 2

2

Para funcionar conforme desejado, você deve colocar o documento para escutar o evento resize, crie uma função:

function screen_width() {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if(width < 400) {
        // Adiciona o atributo
        tabela.setAttribute('data-tablesaw-mode', 'stack');
    } else {
        // Remove o atributo
        tabela.removeAttribute('data-tablesaw-mode');
    }
}

depois coloque o documento para escutar o evento:

// Escuta o evento
window.addEventListener('resize', screen_width);

chame a função para verificar quando a página é carregada.

// Executa a primeira vez
screen_width();

Código completo:

var tabela = document.getElementById('table-hide');

function screen_width() {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if(width < 400) {
        // Adiciona o atributo
        tabela.setAttribute('data-tablesaw-mode', 'stack');
    } else {
        // Remove o atributo
        tabela.removeAttribute('data-tablesaw-mode');
    }
}

// Escuta o evento
window.addEventListener('resize', screen_width);

// Executa a primeira vez
screen_width();

Referências:

3
  • Certo amigo muito obrigado! O único problema é que agora está inserindo e tirando mas não está fazendo o que devia fazer quando têm esse data-tablesawmode vou tentar resolver já me ajudou bastante!
    – AlmostDone
    22/06/2018 às 10:57
  • Creio que se estive utilizando algum script, devera chamar ele novamente.
    – NoobSaibot
    22/06/2018 às 11:02
  • Já percebi meu erro, os scritps do jquery estava obstruindo o plugin que estou a utilizar! Funcionando na perfeição!!
    – AlmostDone
    22/06/2018 às 13:02
1

Tente fazer assim

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 

if(width < 39.9375){ //Valor em pixeis
   document.getElementById('table-hide').setAttribute("data-tablesaw-mode", "stack");
}
10
  • Amigo não parece estar funcionado! Pelo menos não está inserido e já converti os em em pixeis!
    – AlmostDone
    22/06/2018 às 10:03
  • Ponha isto e diga o que devolve alert(width) 22/06/2018 às 10:09
  • Devolve corretamente o valor de width atual! Testei em 3 tamanhos de página diferentes!
    – AlmostDone
    22/06/2018 às 10:15
  • Eu tinha escrito getElementsById e tem de ser getElementById, tente agora 22/06/2018 às 10:15
  • Resultado é o mesmo que antes não está inserindo no sítio!
    – AlmostDone
    22/06/2018 às 10:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .