renan mafra
Members-
Total de itens
73 -
Registro em
-
Última visita
Reputação
0 ComumSobre renan mafra
-
Carregar dinamicamente link css externo, não estou conseguindo.
renan mafra postou um tópico no fórum Javascript
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 ? ? -
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 !!! -
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.
-
Trocar imagem pelo nome da imagem: carro.png por carro-B.png ...
renan mafra respondeu ao tópico de renan mafra em Javascript
eu quero aproveitar somente uma chamada via document.getElementsByName("menu0"); e usar uma função para que ao pairar o mouse em cima de cada imagem/link (mouseover) a imagem troque pela outra eu estou me enrolando com a array criada pelo DOM: Um link Já funcionou, eu quero que funcione para todos entendeu ? Segue onde estou.... depois prentendo colocar um duas addEventListener. segue: <script> window.onload = function(){ var menu0 = document.getElementsByName("menu0"); var imagem = menu0[0].src; var oc = imagem.indexOf('.png') var oc2 = imagem.indexOf('links/') var extracao2 = imagem.slice(oc2, oc); var novastring = (extracao2 + "-B.png"); var string_anterior = (extracao2 + ".png"); menu0[0].onmouseover = function troca(){ menu0[0].src = novastring; } menu0[0].onmouseout = function troca2(){ menu0[0].src = string_anterior; } ////////////////////////////////////////// //////////////////////////////////////////////OK //bloco que vai varrer cada item: //////////// //for(var i=0; i<menu0.length; i++){ // alert(menu0[i].src); //} ////////////////////////////////////////////// } </script> </head> <body> <a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a> <a href="#"><img src="links/aviao.png" name="menu0" width="86" height="13" border="0"/></a> <a href="#"><img src="links/moto.png" name="menu0" width="109" height="13" border="0"/></a> <a href="#"><img src="links/jet.png" name="menu0" width="108" height="13" border="0"/></a> <a href="#"><img src="links/skate.png" name="menu0" width="114" height="13" border="0"/></a> <a href="#"><img src="links/scooter.png" name="menu0" width="114" height="13" border="0"/></a> </body> </html> Tipo automatizar a parada, o menu[0] vai ser menu dentro do loop for como está no bloco em //comentário Até já funcionou para pescar os itens, eu to me enrolando na hora de colocar um evento para disparar em cada um dos links/imagens.... -
Trocar imagem pelo nome da imagem: carro.png por carro-B.png ...
renan mafra postou um tópico no fórum Javascript
Olá pesssoal, Sou novato em JS. Eu tenho 6 links, que são imagens que quero substituir, uma pela outra. Eu sei que poderia fazer isso facilmente via CSS, mas para treinar quero fazer da seguinte forma: Minha ideia seria pegar o src das imagens e alterar mudando o nome da imagem, tipo assim: Tenho imagens que são os links nomeados assim: carro.png / carro-B.png (uma imagem(link) é branca e a outra é amarela). Como faço para alterar a imagem trocando uma pela outra nesse esquema ? <a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a> e trocar para <a href="#"><img src="links/carro-B.png" name="menu0" width="90" height="13" border="0"/></a> Como são 6 imagens eu estou pegando via getElementsByTagName e depois fazer uma função que automatize para todas as outras..... Tirando o CSS HOVER via Javascript, essa seria a melhor maneira de automatizar essa troca ? vai lá o código: <html> <head> <style> body{background-color: #000000;} </style> <script> window.onload = function(){ var menu0 = document.getElementsByName("menu0"); var imagem = menu0[0].src; ////////////////////////////////////////////// //bloco que vai varrer cada item: //////////// //for(var i=0; i<menu0.length; i++){ // alert(menu0[i].src); //} ////////////////////////////////////////////// } </script> </head> <body> <a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a> <a href="#"><img src="links/livro.png" name="menu0" width="86" height="13" border="0"/></a> <a href="#"><img src="links/aviao.png" name="menu0" width="109" height="13" border="0"/></a> <a href="#"><img src="links/motos.png" name="menu0" width="108" height="13" border="0"/></a> <a href="#"><img src="links/bicicleta.png" name="menu0" width="114" height="13" border="0"/></a> <a href="#"><img src="links/onibus.png" name="menu0" width="114" height="13" border="0"/></a> </body> </html> a imagem carro.png tem o seu respectivo carro-B.png aviao.png aviao-B.png E assim por diante.... Essa é uma boa maneira de fazer isso via JS ?? ou tem melhores ? -
Como fazer para a DIV principal se expandir verticalmente
renan mafra postou um tópico no fórum Desenvolvimento frontend
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> -
O estilo da fonte não aparece na página .htm
renan mafra postou um tópico no fórum Desenvolvimento frontend
Olá pessoal, Eu estou criando uma página .htm simples, e quero que nessa página o texto seja de uma fonte especifica, no meu caso GeneveNrw incorporada à página, eu peguei a fonte genevaNrw.ttf e coloquei na pasta font-geneva-nrw, acontece que não está rolando..., eu tento visualizar no desktop e aparece uma fonte padrão..., eu botei no IIS e aparece uma fonte padrão, eu fui no mime do IIS e tá habilitado formato .ttf, eu botei no Apache e também nada, pessoal me deem um help ! segue o código: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> <style> @font-face { font-family: 'GenevaNrw'; src: url('font-geneva-nrw/GenevaNrw.ttf'); } .titulo{ font-family: GenevaNrw; font-weight: bold; font-size: 22px; text-decoration: underline; margin-top: 17px; margin-left: 35px; } ........ ........ </style> </head> <body> <div class="container"> <div class="topo"> <div class="topo_aba"><img src="imagens/borda-esquerda.gif" width="78" height="68" border="0"></div> <div class="topo_estrelas"><img src="imagens/estrelas-direito.gif" width="112" height="24" border="0" class="img-right"></div> </div> <div class="titulo">RECEITAS DE TORTAS</div> </div> </body> </html> Estou utilizando o Dreamweaver e no mostrar visualização do programa aparece.... só lá... do resto nada. abraço !!! -
fiz isso, vlw !!!!!!!!!!!!!
- 4 respostas
-
- expandirlnk
- lik
-
(e mais 1 )
Tags:
-
Estou testando aqui, é isso mesmo, mas, não era para ser botão, era para ser link de texto normal. Se não for muito pode dar esse help ? Enquanto isso to tentando aqui.
- 4 respostas
-
- expandirlnk
- lik
-
(e mais 1 )
Tags:
-
Olá pessoal, Sou iniciante em CSS e JS. Gostaria de fazer alguns links, um debaixo do outro e quando clicasse no link ele abriria uma paragrafo abaixo dele empurrando os outros links para baixo, seria tipo um breve resumo abaixo do link e ao se clicar em outro o clicado anteriormente se retraia e abria o atual. Alguém pode dar um help ? to quebrando a cabeça aqui e não tá dando certo. Ex: Texto 01 //Foi clicado Este é um texto descritivo com um pequeno resumo caso querira saber mais clique aqui: Texto 02 Texto 03 Texto 04 Obrigado pessoal !
- 4 respostas
-
- expandirlnk
- lik
-
(e mais 1 )
Tags:
-
Probleminha chato com navegador e pagina .htm
renan mafra postou um tópico no fórum Desenvolvimento frontend
Olá pessoal, É o seguinte, eu gosto de testar rapidamente os meus códigos front-end (HTML-JS-CSS) diretamente à partir da área de trabalho, simplesmente clicando no navegador e vendo. Acontece que aconteceu algo aqui no meu PC que só estou conseguindo fazer isso com o IE que nem é o meu navegador padrão, quando clico na página com o simbolo do Chrome (salvo como .htm) ele não abre o que fiz e sim vai direto para a pagina inicial do google, idem no firefox, já desabilitei o google como página inicial e não funcionou, o que pode ser ?? desde já agradeço pela ajuda.- 1 resposta
-
- navegador
- javascript
-
(e mais 2 )
Tags: