Ir ao conteúdo
  • Cadastre-se

EddK

Membro Pleno
 Perfil  Explorar Conteúdo

  • Posts

    25

  • Cadastrado em

  • Última visita

Reputação

3
  1. EddK
    EddK alterou sua foto pessoal
  2. EddK
    @GabrielSennaMs @GabrielSennaMs Muito obrigado!!! Maravilha!!!
  3. EddK
    Olá preciso de ajuda em javascript. Quando clico no botão ocorre a seguinte alteração (active e true): <button class"accordion active" aria-expanded="true"> preciso que o active apareça no accordion-item e não no accordion, e aria-expanded="true" permaneça com a alteração no <button> mesmo. obs.: se eu trocar no javascript: var acc = document.getElementsByClassName("accordion"); para: var acc = document.getElementsByClassName("accordion-item"); ao clicar no botão o active vai para o accordion-item mas leva junto o aria-expanded="true" junto. HTML: ... <li class="accordion-item"> <button class="accordion" aria-expanded="false"> <span> texto </span> </button> <div class="panel"> <p> texto </p> ... </div> </li> ... JAVASCRIPT: var acc = document.getElementsByClassName("accordion"); var expanders = document.getElementsByClassName("expander"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; this.setAttribute('aria-expanded', 'false') } else { panel.style.display = "block"; this.setAttribute('aria-expanded', 'true') } }); }
  4. EddK
    @GabrielSennaMs Obrigado
  5. EddK
    @Rui Guilherme Mas o id tem que ser único.
  6. EddK
    @GabrielSennaMs Como tenho vários itens no accordion, como faço quanto aos IDs?
  7. EddK
    Bom dia! Preciso alterar o valor do aria-expanded="false" para aria-expanded="true" em botões de accordion quando expandidos. E ao clicar novamente para esconder o texto volte para aria-expanded="false" (usando apenas JavaScript Puro). Alguém pode me ajudar? Desde já muito obrigado
  8. EddK
    Há algum problema em adicionar valores de class em vez de id nos atributos aria-labelledby e aria-describedby? Isso afetará algo em relação à acessibilidade? Por exemplo: <div class="dialog" role="dialog" aria-labelledby="title" aria-describedby="description"> <h2 class="title">Título 1</h2> <p class="description">Informação 1</p> <button class="close" aria-label="close">x</button> </div>
  9. EddK
    @washalbano ok, obrigado
  10. EddK
    @washalbanoNotei que foi adicionado id="title" e id="description" apenas no primeiro template. As demais não possuem. Minha dúvida fica quanto a questão de acessibilidade (wai-aria) nesses sem ids. @washalbano Outra dúvida: se for adicionado botão ou link (botão) no description da tag template, como faço para navegar com o teclado entre eles (botao, link e close) apenas, sem sair do modal (template)?
  11. EddK
    Alguém pode me ajudar? Estou começando em JavaScript. Qual alteração ou adição de código é preciso para conseguir a navegação com o teclado Tab no modal aberto? Ex.: navegar entre os botões copiar, acessar e close? Obs.: Lembrando que no código abaixo consigo sair do modal com esc ou enter. Segue o código: HTML: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>modal</title> </head> <body> <button class="trigger">Abrir 1</button> <div class="cover"></div> <div class="dialog" role="dialog" aria-labelledby="title" aria-describedby="description"> <h2 class="title">Título 1</h2> <p class="description">Informação 1</p> <button>Copiar</button> <button>Acessar</button> <button class="close" aria-label="close">&times;</button> </div> </body> </html> CSS: [role="dialog"] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 1em; max-height: 30vh; max-width: 50vw; background: #ddd; box-shadow: 0.25em 0.25em #aaa; display: none; border: 0; } [role="dialog"] *+* { margin-top: 0.5em; } .title { font-weight: bold; } button { cursor: pointer; background: #215990; border: 0; color: #fff; padding: 0.125em 0.5em; } button:focus, button:hover { outline: 3px solid #d4aa00; } .close { position: absolute; top: 0.5em; right: 0.5em; margin-top: 0; line-height: 1; } [role="dialog"][open=""] { display: block; } .cover { background: green; opacity: 0.75; position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: none; } JAVASCRIPT: var trigger = document.querySelectorAll('.trigger'); var dialog = document.querySelectorAll('.dialog'); var close = document.querySelectorAll('.close'); function openDialog(dialogIndex) { dialog[dialogIndex].setAttribute('open', ''); close[dialogIndex].focus(); close[dialogIndex].addEventListener('keydown', function(e) { if (e.keyCode == 9) { e.preventDefault(); } }); document.querySelectorAll('.cover')[dialogIndex].style.display = 'block'; document.addEventListener('keydown', addESC); } function closeDialog(dialogIndex) { dialog[dialogIndex].removeAttribute('open'); trigger[dialogIndex].focus(); document.querySelectorAll('.cover')[dialogIndex].style.display = 'none'; document.removeEventListener('keydown', addESC); } var addESC = function(e) { if (e.keyCode == 27) { closeDialog(Array.from(dialog).indexOf(document.querySelector('[role="dialog"][open]'))); } }; trigger.forEach((element, i) => { element.addEventListener('click', function() { openDialog(i); }); }); close.forEach((element, i) => { element.addEventListener('click', function() { closeDialog(i); }); }); Desde já muito obrigado
  12. EddK
    Conforme segue o código abaixo, consigo ter apenas um botão e um modal. Como faço para ter outros modais com outros botões na mesma página? Alguém pode me ajudar? Sou novo em JavaScript, mas vejo que o código JS pega o id (trigger) do botão, se eu adicionar outro botão e janela modal com outro id ele não vai reconhecer. JAVASCRIPT: var trigger = document.getElementById('trigger'); var dialog = document.getElementById('dialog'); var close = document.getElementById('close'); function openDialog() { dialog.setAttribute('open', ''); close.focus(); close.addEventListener('keydown', function(e) { if (e.keyCode == 9) { e.preventDefault(); } }); document.getElementById('cover').style.display = 'block'; document.addEventListener('keydown', addESC); } function closeDialog() { dialog.removeAttribute('open'); trigger.focus(); document.getElementById('cover').style.display = 'none'; document.removeEventListener('keydown', addESC); } var addESC = function(e) { if (e.keyCode == 27) { closeDialog(); } }; trigger.addEventListener('click', function() { openDialog(); }); close.addEventListener('click', function() { closeDialog(); }); CSS: [role="dialog"] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 1em; max-height: 30vh; max-width: 50vw; background: #ddd; box-shadow: 0.25em 0.25em #aaa; display: none; border: 0; } [role="dialog"] * + * { margin-top: 0.5em; } #title { font-weight: bold; } button { cursor: pointer; background: #215990; border: 0; color: #fff; padding: 0.125em 0.5em; } button:focus, button:hover { outline: 3px solid #d4aa00; } #close { position: absolute; top: 0.5em; right: 0.5em; margin-top: 0; line-height: 1; } [role="dialog"][open] { display: block; } #cover { background: green; opacity: 0.75; position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: none; } HTML: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>modal</title> </head> <body> <button id="trigger">Abrir</button> <div id="cover"></div> <div id="dialog" role="dialog" aria-labelledby="title" aria-describedby="description"> <h2 id="title">Título</h2> <p id="description">Informação</p> <button id="close" aria-label="close">&times;</button> </div> </body> </html>
  13. EddK
    Boa tarde! Estou com alguns problemas: 1 - ao abrir a janela modal, o foco fique somente nesta janela (ao pressionar a tecla tab - a seleção não sai dessa janela principal) até fechar. 2 - ao fechar a janela modal, o foco fique no botão que acionou anteriormente o modal. 3 - preciso adicionar wai-aria no código (aria-label e role) Alguém consegue me ajudar? Desde já obrigado Segue o código: HTML: <body> <button class="trigger" onclick="showModal()">HelloWorld</button> <div class="modal" id="modal"> <div class="modal-content"> <span class="close-button" onclick="closeModal()"> &times; </span> <h1>Hello World</h1> </div> </div> </body> CSS: .modal{ position: fixed; top:0; left:0; padding:0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0.25s ease-in-out , opacity 0.25s ease-in-out, transform 0.25s ease-in-out; } .modal-content{ background-color: white; padding: 16px 24px; width: 384px; border-radius: 0.5rem; } .close-button{ float: right; width: 24px; line-height: 24px; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; } .close-button:hover{ background-color: darkgray; } .show-modal{ opacity: 1; visibility: visible; transform: scale(1.0); } JAVASCRIPT: function showModal() { var element = document.getElementById("modal"); element.classList.add("show-modal"); } function closeModal() { var element = document.getElementById("modal"); element.classList.remove("show-modal"); }
  14. EddK
    @GusTec Alguma outra forma para ter menos códigos?
  15. EddK
    @GusTec Alguma dica de como criar esse identificador (para apontar o último grid da direita e último da parte de baixo)?
  16. EddK
    Boa noite! Alguém sabe como criar essas box com bordas: fonte: meucupom.com/categorias obs.: achei muito interessante o sistema

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...