How to toggle between List and Gallery

Asked

Viewed 245 times

4

What I intend to create is similar to Grid view used in systems of the type Mercado Livre. It would be a function done in javascript that switches between a List or Gallery, using the same data in table form.

Exposing the doubt - I suppose to show screenshot flash games with their respective information on way List. However if the user does not want to see in way List, after the click on the button, how to group them again within the page in way Gallery?

So I’m looking for a single code to do two different things, something like: 

if(condição)
{
     ...
    Lista
     ...
   }else{
     ...
    Grade
     ...
}

At first, I imagine it could be rectangular Ivs which, when clicking on the button they resize the size to squares, by placing themselves side by side.

javascript html css
  • 2

    I have no idea what a code or "List/Gallery" function is... you can explain better?

2 answers

2


Diego, define the elements that will be displayed in each group, in the example below I called the group of card and each card has a imagem, titulo and desc.

then set the space where the card will be displayed, in the example below I am limiting their space by div#container.

define a class for each display type, again we will use only lista and grid, but you can define as many templates as you want.

set a size for the card for each container layout, in the example below we have:

div#container.lista: .card{ width: calc(100% -10px); height: 128px; }
div#container.grid: .card { width: 192px; height: 192px; }

now do the same to enable each element (div.image, div.title, div.desc) of card in the right position.

now just change the class of div#container to change the layout.

var container = document.querySelector(".container");
var disposicao = document.querySelector("#disposicao");
var curClass = container.classList.contains("lista") ? "lista" : "grid";

disposicao.addEventListener("change", function (event) {
  container.classList.remove(curClass);
  curClass = disposicao.value;
  container.classList.add(curClass);
});
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background: whitesmoke;
}

.container {
  position: absolute;
  max-width: 1080px;
  padding: 5px;
  margin: auto;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background: white;
  box-shadow: 0px 0px 10px black;
  box-sizing: border-box;
  overflow: auto;
}

#disposicao {
  width: 100%;
}

.card .imagem  {
  background-image: url('http://image005.flaticon.com/1/png/512/119/119706.png');
  background-size: calc(100% - 10px);
  background-repeat: no-repeat;
  background-position: center;
}

.lista .card {
  position: relative;
  margin: 5px;
  width: calc(100% - 10px);
  height: 128px;  
  box-shadow: 0px 0px 5px black;
  border-radius: 3px;
}

.lista .card .imagem {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 128px;
  height: 128px;
  border-right: 1px solid silver;
  background-color: whitesmoke;
}

.lista .card .title {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 128px;
  height: 32px;
  line-height: 32px;
  padding-left: 5px;
  border-bottom: 1px solid silver;
}

.lista .card .desc {
  position: absolute;
  top: 32px;
  right: 0px;
  bottom: 0px;
  left: 128px;
  padding: 5px;
}

.grid .card {
  float: left;
  position: relative;
  margin: 5px;
  width: 192px;
  height: 320px;  
  box-shadow: 0px 0px 5px black;
  border-radius: 3px;
}

.grid .card .imagem {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 192px;
  height: 192px;
  border-bottom: 1px solid silver;
  background-color: whitesmoke;
}

.grid .card .title {
  position: absolute;
  top: 192px;
  height: 32px;
  width: 192px;
  line-height: 32px;
  padding-left: 5px;
  border-bottom: 1px solid silver;
}

.grid .card .desc {
  position: absolute;
  top: 222px;
  bottom: 0px;
  width: 192px;
  padding: 5px;
}
<div class="container lista">
  <div>
    <select id="disposicao">
      <option value="lista">Lista</option>
      <option value="grid">Grid</option>
    </select>
  </div>
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div>  
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div> 
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div> 
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div> 
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div> 
  <div class="card">
    <div class="imagem"></div>
    <div class="title">Title</div>
    <div class="desc">Descrição</div>
  </div> 
</div>

0

In continuity, the reply of Tobias Mesquita which proved to be practical in the way as a List/Grid view behaves, as regards stylised elements with CSS.

I could not, without sharing my answer as I always do. And when I do, it is to make clear that I reached the goal.

In this case, putting the example of the answer given above on test in some obsolete browsers, there were some flaws (between one case and another, it was CSS or Javascript not working as expected), since some internet browsers do not support such modern semantics.

I came to the conclusion that it would be feasible to write a new code compatible with several Internet browsers (old and current), reusing particularities of the concept given in the reply of Tobias Mesquita.

Because of this, I used Firefox 2.0 as a base. Let’s see the code below:

    function changeSrc(id){

    <!-- A variável "el" esta apontando para a div mestre, pela "TagName".  Tendo controle sobre ela o botão de alternância, ondeá faz de certo modo as divs se auto ajustar -->
    var el=document.getElementsByTagName('div')[0]; var imagem=document.getElementById(id); if(imagem.alt == "Abrir"){ imagem.src = "http://sl.uploads.im/t/yx4Ig.png"; imagem.alt = "Fechar"; el.className = "grade"; } else { imagem.src = "http://sm.uploads.im/t/sRShv.png"; imagem.alt = "Abrir"; el.className = "lista"; } }

    
/* Aqui inicializa a estilização do layout "Lista" */ .item img { width:100px; height:100px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; } .lista .item { position: relative; margin: 5px; width: 100%; height: 128px; box-shadow: 0px 0px 5px black; border-radius: 3px; } .lista .item .foto { position: absolute; top: 0px; left: 0px; width: 128px; height: 128px; border-right: 1px solid silver; background-color: whitesmoke; } .lista .item .nome { position: absolute; top: 0px; right: 0px; left: 128px; height: 32px; line-height: 32px; padding-left: 5px; border-bottom: 1px solid silver; font-weight: bold; display: block; font-size: 14pt; } .lista .item .desc { position: absolute; top: 40px; right: 0px; bottom: 0px; left: 128px; padding: 5px; display: block; font-size: 12pt; } /* A partir daqui, é a estilização do layout "Grade" */ .grade .item { float: left; position: relative; left: 90px; width: 192px; height: 320px; box-shadow: 0px 0px 5px black; border-radius: 3px; } .grade .item .foto { position: absolute; top: 0px; left: 0px; width: 192px; height: 192px; border-bottom: 1px solid silver; background-color: whitesmoke; } .grade .item .nome { position: absolute; top: 192px; height: 32px; width: 192px; left: 0px; line-height: 32px; padding-left: 5px; border-bottom: 1px solid silver; font-weight: bold; display: block; font-size: 14pt; } .grade .item .desc { position: absolute; top: 222px; bottom: 0px; width: 192px; left: 0px; padding: 5px; display: block; font-size: 12pt; }
<!-- Abaixo é esta a primeira div, logo no início, sem "id" ou "class" alguma. Ela  é a div mestre, fará com que as demais em seu interior sejam obrigatoriamente redimensionadas e alojadas -->
<!-- Isto se faz necessário para não precisar acrescentar códigos Javascript à mais no documento HTML, bastando apenas uma única div. -->
<!-- Se não fosse assim, logo teríamos de  cria vários ids ou names para cada uma das divs filhos e percorrer com um laço for -->

<div>

<!-- Nesta parte temos a div classificada como lista, que por sua vez  nos traz todo o conjuto de divs estilizada dentro do documento HTML -->
<div class="lista">

    <!-- Logo abaixo temos a tag img que será nosso único botão que alternar entre a opção Lista e Grade -->
    <img id="botao" alt="Abrir" src="http://sm.uploads.im/t/sRShv.png" onclick="changeSrc('botao')" />

    <hr>

    <!-- As alterações principais são feitas aqui, onde as letras do alfabeto que foram tidas como exemplo, deverão ser subtituídas pela tag image -->

    <!-- Nota! - Para a descrição é recomendado no mínimo 170 caracteres(digitos) ou no máximo 177 caracteres(digitos), dentro desta caixa -->
    <!-- Uma vez ultrapassado este limite dado, o usuário final terá uma visualização desagradável, texto exposto. -->
    <!-- Caso deseje por mais informações, o ideal é ajustar a mesma com novos valores em sua margem, no código CSS -->

    <div class="item">
        <div class="foto">A</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">B</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">C</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">D</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">E</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">F</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">G</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>
    <div class="item">
        <div class="foto">H</div>
        <div class="nome">Titulo</div>
        <div class="desc">Descricao</div>
    </div>

Anyway, when you design with CSS needs to have the ability to analyze the layout and decide how to place the div.

It was because of my difficulty rationing div that I asked the question.

This other example below, is even smaller and portable compared to the previous.

The only difference between one and the other is the structure CSS and Javascript. Behold:

function ativar(tag) {
    var el = document.getElementsByTagName('div');

    for (var i=0; i < el.length; i++) {
        if (el[i].className == "menos") {
            document.getElementById("clic").innerHTML = "Grade";
            el[i].className = "mais";
        } else {
            document.getElementById("clic").innerHTML = "Lista";
            el[i].className = "menos";
        }
    }
}
    /* Ajusta para o modo Lista(Tabela) */

    .mais {
        width: auto;
    }

    /* Ajusta para o modo Grade(Galeria) */

    .menos {
        width: 128px;
    }

    /* Estiliza o Menu(botão) */

    a:link {
        text-decoration: underline;
    }

    a:visited {
        color: navy;
        text-decoration: none;
    }

    a:hover {
        color: dodgerblue;
        text-decoration: none;
    }

    a:active {
        color: azure;
        text-decoration: underline;
        background-color: dodgerblue;
    }

    /* Fim Estilização do Menu */

    /* Estilização do Corpo da Página */

    * {
        margin: 0;
        padding: 0;
    }

    /* Estiliza o Parágrafo da Descrição */

    p {
        line-height: 20px
    }

    /* Estiliza os bloco de conteudo */

    #bloco {
        margin-left: 5%;
        float: left;
        left: 65%;
    }

    /* Estiliza os blocos que mantém as figura */

    #figura {
        background: whitesmoke;
        text-align: center;
        padding: 20px;
        margin: 5px;
        float: left;
    }

    /* Estiliza os blocos que mantém as figura */

    #conteudo {
        text-align: left;
        padding: 0px;
        margin: 5px;
        left: 35%;
    }
<center>

    <a href="javascript:void(0)" onclick="ativar(this)" id="clic">Lista</a>

</center>

<hr color="royalblue" size="1" width="100%" />

</br>

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 1 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 2 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 3 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 4 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 5 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 6 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 7 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 8 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
    <img src="http://lorempixel.com/128/96/" border="0" />
   </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 9 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

<div id="bloco">
    <div id="figura">
        <a href="http://lorempixel.com/128/96/">
   <img src="http://lorempixel.com/128/96/" border="0" />
  </a>
    </div>
    <!-- /figura -->
    <div id="conteudo">
        <h3>Titulo 0 </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales ultricies venenatis. </p>
    </div>
    <!-- /conteudo -->
</div>
<!-- /bloco -->

The code itself is well commented and are self-explanatory, there is no doubt, I end here.

Browser other questions tagged javascript html css

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