Ir ao conteúdo
  • Cadastre-se

EddK

Membro Pleno
 Perfil  Explorar Conteúdo

  • Posts

    25

  • Cadastrado em

  • Última visita

 Tipo de conteúdo 

posts postados por EddK

    Como manipular (class e aria-expanded) com javascript

    em Web e banco de dados

    Postado

    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')
        }
    });
}

     

    Forma correta de utilizar aria-labelledby e aria-describedby?

    em Web e banco de dados

    Postado

    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>

     

    Alterar JavaScript para adicionar mais botões e modais

    em Web e banco de dados

    Postado

    @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)?

    Seleção com teclado (tab) na janela modal JavaScript

    em Web e banco de dados

    Postado

    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

    Alterar JavaScript para adicionar mais botões e modais

    em Web e banco de dados

    Postado

    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>

     

    Adicionar foco e wai-aria em janela modal

    em Web e banco de dados

    Postado

    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");
    }

     

    Como centralizar box model e deixar responsivo

    em Web e banco de dados

    Postado

    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
     

     

    Alterar ícone pela classe utilizando Javascript

    em Web e banco de dados

    Postado

    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

Mais

×
×
  • Criar novo...