Williams Duarte
-
Total de itens
3967 -
Registro em
-
Última visita
-
Dias vencidos
47
Tudo que Williams Duarte postou
-
Para verificar se um usuário já existe no banco de dados MySQL em tempo real e exibir uma mensagem assim que o foco sair do campo de entrada, você pode usar uma combinação de HTML, JavaScript (com jQuery ou Vanilla JS), e PHP para a comunicação com o banco de dados. Aqui está um passo a passo simples para fazer isso: 1. HTML Crie um campo de entrada no HTML para o nome de usuário: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Verificação de Nome de Usuário</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form> <label for="username">Nome de Usuário:</label> <input type="text" id="username" name="username"> <span id="username-message"></span> </form> <script src="check_username.js"></script> </body> </html> 2. JavaScript Use JavaScript para verificar o nome de usuário assim que o foco sair do campo de entrada: // check_username.js $(document).ready(function() { $('#username').on('blur', function() { var username = $(this).val(); if (username.length > 0) { $.ajax({ url: 'check_username.php', type: 'POST', data: { username: username }, success: function(response) { $('#username-message').html(response); } }); } }); }); 3. PHP Crie um script PHP para verificar o nome de usuário no banco de dados: // check_username.php <?php $servername = "localhost"; $username = "seu_usuario"; $password = "sua_senha"; $dbname = "seu_banco_de_dados"; // Conectar ao banco de dados $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("Conexão falhou: " . $conn->connect_error); } if (isset($_POST['username'])) { $username = $_POST['username']; $sql = "SELECT * FROM users WHERE username = '$username'"; $result = $conn->query($sql); if ($result->num_rows > 0) { echo "Nome de usuário já existe."; } else { echo "Nome de usuário disponível."; } } $conn->close(); ?> Explicação: HTML: Cria um formulário simples com um campo de entrada para o nome de usuário. JavaScript: Usa jQuery para detectar quando o campo de entrada perde o foco (blur) e envia uma requisição AJAX para o script PHP. PHP: O script PHP recebe o nome de usuário enviado, consulta o banco de dados MySQL e retorna uma mensagem indicando se o nome de usuário já existe ou está disponível. Essa abordagem verifica o nome de usuário em tempo real e exibe uma mensagem apropriada assim que o usuário sai do campo de entrada. Se precisar de um tutorial mais detalhado, busque por termos como "AJAX username validation PHP MySQL". Espero que isso ajude!
-
Você deve definir o domínio do cookie para o domínio principal com um ponto à frente, como .dominio.com.br Desta forma, o cookie token será acessível em qualquer subdomínio de dominio.com.br, incluindo usuario.dominio.com.br, www.dominio.com.br, e outros que você possa ter.
-
Adicione o índice [0] para acessar o elemento document.getElementsByClassName('conteudo')[0].style.display = "block";
-
Saber se todos os produtos de uma consulta estão cadastrados no banco de dados
Williams Duarte respondeu ao tópico de landerbadi em PHP
Para resolver o problema que você descreveu, precisa de uma consulta SQL que selecione os registros da tabela "itens" onde o produto escolhido, como "uva", apareça e todos os outros produtos nesse registro também estejam listados na tabela "produtos". Isso garante que todos os produtos relacionados em cada item estejam validados contra a lista de produtos aceitáveis. Dada a estrutura atual das suas tabelas e considerando que você quer filtrar por um produto específico e garantir que todos os produtos mencionados no registro estejam na tabela "produtos", uma possível abordagem é a seguinte: SELECT i.* FROM itens i WHERE 'uva' IN (i.prod_01, i.prod_02, i.prod_03, i.prod_04) AND EXISTS (SELECT 1 FROM produtos p WHERE p.produto = i.prod_01) AND EXISTS (SELECT 1 FROM produtos p WHERE p.produto = i.prod_02) AND EXISTS (SELECT 1 FROM produtos p WHERE p.produto = i.prod_03) AND EXISTS (SELECT 1 FROM produtos p WHERE p.produto = i.prod_04); Nessa consulta: A cláusula WHERE 'uva' IN (i.prod_01, i.prod_02, i.prod_03, i.prod_04) verifica se "uva" está em algum dos campos de produto em um registro da tabela "itens". As cláusulas EXISTS verificam se cada produto listado em um registro específico de "itens" está presente na tabela "produtos". Isso é feito para cada campo de produto (prod_01, prod_02, etc.). Se você estiver usando MySQL ou outro sistema compatível no OneCompiler, o código que forneci deve funcionar conforme abaixo. https://onecompiler.com/mysql/42b35kdf5 -- Criação das tabelas CREATE TABLE produtos ( id INT AUTO_INCREMENT PRIMARY KEY, produto VARCHAR(50) ); CREATE TABLE itens ( id INT AUTO_INCREMENT PRIMARY KEY, prod_01 VARCHAR(50), prod_02 VARCHAR(50), prod_03 VARCHAR(50), prod_04 VARCHAR(50) ); -- Inserção de dados na tabela produtos INSERT INTO produtos (produto) VALUES ('laranja'), ('maçã'), ('uva'), ('goiaba'), ('arroz'), ('feijão'), ('macarrão'), ('azeite'); -- Inserção de dados na tabela itens INSERT INTO itens (prod_01, prod_02, prod_03, prod_04) VALUES ('laranja', 'uva', 'arroz', 'feijão'), ('maçã', 'macarrão', 'goiaba', 'uva'), ('arroz', 'feijão', 'maçã', 'azeite'); -- Consulta para verificar a presença de 'uva' e validar os outros produtos SELECT i.* FROM itens i WHERE 'uva' IN (i.prod_01, i.prod_02, i.prod_03, i.prod_04) AND EXISTS (SELECT 1 FROM produtos p WHERE p.produto = i.prod_01) AND EXISTS (SELECT 1 FROM produtos p WHERE p.produto = i.prod_02) AND EXISTS (SELECT 1 FROM produtos p WHERE p.produto = i.prod_03) AND EXISTS (SELECT 1 FROM produtos p WHERE p.produto = i.prod_04); -
Para acessar elementos no XML que possuem nomes de tags com dois pontos, como "dc:creator", você precisa lidar com namespaces. No PHP, o SimpleXMLElement tem métodos específicos para manipular namespaces. O namespace pode ser especificado diretamente se você conhece o URI $link = "noticias.xml"; $xml = simplexml_load_file($link); $namespace = $xml->getNamespaces(true); // Pega todos os namespaces do documento foreach ($xml->channel->item as $item) { $titulo = (string)$item->title; $url = (string)$item->link; $creator = (string)$item->children($namespace['dc'])->creator; // Acessa o namespace 'dc' echo "Título: $titulo\n"; echo "URL: $url\n"; echo "Criador: $creator\n"; }
-
Se você também quer garantir que os produtos listados contenham um item específico, você pode adicionar uma condição extra na cláusula WHERE para filtrar por esse item específico. Teste Online e Ajustado a Query https://onecompiler.com/mysql/42atjfa59 SELECT P.id, P.name, GROUP_CONCAT(I.name ORDER BY I.name) AS items FROM product P JOIN product_item PI ON P.id = PI.productID JOIN item I ON I.id = PI.itemID AND I.active = 'S' WHERE P.id NOT IN ( SELECT PI.productID FROM product_item PI JOIN item I ON I.id = PI.itemID WHERE I.active IS NULL ) AND P.id IN ( SELECT PI.productID FROM product_item PI JOIN item I ON I.id = PI.itemID WHERE I.name = 'mesa' ) GROUP BY P.id, P.name;
-
class Data { public static function ExibirTempoDecorrido($date) { if(empty($date)) { return "Informe a data"; } $periodos = array("segundo", "minuto", "hora", "dia", "semana", "mês", "ano", "década"); $duracao = array("60","60","24","7","4.35","12","10"); $agora = time(); $unix_data = strtotime($date); if(empty($unix_data)) { return "Bad date"; } if($agora > $unix_data) { $diferenca = $agora - $unix_data; $tempo = "atrás"; } else { $diferenca = $unix_data - $agora; $tempo = "agora"; } for($j = 0; $diferenca >= $duracao[$j] && $j < count($duracao)-1; $j++) { $diferenca /= $duracao[$j]; } $diferenca = round($diferenca); if($diferenca != 1) { if($periodos[$j] == "mês") { $periodos[$j] = "meses"; } else { $periodos[$j] .= "s"; } } return "$diferenca $periodos[$j] $tempo"; } } Teste Online https://ideone.com/hj5Qok
-
Fazer busca no Banco de dados usando vários critério
Williams Duarte respondeu ao tópico de landerbadi em PHP
Vou lhe dar outro exemplo de como você pode realizar esta consulta utilizando IN. A consulta SQL inicial buscará na tabela variações todos os registros que contenham a palavra "casa" ou seu plural "casas", e em seguida verificará se os outros itens desses registros estão ativos. Como SQL tem limitações para verificar múltiplas colunas de uma forma dinâmica em diferentes tabelas, faremos uma abordagem que requer uniões múltiplas com a tabela itens. SELECT v.* FROM variações v JOIN itens i1 ON (v.item1 = i1.item OR v.item1 = i1.plural) AND i1.ativo = 'S' JOIN itens i2 ON (v.item2 = i2.item OR v.item2 = i2.plural) AND i2.ativo = 'S' JOIN itens i3 ON (v.item3 = i3.item OR v.item3 = i3.plural) AND i3.ativo = 'S' WHERE 'casa' IN (v.item1, v.item2, v.item3) OR 'casas' IN (v.item1, v.item2, v.item3) Processamento PHP <?php $pdo = new PDO('mysql:host=your_host;dbname=your_dbname', 'username', 'password'); // Sua consulta SQL $sql = "SELECT v.* FROM variações v JOIN itens i1 ON (v.item1 = i1.item OR v.item1 = i1.plural) AND i1.ativo = 'S' JOIN itens i2 ON (v.item2 = i2.item OR v.item2 = i2.plural) AND i2.ativo = 'S' JOIN itens i3 ON (v.item3 = i3.item OR v.item3 = i3.plural) AND i3.ativo = 'S' WHERE 'casa' IN (v.item1, v.item2, v.item3) OR 'casas' IN (v.item1, v.item2, v.item3)"; $stmt = $pdo->query($sql); // Verifica se há registros if ($stmt->rowCount() > 0) { while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { echo "Registro encontrado: " . implode(", ", $row) . "<br>"; } } else { echo "Nenhum registro ativo encontrado."; } ?> Obs.: Troque os valores fixos por variaveis. -
O problema está no retorno, não no script js, é como eu disse antes: " resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload"
-
Só utilizar operador UNION ALL https://www.devmedia.com.br/sql-utilizando-o-operador-union-e-union-all/37457 Exemplo de Uso: $consulta = " ( SELECT A.cod_evento AS cod, A.titulo_evento AS titulo, A.data_evento AS data, 1 AS ordem FROM tabela1 A ) UNION ALL ( SELECT B.cod_noticia AS cod, B.titulo_noticia AS titulo, B.data_noticia AS data, 2 AS ordem FROM tabela2 B ) ORDER BY data, ordem; "; $resultado = mysqli_query($conexao, $consulta) or die ("Erro"); while($busca = mysqli_fetch_array($resultado)) { print $busca['cod']; print $busca['titulo']; } Adapte a sua necessidade!
-
Nodejs não consigo rodar uma Api de rotas
Williams Duarte respondeu ao tópico de belann em Javascript
Você está lidando com um conflito entre módulos ES e CommonJS no seu projeto Node.js. Quando você define "type": "module" no seu package.json, o Node.js espera que todos os arquivos .js usem a sintaxe de módulos ES6 (import/export). O problema é que o Consign, pelo que você descreveu, não suporta diretamente esta sintaxe. Aqui estão algumas abordagens que você pode tentar: Alterar o Tipo de Módulo: Modifique "type": "module" para "type": "commonjs" no seu package.json. Isso exigirá que você atualize seu código para usar require e module.exports em vez de import e export. Aqui está um exemplo de como seu index.js poderia ser alterado: const express = require('express'); const consign = require('consign'); const app = express(); consign() .include("models") .then("libs/middlewares.js") .then("routes") .then("libs/boot.js") .into(app); Importação Dinâmica: Se quiser manter os módulos ES, experimente usar import() dinamicamente. Essa é uma solução mais moderna, mas pode não ser totalmente compatível com a forma como o Consign carrega arquivos. Reavaliar o Uso do Consign: Dependendo da complexidade do seu projeto, talvez valha a pena considerar estruturas alternativas que não dependam do Consign, facilitando o uso de módulos ES diretamente. Configuração Adequada do Babel: Como você já utiliza o Babel, certifique-se de que está corretamente configurado para transpilar o código ES6+ para compatibilidade com a versão do Node.js que você está usando. Isso pode ajudar a manter a sintaxe de módulos ES6 e ainda assim ser compatível com bibliotecas que esperam CommonJS. -
Fiquei curioso sobre isto, então resolvi pesquisar! SELECT ROW_NUMBER() OVER (ORDER BY nome_usuario) AS contador, id_usuario, nome_usuario FROM usuarios
-
O erro "Unexpected token ... sugere que o seu código esperava JSON, mas recebeu HTML, provavelmente de uma página de erro (como 404 ou 500). Isso ocorre ao tentar converter a resposta do servidor em JSON quando a URL está errada ou o servidor não responde corretamente. Verifique a URL e as configurações do servidor para garantir que aceitam uploads POST e retornam JSON. fetch('http://localhost/dashboard/dados', { method: 'POST', body: formData }) .then(response => { if (!response.ok) { throw new Error('Houve um problema com a resposta da rede'); } // Verifica se a resposta é JSON antes de tentar converter const contentType = response.headers.get('content-type'); if (contentType && contentType.includes('application/json')) { return response.json(); } else { throw new Error('Não é JSON: ' + contentType); } }) .then(data => { console.log('Sucesso:', data); }) .catch(error => { console.error('Problemas com o Upload:', error); }); Entenda, quando você faz o upload de arquivos para um servidor usando PHP ou Node.js, a resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload e o que você precisa fazer com os arquivos após recebê-los. Abaixo estão exemplos de respostas que você pode esperar de cada um: Exemplo de Resposta do PHP: <?php // Processamento do upload... // Supondo que tudo correu bem $response = [ 'success' => true, 'message' => 'Upload realizado com sucesso!', 'fileInfo' => [ 'name' => $_FILES['file']['name'], 'size' => $_FILES['file']['size'], 'type' => $_FILES['file']['type'], ] ]; header('Content-Type: application/json'); echo json_encode($response); Exemplo de Resposta do Node.js com Express: app.post('/upload', upload.single('file'), (req, res) => { // Processamento do upload... // Supondo que tudo correu bem res.json({ success: true, message: 'Upload realizado com sucesso!', fileInfo: { name: req.file.originalname, size: req.file.size, type: req.file.mimetype, } }); }); Obs.: Diferentes frameworks têm a capacidade de ajustar automaticamente seus comportamentos com base nos cabeçalhos HTTP recebidos, o que significa que não existe uma única abordagem padrão aplicável a todos os casos.
-
A lógica é bem parecida com a de um único arquivo, só que você vai incluir mais de um arquivo no formData. No input no seu HTML adicione o atributo multiple <input multiple type="file"> Agora, pegue os arquivos do input. const fileInput = document.querySelector('input[type="file"][multiple]'); Adicione cada arquivo ao formData Array.from(fileInput.files).forEach((file, index) => { // Aqui, 'files[]' é o nome do campo que será usado pelo servidor para receber os arquivos. // O uso de '[]' indica que é um array de arquivos. O nome exato depende da API do servidor. formData.append('files[]', file); }); O restante é praticamente igual! Fóruns exigem esforço próprio; não esperem soluções prontas. Pesquise para aproveitar bem.
-
Uma coisa que notei no seu código é a definição explícita do cabeçalho 'Content-Type' como 'multipart/form-data'. Na verdade, ao fazer uploads de arquivos usando FormData, é recomendável não definir esse cabeçalho manualmente. Isso porque o navegador precisa adicionar um boundary ao tipo de conteúdo, o que é algo que ele faz automaticamente quando você omite esse cabeçalho. Aqui vai uma sugestão de como você poderia ajustar o seu código: const formData = new FormData(); const fileField = document.querySelector('input[type="file"]'); formData.append('file', fileField.files[0]); fetch('http://localhost/dashboard/dados', { method: 'POST', body: formData }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log('Success:', data); }) .catch((error) => { console.error('Problemas com o Upload:', error); }); Com essa abordagem, você deixa que o navegador cuide do cabeçalho Content-Type por você. Isso simplifica um pouco as coisas e pode resolver o problema que você está enfrentando. Além disso, é sempre bom verificar se o servidor está configurado corretamente para aceitar uploads de arquivos e se o endpoint especificado está correto e pronto para lidar com solicitações POST multipart/form-data. Se mesmo assim você continuar tendo problemas, uma boa dica é verificar os logs do servidor para mais detalhes sobre o que pode estar errado. Espero que essa dica te ajude a resolver o problema! Se tiver mais alguma dúvida ou se algo não estiver claro, sinta-se à vontade para perguntar. Boa sorte com o seu projeto!
-
Não consigo adicionar um valor de forma dinâmica
Williams Duarte respondeu ao tópico de joeythai em Javascript
Seu código está bastante extenso, tornando a análise um tanto complexa. Além disso, não identifiquei em nenhum ponto específico a execução de uma chamada POST que envie os dados atualizados através de data: {data: JSON.stringify(arrayData)}. É fundamental incluir essa chamada AJAX após a atualização dos dados para garantir que eles sejam enviados corretamente ao seu backend. Exemplo: $.ajax({ type: "POST", url: "<URL_PARA_ENVIO_DOS_DADOS>", data: {data: JSON.stringify(arrayData)}, success: function(response) { // Trate a resposta aqui }, error: function(xhr, status, error) { // Trate erros aqui } }); Usei um formatador online, para tentar pelo menos entender teu código, então faça um teste de evento de click: Lembrando que tu é o pai da criança, só você e Deus sabe oque este código faz, só estou lhe dando um exemplo, não é solução final. $(document).ready(function () { $('#apply_removal').on('click', function () { let percentage = $('#percentage').val(); // Coleta o percentual if (!percentage) { alert('Por favor, insira um percentual válido.'); return; } let arrayData = []; // Inicializa o array $('.table-body tr').each(function () { let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text(); let removal_vehicle = parseFloat(veiculo) * (1 + parseFloat(percentage) / 100); let removal_motorcycle = parseFloat(moto) * (1 + parseFloat(percentage) / 100); let removal_tuck = parseFloat(caminhao) * (1 + parseFloat(percentage) / 100); // Atualiza os campos na tabela $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // Adiciona os dados atualizados ao array arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck }); }); // Faz a chamada AJAX para enviar ao backend $.ajax({ type: "POST", url: "<URL_PARA_ENVIO_DOS_DADOS>", // Substitua pela URL correta do seu backend data: JSON.stringify({data: arrayData}), // Certifique-se de que seu backend espera receber um JSON contentType: "application/json", // Informa ao servidor que o tipo de conteúdo é JSON success: function(response) { console.log('Dados enviados com sucesso!', response); }, error: function(xhr, status, error) { console.error('Erro ao enviar dados:', error); } }); }); }); -
Mais limpo: SELECT GROUP_CONCAT(nome SEPARATOR ', ') AS nomes FROM usuarios; <?php $query = mysqli_query($conexao, "SELECT GROUP_CONCAT(nome SEPARATOR ', ') AS nomes FROM usuarios"); $row = mysqli_fetch_assoc($query); $nomes = explode(', ', $row['nomes']); ?>
-
Como pegar um tema qualquer do wordpress e torna-lo meu
Williams Duarte respondeu ao tópico de Felipe Medeiros em Desenvolvimento frontend
style.css Modifique os Detalhes do Tema /* Theme Name: Nome do Tema Theme URI: http://exemplo.com/nome-do-tema/ Author: Nome do Autor Author URI: http://exemplo.com/ Description: Uma breve descrição do tema. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: nome-do-tema */ Alterando os detalhes do tema neste arquivo style.css, vai fazer com que o WordPress e os sistemas de atualização o reconheçam como um tema diferente e, portanto, não apliquem atualizações automáticas destinadas ao tema original. -
Acho que você tem demência, a quantos anos esta nesta vibe de tabela_aprendiz? Sobre "interpretação", leia direito, entenda o contexto, senão entender leia novamente! Senão entender ainda, copie e cole um trecho do que eu disse abaixo "restrições de segurança dos navegadores" e cole no google Veja o que eu disse, e não é você quem ira mudar isto. "Replicar a imagem selecionada no primeiro input para o segundo, e diretamente isso não é viável devido às restrições de segurança dos navegadores. Eles não permitem que scripts manipulem arquivos de input de forma direta por razões de privacidade." Vou faciltar sua vida porque tu gosta de coisa mastigada: Leia aqui: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file E é notório que em todo este tempo, não estudou o básico de Javascript e nem PHP. https://forum.imasters.com.br/topic/588653-rodar-código-php-em-servidores-diferentes/ E eu que tenho problemas de interpretação! rsrsrs
-
Percebi algum tempo atrás, que você tem uma tendência em rejeitar soluções que não se originam de seu próprio trabalho. Essa abordagem te limita em capacidade de aprendizado e crescimento na programação, um campo que se beneficia imensamente da colaboração e da troca de conhecimentos. Estar aberto a diferentes métodos e soluções não apenas enriquece sua base de conhecimento, mas também aprimora suas habilidades de resolução de problemas. Veja oque você ignorou funcionando: https://codepen.io/William-Duarte-the-decoder/pen/bGZjZKq Agora senão sabe trocar uma imagem ou link de exemplo, paciência! Veja o quanto você rejeita qualquer pergunta ou resposta feita: https://forum.imasters.com.br/topic/588664-carregar-imagem/ Veja o quanto fica ainda mais evidente que não sabe javascript básico: https://forum.imasters.com.br/topic/588672-servir-vários-banners-com-um-script/ Veja aqui a recomendação de um curso básico na Udemy, onde aprendera usar forEach para "Servir os banners" ou é manipular? rsrs https://www.udemy.com/course/curso-web/
-
Pelo que percebi, você buscou um script na internet e está tentando adaptá-lo às suas necessidades. No entanto, identifiquei que as transições não estão funcionando devido a vários problemas no seu código anterior. Sugeri duas soluções, sendo a última mais direta e eficaz. Entendo que, como o script é bastante diferente do que você encontrou originalmente, você pode estar tendo dificuldades para compreendê-lo devido a algumas limitações. É importante frisar que o conhecimento em JavaScript é essencial aqui, pois só assim você conseguirá entender completamente o código e realizar as modificações necessárias. Caso continue enfrentando dificuldades, talvez seja interessante considerar a contratação de um freelancer especializado. Eles podem oferecer o suporte técnico necessário para resolver esses problemas de forma eficiente, já que esta situação parece exigir uma assistência mais dedicada do que a que podemos oferecer aqui gratuitamente.
-
Corrigido, peço que, para futuras consultas, evite abrir múltiplos tópicos sobre o mesmo assunto, senão consegue resolver aguarde um pouco. Isso nos ajudará a manter o fórum organizado e a garantir que cada questão receba a atenção adequada. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Transição Suave entre Imagens</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 1s ease-in-out; opacity: 0; z-index: 1; /* Todos começam no fundo */ } .banner-link.active { opacity: 1; z-index: 2; /* Somente o ativo fica no topo */ } .banner-link img { width: 100%; height: auto; } </style> </head> <body> <div id="banner"> <a href="https://example.com/link1" class="banner-link active"><img src="https://via.placeholder.com/240x480?text=Image+1" alt="Image 1"></a> <a href="https://example.com/link2" class="banner-link"><img src="https://via.placeholder.com/240x480?text=Image+2" alt="Image 2"></a> <a href="https://example.com/link3" class="banner-link"><img src="https://via.placeholder.com/240x480?text=Image+3" alt="Image 3"></a> <!-- Adicione mais imagens conforme necessário --> </div> <script> const banner = document.getElementById('banner'); const links = document.querySelectorAll('.banner-link'); // Seleciona todos os links let currentIndex = 0; // Começa na primeira imagem function showRandomImage() { // Esconde o link (e a imagem dentro dele) atual links[currentIndex].classList.remove('active'); // Seleciona um novo link (e imagem) aleatório diferente do atual let randomIndex; do { randomIndex = Math.floor(Math.random() * links.length); } while (randomIndex === currentIndex); // Mostra o novo link (e imagem) links[randomIndex].classList.add('active'); // Atualiza o índice do link (e imagem) atual currentIndex = randomIndex; } showRandomImage(); // Mostra a primeira imagem let intervalId = setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos // Pausar o intervalo quando o mouse está sobre o banner banner.addEventListener('mouseover', () => { clearInterval(intervalId); }); // Retomar o intervalo quando o mouse sai do banner banner.addEventListener('mouseout', () => { intervalId = setInterval(showRandomImage, 3000); }); </script> </body> </html>
-
No seu CSS #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 1s ease-in-out; } .banner-link img { width: 100%; height: auto; } No seu JavaScript: Lembre-se de que a lógica de criação de novos elementos img e a foi removida, pois ela substituiria todo o conteúdo do banner, o que poderia interferir nas transições suaves. As imagens agora são controladas apenas por suas classes CSS. const links = document.querySelectorAll('.banner-link'); // Seleciona todos os links let currentIndex = 0; // Começa na primeira imagem // Inicialize todos os links como ocultos, exceto o primeiro links.forEach((link, index) => { if (index !== 0) { link.style.opacity = 0; link.style.zIndex = 1; link.style.position = 'absolute'; // Garante que todos os links usem o mesmo espaço } else { link.style.opacity = 1; link.style.zIndex = 2; link.style.position = 'relative'; } }); function showRandomImage() { // Esconde o link (e a imagem dentro dele) atual links[currentIndex].style.opacity = 0; links[currentIndex].style.zIndex = 1; // Seleciona um novo link (e imagem) aleatório diferente do atual let randomIndex; do { randomIndex = Math.floor(Math.random() * links.length); } while (randomIndex === currentIndex); // Mostra o novo link (e imagem) links[randomIndex].style.opacity = 1; links[randomIndex].style.zIndex = 2; // Atualiza o índice do link (e imagem) atual currentIndex = randomIndex; } showRandomImage(); // Mostra a primeira imagem setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos No HTML, você pode colocar cada imagem dentro de um elemento de link: <div id="banner"> <a href="https://example.com/link1" class="banner-link" style="opacity: 1; z-index: 2;"><img src="https://via.placeholder.com/240x480?text=Image+1" alt="Image 1"></a> <a href="https://example.com/link2" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+2" alt="Image 2"></a> <a href="https://example.com/link3" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+3" alt="Image 3"></a> <!-- Adicione mais imagens conforme necessário --> </div> Código HTML Completo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Transition Suave entre Imagens</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 1s ease-in-out; } .banner-link img { width: 100%; height: auto; } </style> </head> <body> <div id="banner"> <a href="https://example.com/link1" class="banner-link" style="opacity: 1; z-index: 2;"><img src="https://via.placeholder.com/240x480?text=Image+1" alt="Image 1"></a> <a href="https://example.com/link2" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+2" alt="Image 2"></a> <a href="https://example.com/link3" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+3" alt="Image 3"></a> <!-- Adicione mais imagens conforme necessário --> </div> <script> const links = document.querySelectorAll('.banner-link'); // Seleciona todos os links let currentIndex = 0; // Começa na primeira imagem // Inicialize todos os links como ocultos, exceto o primeiro links.forEach((link, index) => { if (index !== 0) { link.style.opacity = 0; link.style.zIndex = 1; link.style.position = 'absolute'; // Garante que todos os links usem o mesmo espaço } else { link.style.opacity = 1; link.style.zIndex = 2; link.style.position = 'relative'; } }); function showRandomImage() { // Esconde o link (e a imagem dentro dele) atual links[currentIndex].style.opacity = 0; links[currentIndex].style.zIndex = 1; // Seleciona um novo link (e imagem) aleatório diferente do atual let randomIndex; do { randomIndex = Math.floor(Math.random() * links.length); } while (randomIndex === currentIndex); // Mostra o novo link (e imagem) links[randomIndex].style.opacity = 1; links[randomIndex].style.zIndex = 2; // Atualiza o índice do link (e imagem) atual currentIndex = randomIndex; } showRandomImage(); // Mostra a primeira imagem setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos </script> </body> </html>
-
Dei uma ligeira modificada e uma enxugada neste teu código, ja deixei comentado para o que cada linha faz, testa ai: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colocar Imagens do Banner no HTML</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; transition: opacity 0.5s ease-in-out; } .banner-link { display: none; width: 100%; height: 100%; } .active { display: block; } </style> </head> <body> <div id="banner"> <a class="banner-link" href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a class="banner-link" href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a class="banner-link" href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a class="banner-link" href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a class="banner-link" href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> <script> const links = document.querySelectorAll('.banner-link'); let currentIndex = 0; function showRandomImage() { // Remover a classe 'active' da imagem/link atual links[currentIndex].classList.remove('active'); // Calcular o índice da próxima imagem currentIndex = (currentIndex + 1) % links.length; // Adicionar a classe 'active' à nova imagem/link links[currentIndex].classList.add('active'); } // Iniciar mostrando a primeira imagem links[currentIndex].classList.add('active'); // Alterar a imagem/link a cada 2 segundos setInterval(showRandomImage, 2000); </script> </body> </html>
-
Modal do Bootstrap 5 não carrega dados dentro dos Editores WYSIWYG
Williams Duarte respondeu ao tópico de unset em Desenvolvimento frontend
Para entender melhor o problema e fornecer uma solução exata, seria muito útil se você pudesse compartilhar um fragmento do seu código, partes onde o modal e o editor são inicializados. Dessa forma, a comunidade pode examinar os detalhes e trabalhar em conjunto para encontrar a melhor solução. Lembre-se, uma imagem vale mais que mil palavras, mas apenas você conhece o que está por trás do código!