Ir para conteúdo

renan mafra

Members
 Perfil  Explorar Conteúdo

  • Total de itens

    73

  • Registro em

  • Última visita

Reputação

0 Comum

Sobre renan mafra

  1. renan mafra começou a seguir Como fazer para a DIV principal se expandir verticalmente, Carregar dinamicamente link css externo, não estou conseguindo., Atrelando valores array do DOM à evento e e 1 outro
  2. renan mafra
    Eu tenho 2 arquivos CSS externos que contém backgrounds da página. Em 1 só tem links para imagens .webP e em outro somente .PNG , eu estou usando um script para detectar se o browser aceita .webP e caso afirmativo ele altera o link CSS externo em HEAD para o css externo com .webP, por padrão inicialmente ele aponta para o .png, testei numa página mais simples e deu ok, mas na hora de colocar aonde quero não funcionou, segue o código: No HEAD: <link href="‪arquivos_css/png.css" rel="stylesheet" id="key"> No JS: ////////////////////////////////////////////////////////////// // FUNÇÃO QUE CRIA O LINK EXTERNO CSS PARA INSERIR NO HEAD // OK// ////////////////////////////////////////////////////////////// function loadCSS(url){ var link = document.createElement('link'); link.setAttribute('href', url ); link.setAttribute('rel', "stylesheet" ); link.setAttribute('id', "key" ); var para = document.getElementsByTagName('head')[0]; //Nó pai HEAD var velho = document.getElementById('key'); //local exato do elemento a ser substituido para.replaceChild(link, velho); //Substituímos o velho pelo novo(link) } ////////////////////////////// Chamada à função do webP ///////////////////////////// WebpIsSupported(function(isSupported){ if(isSupported){ //CHAMA A FUNÇÃO LOADCSS e carrega o link CSS externo com WEBP loadCSS('arquivos_css/webp.css'); } }); ////////////////////////////////////////////////////////////// // FUNÇÃO QUE DETECTA A COMPATIBILIDADE DO BROWSER COM WEBP // ////////////////////////////////////////////////////////////// function WebpIsSupported(callback){ if(!window.createImageBitmap){ callback(false); return; } var webpdata = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA='; fetch(webpdata).then(function(response){ return response.blob(); }).then(function(blob){ createImageBitmap(blob).then(function(){ callback(true); }, function(){ callback(false); }); }); } O erro que está dando no chrome é esse: Failed to load resource: net::ERR_FILE_NOT_FOUND já mudei na função loadCSS o endreço dos arquivos de loadCSS('arquivos_css/webp.css'); para loadCSS('/arquivos_css/webp.css'); e não funciona.... o arquivo CSS externo contém backgrounds dentro do seletor HTML tipo : html { background-image.....(1); background-image.....(2); background-image.....(3); etc } eu vou no elements do chome e está lá no HEAD conforme quero mas não carrega na página e dá este erro no console. – o que pode estar acontecendo ? ?
  3. renan mafra

    Atrelando valores array do DOM à evento

    renan mafra respondeu ao tópico de renan mafra em Javascript

    Olá Omar, Muito obrigado pela explicação, eu já tinha chegado a solução parecida. Valeu pela ajuda !!!
  4. renan mafra

    Atrelando valores array do DOM à evento

    renan mafra postou um tópico no fórum Javascript

    Olá pessoal, Estou aprendendo JS há alguns meses. Como todo processo de aprendizagem aparecem certas lacunas, dúvidas.... A minha é a seguinte: Estou tendo dificuldade em atrelar elementos do tipo (arrays/listas/vetores) retornados pelos métodos do DOM e atrelá-los a eventos. Nesse código abaixo eu queria transformar cada dia de um calendário em um objeto clicável e estou tendo dificuldade em manipular os vetores retornados e atrelá-los A CADA DIA., alguém pode dar essa luz ?? segue o código: <script> window.onload = function(){ var msg = document.getElementById("msg"); var el = document.getElementById("mes"); var elemento = el.getElementsByClassName("dia"); /* elemento[0].onclick = function(){ elemento[0].style.backgroundColor = "#ccc"; } */ elemento[1].onclick = function(){ elemento[1].style.backgroundColor = "#ccc"; } elemento[2].onclick = function(){ elemento[2].style.backgroundColor = "#ccc"; } elemento[3].onclick = function(){ elemento[3].style.backgroundColor = "#ccc"; } } </script> </head> <body> <table id="mes"> <tr> <td class="dia">1</td><td class="dia">2</td><td class="dia">3</td><td class="dia">4</td><td class="dia">5</td><td class="dia">6</td><td class="dia">7</td> </tr> <tr> <td class="dia">8</td><td class="dia">9</td><td class="dia">10</td><td class="dia">11</td><td class="dia">12</td><td class="dia">13</td><td class="dia">14</td> </tr> <tr> <td class="dia">15</td><td class="dia">16</td><td class="dia">17</td><td class="dia">18</td><td class="dia">19</td><td class="dia">20</td><td class="dia">21</td> </tr> <tr> <td class="dia">22</td><td class="dia">23</td><td class="dia">24</td><td class="dia">25</td><td class="dia">26</td><td class="dia">27</td><td class="dia">28</td> </tr> <tr> <td class="dia">29</td><td class="dia">30</td><td class="dia">31</td> </tr> </table> </body> </html> Já usei função fora do onLoad, já usei loop for mas to quebrando a cabeça aqui. Eu gostaria que um único botão (o dia clicado) em uma função conseguisse fazer o trabalho, tipo assim: elemento[x].onclick = function(){ elemento[x].style.backgroundColor = "#ccc"; } qual a forma correta de fazer isso ???? agradeço a ajuda.
  5. renan mafra
    Olá pessoal, Eu tenho uma página .html e um DIV principal que chamei de conteiner eu tenho mais outras DIVS dentro dessa DIV principal, eu gostaria que na medida que as DIVs internas fossem preenchidas a div principal container se expandisse automaticamente na vertical. Eu quero fazer aquele esquema em que ao clicar em um dos 5 links ele se abra (se expanda) o código base já tenho mas não sei como a div que engloba tudo "cresça" para baixo na medida que for sendo clicado e abrindo as outras DIVS, estou no desenvolvimento ainda mais quando boto height: auto; a div container se contrai em vez de acompanhar o resto, como faço isso no CSS ? Segue o esqueleto do código: <html> <head> <style> .container{ width: 850px; min-height: 513px; margin-left: 5%; margin-top: 5%; background-color: #DCDCDC; border-radius: 0.7em 0.7em; } .......... ........ ......... ........ </style> </head> <body> <div class="container"> <div class="filho"> <div class="topo"></div> </div> <div class="titulo"></div> <div class="caixa"> <div class="preco"></div> <div class="linha"></div> <div class="escondido"></div> <div class="balao_cinza"></div> </div> </div> </body> </html>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito