Jump to content
Fórum Script Brasil
  • 0

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


fidelidade

Question

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 to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
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>

 

Edited by fidelidade
Link to comment
Share on other sites

  • 0
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.

Edited by fidelidade
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...