Ir para conteúdo
Fórum Script Brasil
  • 0

Tem como? Ocultar ou diminuir campo de visão de uma lista.

fidelidade

Perguntado por fidelidade,

 Share

Pergunta

fidelidade

fidelidade

Postado
Postado 
Abaixo vemos o código em html onde temos uma lista com variaveis frutas. No final temos a caixa e o botão adicionar uma nova variavel  que tomara o lugar da ultima escluindo a primeira. alguém me ajude mantendo este codigo porem fazendo com quer as variaveis a partir da segunda fique oculta sem alterar o comando. Gostaria que o usuario conseguisse enxergar apenas o primeiro nome  e conforme fosse alterado  este primeiro fosse mudado, o cod já esta pronto só preciso que esconda  : se colocar dentro de uma caixa não deixem barra de rolagem. O usuario não poder aver  as variaveis novas apenas a primeira junto com a caixa de adicionar e a de copiuar apenas.



<div class="exibir">
<ul id="lista">
<li>laranja</li>
<li>abacate</li>
<li>uva</li>
<li>melancia</li>
<li>pera</li>
<li>acerola</li>
<li>maçã</li>
<li>kiui</li>
</ul>
<p>&nbsp;</p>
<a href="#minhaTag">COLE SEU CODIGO</a>
<p>&nbsp;</p>
<p>TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-

TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO-TEXTO</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<section id="minhaTag">
    <!-- COLE SEU CODIGO -->
</section>
<p><input id="nome" type="text" value=" " /> <button onclick="adicionar

()">Adicionar</button></p>
</div>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 

&nbsp; &nbsp; &nbsp;&nbsp;<textarea id="copy-me" style="width: 9px; height: 9px;" 

name=""></textarea> <button id="copy-btn">Copiar HTML</button><br /> <br />
<script>// <![CDATA[
let nomes = []; // A variável começa com um array vazio.
        const lis = document.querySelectorAll('li'); // Cria uma lista de todos os elementos com 

tag <li>.
        // Em cada elemento da lista "lis" vai adicionar o conteúdo da tag na variável "nomes".
        lis.forEach((li) => nomes.push(li.innerHTML));

        let updateList = [...nomes];
        const copyValue = document.getElementById("copy-me");
        const copyButton = document.getElementById("copy-btn");

        copyButton.addEventListener("click", () => {
            copyValue.select();
            document.execCommand("copy");
        });

        const onChangeCopyHtml = () => {
            const source = document.documentElement.outerHTML;
            copyValue.value = source;
        };

        const renderList = () => {
            lista.innerHTML = "";
            for (var i = 0; i < updateList.length; i++) {
                var lis = document.createElement("li");
                lis.innerHTML = updateList[i];
                lista.appendChild(lis);
            }

            onChangeCopyHtml();
        };

        const onAddName = (name) => {
            updateList.push(name);
            const newList = updateList.slice(1, updateList.length);
            return newList;
        };

        function adicionar() {
            var coleta = document.getElementById("nome").value;
            var nomeDig = document.createElement("li");
            updateList = onAddName(coleta);
            renderList();
        }
        renderList();
// ]]></script>
</p>

 

Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0
fidelidade

fidelidade

Postado
  • Autor
Postado (editado)
23 horas atrás, lowys disse:

tem
você pode definir uma altura fixa
se quiser apenas esconder o que passar dessa altura, defina no css:
overflow:hidden
se quise que apareça uma barra de rolagem, defina:
overflow:auto
veja mais em:
https://www.w3schools.com/css/css_overflow.asp

[editado] 

analisei midifiquei e cheguei o mais proximo que consegui você foi 10 grato porem ficou um espaço antes da primeira variavel e quando eu diminuo o quadro fica visivel apenas este espaço porem as modificações acontece mas ficam  a baixo deste espaço e não sobre creio que se tirar este espaço resolve, mas eu não achei como. para diminuir eu mudei para assim  "height: 12px; "   e o espaço creio que é por causa que a variavel esta entre "<li>  </li>" mas se eu tirar ai ele da falha.  deixo ai como ficou o maximo que consegui com sua ajuda.  

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 200px;
  height: 65px;
  border: 1px solid black;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Overflow: hidden</h2>

<p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p>
<p>Try to remove the overflow property to understand how it works.</p>

<div><div class="exibir">
<ul id="lista">
<li>8620741953</li>
<li>7912568043</li>
<li>0642571893</li>
<li>8436159270</li>
<li>1706984532</li>
<li>5842903761</li>
<li>0218465937</li>
<li>7065298413</li>
</ul></div>

</div><p><input id="nome" type="text" value=" " /> <button onclick="adicionar()">Adicionar</button></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
<textarea id="copy-me" style="width: 9px; height: 9px;" name=""></textarea> <button id="copy-btn">Copiar HTML</button><br /> <br />
<script>// <![CDATA[
let nomes = []; // A variável começa com um array vazio.
        const lis = document.querySelectorAll('li'); // Cria uma lista de todos os elementos com tag <li>.
      	// Em cada elemento da lista "lis" vai adicionar o conteúdo da tag na variável "nomes".
        lis.forEach((li) => nomes.push(li.innerHTML));

        let updateList = [...nomes];
        const copyValue = document.getElementById("copy-me");
        const copyButton = document.getElementById("copy-btn");

        copyButton.addEventListener("click", () => {
            copyValue.select();
            document.execCommand("copy");
        });

        const onChangeCopyHtml = () => {
            const source = document.documentElement.outerHTML;
            copyValue.value = source;
        };

        const renderList = () => {
            lista.innerHTML = "";
            for (var i = 0; i < updateList.length; i++) {
                var lis = document.createElement("li");
                lis.innerHTML = updateList[i];
                lista.appendChild(lis);
            }

            onChangeCopyHtml();
        };

        const onAddName = (name) => {
            updateList.push(name);
            const newList = updateList.slice(1, updateList.length);
            return newList;
        };

        function adicionar() {
            var coleta = document.getElementById("nome").value;
            var nomeDig = document.createElement("li");
            updateList = onAddName(coleta);
            renderList();
        }
        renderList();
// ]]></script>
</body>
</html>

 

Editado por fidelidade
Link para o comentário
Compartilhar em outros sites
  • 0
fidelidade

fidelidade

Postado
  • Autor
Postado (editado)
9 horas atrás, fidelidade disse:

[editado] 

analisei modifiquei e cheguei o mais proximo que consegui você foi 10, grato porem ficou um espaço antes da primeira variavel, e quando eu diminuo o quadro fica visivel apenas este espaço. Porem as modificações acontece mas ficam  a baixo deste espaço e não sobe.  Creio que se tirar este espaço resolve, mas eu não achei como. Para diminuir eu mudei height para  "height: 12px; "   e o espaço creio que é por causa que a variavel esta entre "<li>  </li>" mas se eu tirar ai ele da falha.  deixo ai como ficou o maximo que consegui com sua ajuda.  

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 200px;
  height: 65px;
  border: 1px solid black;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Overflow: hidden</h2>

<p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p>
<p>Try to remove the overflow property to understand how it works.</p>

<div><div class="exibir">
<ul id="lista">
<li>8620741953</li>
<li>7912568043</li>
<li>0642571893</li>
<li>8436159270</li>
<li>1706984532</li>
<li>5842903761</li>
<li>0218465937</li>
<li>7065298413</li>
</ul></div>

</div><p><input id="nome" type="text" value=" " /> <button onclick="adicionar()">Adicionar</button></p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
<textarea id="copy-me" style="width: 9px; height: 9px;" name=""></textarea> <button id="copy-btn">Copiar HTML</button><br /> <br />
<script>// <![CDATA[
let nomes = []; // A variável começa com um array vazio.
        const lis = document.querySelectorAll('li'); // Cria uma lista de todos os elementos com tag <li>.
      	// Em cada elemento da lista "lis" vai adicionar o conteúdo da tag na variável "nomes".
        lis.forEach((li) => nomes.push(li.innerHTML));

        let updateList = [...nomes];
        const copyValue = document.getElementById("copy-me");
        const copyButton = document.getElementById("copy-btn");

        copyButton.addEventListener("click", () => {
            copyValue.select();
            document.execCommand("copy");
        });

        const onChangeCopyHtml = () => {
            const source = document.documentElement.outerHTML;
            copyValue.value = source;
        };

        const renderList = () => {
            lista.innerHTML = "";
            for (var i = 0; i < updateList.length; i++) {
                var lis = document.createElement("li");
                lis.innerHTML = updateList[i];
                lista.appendChild(lis);
            }

            onChangeCopyHtml();
        };

        const onAddName = (name) => {
            updateList.push(name);
            const newList = updateList.slice(1, updateList.length);
            return newList;
        };

        function adicionar() {
            var coleta = document.getElementById("nome").value;
            var nomeDig = document.createElement("li");
            updateList = onAddName(coleta);
            renderList();
        }
        renderList();
// ]]></script>
</body>
</html>

 

alteradomas falto um item para chegar ao resultado.

Editado por fidelidade
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...