Jump to content
mpcarvalho

Matriz através de valores de uma input

Recommended Posts

Possuo pouco conhecimento em JS, então gostaria de solicitar uma ajuda com um script que montei para resgatar imagens de produtos de um determinado site/ecommerce utilizando o EAN do produto.

 

No código abaixo eu passo via form alguns parametros como a URL do site onde quero pesquisar a imagem com "/" e na sequência o campo EAN com todos os códigos de barra que quero pesquisar separados por "," e por ultimo a extensão do arquivo de acordo com a extensão que o site em questão utiliza, jpg ou png. No final tudo será exibido na div dl_imgs e ai então eu posso dar um ctrl + s no meu navegador e salvar todas as imagens de uma vez. 

 

O objetivo do FOR é retornar imagem por imagem utilizando os parametros URL + EAN + EXT. Ex: "ecommerce.com.br/imagens/000030201.png".

 

O que acontece é que preencho o campo EAN com todos os códigos de barras que preciso separados por virgula, mas o script não consegue montar o array e me retorna algo parecido com isso: https://cdn-*******.*******.com.br/products/7896003703863,7897005100223,7897005101589,7896360210097,7896003703863,7897005100223,7897005101589

 

Como podem ver me trás apenas uma imagem que não existe pois não separou os códigos de barra na matriz. Porem se eu copiar esses mesmos códigos e colocar direto na VAR MATRIZ, o script funciona. 

 

Segue abaixo o script utilizado. Desde já agradeço!

 

<script>
        function loadImgs(){
          /*--- Dados do formulário ---*/
          var dataform = document.forms[0] || document.forms['dados'];
          //var t = dataform.imgtotal.value;
          var url = dataform.url.value;
          var ext = dataform.ext.value;

          var ean = dataform.ean.value;
          dataform.buscar.disabled = true;
            
          /*--- Gerar IMGS ---*/
          var div = document.getElementById('dl_imgs') || document.dl_imgs;
          div.innerHTML = "";

          novoArray = ean.split(',');
          var matriz = [novoArray];
            
         for(var i=0; i<matriz.length; i++) {
               div.innerHTML += '<img src="'+url+""+matriz+''+ext+'" />';
         }

}
</script>

 

PS: Para melhorar ainda mais essa extração, eu gostaria de fazer isso fazendo um UPLOAD de um arquivo XLS contendo 2 colunas EAN e Nome produto, e no final exibir a imagem e abaixo o nome do produto, se alguém puder me dar uma luz de como fazer isso agradeço. Att;

Share this post


Link to post
Share on other sites

@mpcarvalho Eu achei dois problemas na sua função

 

Um, é logo após você separa a string dá variável ean usando o split. Você converte aquela string em um array dividindo a string com base na virgula e depois você salva o resultado dá divisão na variável novoArray, porem você acaba salvando o arrray em um array com uma unica coluna. Quando você coloca a variável novaArray entre [ ], você acaba colocamo um array dentro de outro.

 

Debug:

Valor ean = "7896003703863,7897005100223,7897005101589,7896360210097,7896003703863,7897005100223,7897005101589";

novoArray = ean.split(',');
var matriz = [novoArray];

// Resultado do Valor na variável "matriz":
Tipo: object;
Numero de colunas: 1;
Valor:
[
0:["7896003703863", "7897005100223", "7897005101589", "7896360210097", "7896003703863", "7897005100223", "7897005101589"]
]

 

Quando você utilizar o for na variável matriz ele vai pegar o valor da unica coluna que o array possui e vai converter o valor dessa coluna que é um array para uma unica string. Por isso ele retorna aquela string, como se ele nem executasse uma operação nela.

 

O segundo é quando você concatena os valor e coloca dentro de uma div. Você não seleciona o índice do array que você está fazendo o loop. Isso também vai fazer com que ele retorna aquela string, como se ele nem executasse uma operação nela.

 

Para corrigir isso, bastas usar o valor dá variável novaArray no seu for ou caso você queira salvar o valor na variável matriz, você colocar o valor sem está entre [ ].

 

Exemplo:

novoArray = ean.split(',');
           
for(i = 0 ; i < novoArray.length; i++)
{
	div.innerHTML += '<img src="'+url+""+novoArray[i]+''+ext+'" />';
}

// Ou 

novoArray = ean.split(',');
var matriz = novoArray.slice();
           
for(i = 0; i < matriz.length; i++)
{
	div.innerHTML += '<img src="'+url+""+matriz[i]+''+ext+'" />';
}

Você também pode encurtar o for usando um for/in.

 

Exemplo:

novoArray = ean.split(',');
           
for(indice = novaArray)
{
	div.innerHTML += '<img src="'+url+""+novaArray[indice]+''+ext+'" />';
}

 

Obs..:No javascript o array são objetos. E objeto são atribuídos por referência. Seja com o uso do igual, seja através de passagem de argumento em uma função.

 

Share this post


Link to post
Share on other sites

@gabrielms Muito obrigado, além de ter entendido com clareza sua explicação agora meu script funcionou perfeitamente. 

Estou quebrando a cabeça com outra coisa agora: Quero obter o tamanho "real" da imagem que estou buscando no link e criar um condicional quando a altura for igual a 0px a imagem não seja exibida, e caso for mair que 0px ai sim possa ser exibida. Isso porque quando começo a executar os códigos algumas imagens não são encontradas e retorna com aquela imagem padrão de erro. Já achei diversos códigos na internet que me possibilitou obter o tamanho real da imagem, mas quando tento criar a condicional não funciona.

Share this post


Link to post
Share on other sites

@gabrielms Agora gerou outro problema, as imagens estão vindo duplicadas, vou inserir abaixo o script como ficou.

 

function loadImgs() {
  /*--- Dados do formulário ---*/
  var dataform = document.forms[0] || document.forms['dados'];
  //var t = dataform.imgtotal.value;
  var url = dataform.url.value;
  var ext = dataform.ext.value;
  dataform.buscar.disabled = true;

  /*--- Gerar IMGS ---*/
  var div = document.getElementById('dl_imgs') || document.dl_imgs;
  div.innerHTML = "";

  var ean = dataform.ean.value;

  novoArray = ean.split(',');

  for (var i = 0; i < novoArray.length; i++) {

    urlImg = url + novoArray[i] + ext;

    let img = document.createElement('img');

    img.src = urlImg;

    img.onload = function () {
      div.innerHTML += '<div onclick="removerImage(this)" class="dl_imgs-wrap"><img class="imgs" id="" src="' + img.src + '" /><p style="width: 230px; float=: left; font-size: 12px; margin:0px; margin-top:5px;">'+img.width+" x "+img.height+'<span style="float:right;"></span></p></div>';
      //alert(`Image loaded, size ${img.width}x${img.height}`);

    };
  }
}

 

Share this post


Link to post
Share on other sites

@mpcarvalho Eu não encontrei esse erro de duplicata, mas pode ser um problema de duplo click.

 

Uma coisa que eu notei, é que você acaba criando dois elemento img. Você cria o elemento img e depois adiciona um src(link) e um evento de onload, que está funcionado sem problemas, porem quando você vai adicionar na div, você acaba criando outro elemento img sem a necessidade.

let img = document.createElement('img'); // Primeiro elemento img
div.innerHTML += `
<div onclick="removerImage(this)" class="dl_imgs-wrap">
  <img class="imgs" id="" src="${img.src}" /><!-- Segundo elemento img-->
  <p style="width: 230px; float=: left; font-size: 12px; margin:0px; margin-top:5px;">${img.width} x ${img.height}<span style="float:right;"></span></p>
</div> `;

 

Eu fiz um exemplo para caso você queira dar uma olhada: https://codepen.io/morto/pen/pozgwZJ

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<title>IMG LOAD</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://kit.fontawesome.com/a076d05399.js"></script>
		<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
		<style>
			html, body{
				width: 100%;
				height: 100%;
				padding: 0px;
				margin: 0px;
				background: #323232;
				font-family: 'Roboto', sans-serif;
				overflow-y: hidden;
			}

			div.container{
				overflow-y: auto;
				display: block;
				height: 100%;
			}

			#demo{
				padding: 20px;
				display: flex;
  				flex-wrap: wrap;
				text-align: center;
				align-content: center;
				justify-content: center;
			}

			#demo > div{
				width: 240px;
				height: 240px;
				padding: 5px;
				background: #242424;
				overflow: hidden;
				margin: 10px;
				text-align: center;
				overflow-wrap: break-word;
				color: #fff;
			}

			#demo > div > img{
				width: 100%;
				height: 100%;
				margin: 0px;
			}

			a.btn{
				font-size: 36px;
				text-decoration: none;
				color:#ccc;
				text-align: center;
			}

			div.modal{
				display: none;
				position: fixed;
				z-index: 1;
				padding-top: 100px;
				left: 0;
				top: 0;
				width: 100%; 
				height: 100%; 
				overflow: auto; 
				background-color: rgb(0, 0, 0); 
				background-color: rgba(0, 0, 0, 0.9); 
			}

			div.modal > div.modal-container{
				margin: auto;
				display: block;
				width: 80%;
				max-width: 720px;
			}
			
			form[name="pesquisar"]{
				background: #191919;
				color: #fff;
				padding: 20px;
				display: block;
			}

			form[name="pesquisar"] > div > label{
				width: 100%;
				margin: 0px;
				padding: 0px;
				border: 0px;
			}

			form[name="pesquisar"] > div > input{
				margin: 5px 0px;
				padding: 5px 0px;
				border: 0px;
				width: 100%;
			}

			div.modal-container, #demo > div{ 
				animation-name: zoom;
				animation-duration: 0.6s;
			}

			@keyframes zoom{
				from {
					transform:scale(0)
				} 
				to {
					transform:scale(1)
				}
			}

			.btn-close{
				position: absolute;
				top: 15px;
				right: 35px;
				color: #f1f1f1;
				font-size: 40px;
				font-weight: bold;
				transition: 0.3s;
			}

			.btn-close:hover, .btn-close:focus{
				color: red;
				text-decoration: none;
				cursor: pointer;
			}

			@media only screen and (max-width: 720px){
				div.modal-container{
					width: 100%!important;
				}
			}


		</style>
	</head>
    <body>
		<div style="text-align: center; padding: 10px; background: #191919;">
			<a href="javascript:void(0)" onclick="document.getElementsByClassName('modal')[0].style.display = 'block';" class="btn open"><i class="far fa-file-image"></i> Carregar imagens</a>
			<a href="javascript:void(0)" style="display: none;" class="btn load" ><i class="fas fa-sync fa-spin" style="font-size:24px"></i> Carregando...</a>
		</div>
		<div class="container">
			<div id="demo">
			</div>
		</div>
		<div class="modal">
			<span class="btn-close" onclick="document.getElementsByClassName('modal')[0].style.display = 'none';" ><i class="fas fa-times"></i></span>
			<div class="modal-container">
			<form onsubmit="return false;" name="pesquisar">
				<div>
					<label>URL: </label>
					<input type="text" name="url" placeholder="URL do local das imagens, Exemplo: https://menusite.com/fotos/ "><br>
					<label>Imagens: </label>
					<input type="text" name="imagens" placeholder="Complemento dá url mais o nome e tipo da imagem, Exemplo: fotos1.jpg, fotos2.jpg "><br>
					<input type="submit" value="Carregar">
				</div>
			</form>
			</div>
		</div>
		<script>

			var demno, form;

			const verificador = {
				loop : null,
				elementoCerregados : 0,
				elementNumero : 0,
				elementErro : 0,
				verificar : function(x, y){
					document.getElementsByClassName("open")[0].style.display = "none";
					document.getElementsByClassName("load")[0].style.display = "block";
					this.elementoCerregados = y;
					this.elementNumero = x;
					this.loop = setInterval(function(){
						if(verificador.elementoCerregados == verificador.elementNumero)
						{
							document.getElementsByClassName("load")[0].style.display = "none";
							document.getElementsByClassName("open")[0].style.display = "block";
							clearInterval(verificador.loop);
							verificador.loop = null;
							verificador.elementoCerregados = 0;
							verificador.elementErro = 0;
							verificador.elementNumero = 0;
						}
					}, 1000);
				}
			}

			window.onload = function()
			{
				form = document.forms["pesquisar"];
				demno = document.getElementById("demo");

				form.addEventListener("submit", function(event)
				{
					let
						url = form["url"].value,
						imagens = form["imagens"].value;

					event.preventDefault();

					url.trim();
					imagens.trim();
					
					if(url == "")
					{
						return false;
					}

					if(imagens == "")
					{
						return false;
					}

					imagens = imagens.split(',');

					if (typeof imagens != "object" || imagens.length < 1)
					{
						return false;
					}
					
					carregarImgs(url, imagens);

					return false;
				});
			}

			function carregarImgs(url, imagens)
			{
				document.getElementsByClassName('modal')[0].style.display = "none";
				elmentosCarregados = 0;
				verificador.verificar(imagens.length, 0);

				for (i in imagens){
					let
						elemtentImg = document.createElement("img");
						tempo = i * 500;

					elemtentImg.setAttribute("delay", tempo);

					elemtentImg.onerror = function(){
						let elementDiv = document.createElement("div");
						elementDiv.innerHTML = ("Ocorreu um erro no load dessa Imagem : "+this.src);
						setTimeout(function(){
							demno.appendChild(elementDiv);
							verificador.elementoCerregados++;
						}, this.getAttribute("delay"));
						verificador.elementErro++;
					}

					elemtentImg.src = url + imagens[i];

					elemtentImg.onload = function()
					{
						let elementDiv = document.createElement("div");
						elementDiv.appendChild(this)
						setTimeout(function(){
							demno.appendChild(elementDiv);
							verificador.elementoCerregados++;
							elemtentImg.removeAttribute("delay");
							
						}, this.getAttribute("delay"));
					}

				}

			}

		</script>
    </body>
</html>

 

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By DinhoPHP
      Olá!
      Não consigo entender o porque a minha função cadValor() funciona e a desc() não
       
      file.js
      <script> var txtval = document.querySelector('#inputValor'); var res = document.querySelector('#inputCopyValor'); //ONDE QUERO ESCREVER var res2 = document.querySelector('#seuValor'); // VALOR INDO PARA HOLERITE var res3 = document.querySelector('#seuValorMult'); // VALOR QUE SERÁ DOBRADO function cadValor(){ var val = Number(txtval.value); res.placeholder = val.toFixed(2); res2.placeholder = val.toFixed(2); var dobro = val * 2; // dobra o valor res3.placeholder = dobro.toFixed(2); // pega o valor dobrado } function desc(){ var txtDobro = document.querySelector('#seuValorMult'); // VALOR QUE FOI DOBRADO var txtSacado = document.querySelector('#seuValorDia2'); var txtRestante = document.querySelector('#seuValorRes'); var resDobro = Number(txtDobro.value); var resSacado = Number(txtSacado.value); //var resRestante = Number(txtRestante.value); var resRest = resDobro; txtRestante.placeholder = resRest.toFixed(2); } </script> file.php
      <div class="container"> <!-- PRIMEIRA LINHA --> <div class="d-flex justify-content-center mt-3"> <div id="divHolerite" class="col-12 col-sm-8 col-md-6 col-lg-4"> <div class="d-flex flex-column justify-content-center align-items-end bg-dark"> <div class="col-12 mb-3"> <label for="inputValor">Admin: Cadastrar Valor</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValor" class="form-control" type="text" name="inputValor" onkeypress="return onlynumber();"> <button type="submit" value="ativa" class="btn btn-danger text-uppercase ml-3" data-toggle="modal" data-target="#modalHolerite" onclick="cadValor()">ativa</button> </div> </div> <div class="col-12"> <button type="reset" value="clean" class="btn btn-light btn-lg text-uppercase mb-3">apagar cadastro</button> </div> <hr style="background-color: #777777; widht: 100%;"> </div> <!-- SEGUNDA LINHA --> <div class="d-flex flex-column flex-nowrap align-items-start bg-dark mb-3"> <div class="col-8 mb-3"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputCopyValor" class="form-control" type="text" name="inputCopyValor" placeholder="" readonly> </div> </div> <div class="col-12 mb-3"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValorDia" class="form-control" type="text" name="inputValorDia" placeholder="0,10" readonly> <div class="input-group-prepend"> <span class="input-group-text">por dia</span> </div> <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm ml-3">sacar</button> </div> <div class="d-flex"> <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm mr-3">descontar</button> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValorDesc" class="form-control" type="text" name="inputValorDesc"> </div> </div> </div> </div> </div> </div> <!-- HOLERITE --> <!-- Modal --> <div class="modal fade" id="modalHolerite" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <!-- HOLERITE --> <div class="container"> <!-- PRIMEIRA LINHA --> <div id="test" class="d-flex justify-content-center mt-3"> <div id="divHolerite" class="col-12 col-md-10 col-lg-8"> <div class="d-flex flex-column justify-content-center align-items-end bg-dark"> <div class="col-12 mb-3"> <h2 class="text-uppercase text-center text-white">holerite</h2> <div class="row"> <div class="col-12 col-sm-6"> <label for="seuValor" class="text-left text-uppercase">seu valor</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValor" class="form-control" type="number" name="seuValor" placeholder=""> </div> </div> <div class="col-12 col-sm-6"> <label for="inputValorDia" class="text-left text-uppercase">total: 200 dias</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValorDia" class="form-control" type="number" name="inputValorDia"> <div class="input-group-prepend"> <span class="input-group-text">por dia</span> </div> </div> </div> <div class="col-12 col-sm-6"> <label for="seuValorMult" class="text-left text-uppercase">valor multiplicado</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorMult" class="form-control" type="number" name="seuValorMult"> </div> </div> </div> </div> <hr style="background-color: #777777; widht: 100%;"> </div> <!-- SEGUNDA LINHA --> <div class="d-flex flex-column justify-content-center bg-dark mb-3" style="padding-left: 10px; padding-right: 0px;"> <div class="row overflow-visible"> <div class="col-12 col-sm-4"> <span class="text-white font-data">00/00/2019:</span> </div> <div class="col-12 col-sm-8"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorDia2" class="form-control" type="number" name="seuValorDia2" placeholder="0,10" readonly> <div class="input-group-prepend"> <span class="input-group-text">por dia</span> </div> <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm ml-3 mr-2" onclick="desc()">sacar</button> </div> </div> </div> <div class="form-row col-12" style="border: 2px white solid;"> <div class="col-12 col-sm-6"> <label for="seuValorSacado" class="text-left text-uppercase"><br></label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorSacado" class="form-control" type="number" name="seuValorSacado"> </div> <label for="seuValorSacado" class="text-center text-uppercase">valor sacado</label> </div> <div class="col-12 col-sm-6"> <label for="seuValorRes" class="text-center text-uppercase" style="margin-left: 5vw;">seu valor restante</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorRes" class="form-control" type="number" name="seuValorRes" placeholder="" readonly> </div> <label for="seuValorRes" class="text-center text-uppercase" style="margin-left: 10vw;">pra saque</label> </div> </div> </div> <!-- Termina linha geral --> </div> <!-- FIM DO HOLERITE --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>  
    • By Impermeabilidade
      Alguem conseguiria me mandar um tutorial que me ajudasse na geração de relatorios em pdf?
    • By DinhoPHP
      estou há horas tentando utilizar o Carousel do Bootstrap para exibir produtos. Fiz sozinho não funcionou, então encontrei este código https://codepen.io/kreigd/pen/ybYNoN coloquei em um arquivo sozinho, separado do site que estou desenvolvendo e nem assim funciona. Fica assim: http://equipenovainfo.com.br/_portifolio/amanda/31_07_2019/carousel_prod.php
       
      Segue o código:
      <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> $(document).ready(function() { $("#myCarousel").on("slide.bs.carousel", function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 3; var totalItems = $(".carousel-item").length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $(".carousel-item") .eq(i) .appendTo(".carousel-inner"); } else { $(".carousel-item") .eq(0) .appendTo($(this).find(".carousel-inner")); } } } }); }); </script> </head> <body> <div class="container-fluid"> <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto"> <div class="carousel-item col-md-4 active"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 1</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 2</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 3</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 4</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 5</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 6</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 7</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> Preciso terminar esse trabalho, travei nisso. Me ajudará à pagar a faculdade e ganharei tempo para estudar. 
    • By tiagosp
      Olá, dentro do meu documento html tenho o seguinte elemento:
      <select class="custom-select mr-sm-2" id="txtStatus"> <option>false</option> <option>true</option> </select> Para enviar o valor do grid a esse campo utilizo o seguinte código
      $("#txtStatus").find('option:selected').val(linha[4]); Porém, se o valor setado é true, o campo select fica com os com valores repetidos...
      true
      true
      Como posso passar o valor para esse campo sem alterar sua composição?
    • By proflupin
      Tenho um menu em que ao passar o mouse sobre cada elemento, ele altera a cor de uma div invisível logo abaixo.
       
      Por exemplo:
      Menu normal:

       
      Menu ao passar o mouse em uma categoria:

      e

       
      Para tal, eu desenvolvi o seguinte código em js com os eventos onmouseover e onmouseleave em minhas categorias:
      <script type="text/javascript"> function mudaCor1() { var cor = 'red'; document.getElementById('div1').style.backgroundColor = cor; } function mudaCor2() { var cor = 'red'; document.getElementById('div1').style.backgroundColor = cor; } function mudaCor3() { var cor = 'green'; document.getElementById('div1').style.backgroundColor = cor; } function mudaCor4() { var cor = 'black'; document.getElementById('div1').style.backgroundColor = cor; } function mudaCor5() { var cor = 'orange'; document.getElementById('div1').style.backgroundColor = cor; } function mudaCor6() { var cor = 'brown'; document.getElementById('div1').style.backgroundColor = cor; } function mudaCor7() { var cor = 'yellow'; document.getElementById('div1').style.backgroundColor = cor; } function mudaCor8() { var cor = 'pink'; document.getElementById('div1').style.backgroundColor = cor; } function mudaCor9() { var cor = 'purple'; document.getElementById('div1').style.backgroundColor = cor; } function mudaCor10() { var cor = 'grey'; document.getElementById('div1').style.backgroundColor = cor; } function devolvecor() { var cor = 'white'; document.getElementById('div1').style.backgroundColor = cor; } </script>  
      Gostaria de lhes perguntar. Existe uma outra maneira mais simplificada com menos códigos para desenvolver a mesma funcionalidade?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.