Ir ao conteúdo
  • Cadastre-se

EddK

Membro Pleno
  • Posts

    25
  • Cadastrado em

  • Última visita

Tudo que EddK postou

  1. @GabrielSennaMs @GabrielSennaMs Muito obrigado!!! Maravilha!!!
  2. 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') } }); }
  3. @Rui Guilherme Mas o id tem que ser único.
  4. @GabrielSennaMs Como tenho vários itens no accordion, como faço quanto aos IDs?
  5. 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
  6. 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>
  7. @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)?
  8. 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
  9. 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>
  10. 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"); }
  11. @GusTec Alguma outra forma para ter menos códigos?
  12. @GusTec Alguma dica de como criar esse identificador (para apontar o último grid da direita e último da parte de baixo)?
  13. Boa noite! Alguém sabe como criar essas box com bordas: fonte: meucupom.com/categorias obs.: achei muito interessante o sistema
  14. @Marcelo Calazans Adicionei apenas os medias... por isso deu errado. Agora está perfeito.
  15. @Marcelo Calazans Você sabe como centralizar o box modal na vertical?
  16. Boa tarde! Alguém sabe como criar esse tipo de efeito responsivo em html5 e css3 (segue em anexo o modelo). Site de referencia: m.kohls.com/sale-event/coupons-deals.jsp
  17. Boa tarde! Criei uma box modal, mas tenho alguns problemas: - não consigo deixar o modal (responsivo) - não consigo centralizar verticalmente o modal (preciso que centralize conforme o aparelho (desktop, tablet e celular). segue o código: <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <title>Modal</title> <style> .modal-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modal-wrap:target { opacity: 1; pointer-events: auto; } .modal-wrap>div { width: 560px; position: relative; margin: 0 auto; padding: 20px 10px; background: #fff; } .modal-content__descript { display: block; width: 100%; } .modal-content__descript p { color: #666; font-size: 12px; margin: 10px 0; height: 50px; padding: 30px 10px; } .close { position: absolute; width: 30px; right: 20px; top: 20px; text-align: center; line-height: 30px; font-size: 20px; color: #333; text-decoration: none; } </style> </head> <body> <div> <a href="#code-1">acessar modal</a> </div> <div class="modal"> <div id="code-1" class="modal-wrap"> <div class="modal-content"> <div class="modal-content__descript"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in not only five</p> </div> <a href="#close" title="Fechar" class="close"><i class="faz fa-times"></i></a> </div> </div> </div> </body> </html> Desde já muito obrigado
  18. @Marcelo Calazans Obrigado pela dica
  19. Como faço para adicionar o texto (ver cupom) do botão? @Marcelo Calazans
  20. Bom dia! Alguém sabe como fazer animação desse botão (ver cupom) do site: cuponomia.com.br ?
  21. Boa noite, Marcelo Muito obrigado! O segundo código é perfeito. Grande ajuda...
  22. Valeu Marcelo e Adriano, mas preciso alteração do ícone font-awesome através das classes por javascript. No máximo adicionando header__btnMenu.open e header__btnMenu.close no lugar de header__btnMenu para fazer a alteração pelo javascript. Não alterando muito os códigos enviados.
  23. Estou iniciando em javascript e gostaria da ajuda de vocês. Gostaria de adicionar através de javascript uma ação para alterar o botão menu hambúrguer para o botão close (x) quando o menu mobile estiver visível (clicado, aberto). Tentei trocando a classe do botão header__btnMenu para header__btnMenu.open e header__btnMenu.close e através dessas classes tentei mudar o ícone do menu pelo javascript. Mas sem sucesso. Abaixo o código funcionando mas sem ação do menu hambúrger para close. <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"> <link rel="stylesheet" href="style/main.css"> </head> <body> <header class="header"> <a href="index.html" class="logo-text">xxxxx</a> <button style="display: none;" class="header__btnMenu"> <i class="faz fa-bars fa-2x"></i> <span class="sr-only">Menu</span></button> <nav class="header__nav"> <ul> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> </ul> </nav> </header> <script src="js/menu.js"></script> </body> </html> body { margin: 0; } .header { background: #fff; width: 100%; } .logo-text { background-color: #333; margin: 0; padding: 20px; display: block; text-decoration: none; color: #fff; float: left; text-align: center; } .header__nav { clear: left; } .header__nav ul { margin: 0; padding: 0; } .header__nav li { list-style-type: none; background: #333; text-align: center; } .header__nav a { text-decoration: none; color: #999; display: block; padding: 25px 0; } .header__nav a:hover { color: #666; } .header__btnMenu { float: right; margin: 1.5em; border: none; } @media screen and (min-width: 1024px) { .logo-text { width: 25%; -webkit-box-sizing: border-box; box-sizing: border-box; } .header__btnMenu { display: none; } .header__nav { float: left; width: 75%; clear: none; max-width: 700px; } .header__nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .header__nav li { border-bottom: none; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .header__nav a { background: white; } } (function() { var menu = new Menu({ container: '.header__nav', toggleBtn: '.header__btnMenu', widthEnabled: 1024 }) })() function Menu(config) { this.nav = (typeof config.container === 'string') ? document.querySelector(config.container) : config.container this.btn = (typeof config.toggleBtn === 'string') ? document.querySelector(config.toggleBtn) : config.toggleBtn this.maxWidth = config.widthEnabled || false; var _opened = false; var _this = this; this.btn.removeAttribute('style') if (this.maxWidth) { window.addEventListener('resize', e => { if (window.innerWidth > _this.maxWidth) { _this.nav.removeAttribute('style') _opened = true; } else if (!this.nav.getAttribute('style')) { closeMenu(); } }) if (window.innerWidth <= _this.maxWidth) { closeMenu(); } } this.btn.addEventListener('click', openOrClose) function openOrClose() { if (!_opened) { openMenu() } else { closeMenu() } } function openMenu() { var _top = _this.nav.getBoundingClientRect().top + 'px' var _style = { maxHeight: 'calc(100vh - ' + _top + ' )', overflow: 'hidden' } applyStyleToNav(_style) _opened = true; } function applyStyleToNav(_style) { Object.keys(_style).forEach(stl => { _this.nav.style[stl] = _style[stl] }) } function closeMenu() { var _style = { maxHeight: '0px', overflow: 'hidden' } applyStyleToNav(_style) _opened = false; } }

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

×
×
  • Criar novo...