Switching between List and Gallery

Question

Switching between List and Gallery

Navigation

#1 by (2 votes)
#2 by (0 votes)

4

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

Exposing the doubt - I suppose to show screenshot of flash games with their respective information forward, in strong>. However, if the user does not want to see in mode List , after clicking the button, how to group them back into the page in mode > Gallery ?

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

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

At first, I imagine it could be rectangular divs that, by clicking on the button they resize the size to squares by side-by-side.

javascript html css

asked by anonymous 09.05.2016 / 07:13

2 answers

0

In continuity, the Tobias Mesquita response that proved to be practical in the way a List / Grid view behaves, with respect to stylized elements with CSS .

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

In this case, putting the example of the answer given above test on 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 supports 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 features of the concept given in Tobias Mesquita .

Because of this, I used Firefox 2.0 as a base. Let's look at 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 you need to have the ability to analyze the layout and decide how to put div .

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

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

The only difference between the two is the CSS and Javascript structure. See:

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 self-explanatory, there being no doubt, I end up here.

10.05.2016 / 21:12

SQL return on different columns, not on rows city state JQuery selection error

score 2 · Accepted Answer

In the example below I called the group of card and each card has a imagem , titulo and desc .

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

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

Set a size for card for each container array, 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 get each element ( div.image , div.title , div.desc ) of card in the correct position.

Now just change the div#container class 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>