Jump to content

Recommended Posts

Olá pessoal, estou com um projeto onde no mesmo existe 11 categorias e vários modelos para cada categoria, as categorias e modelos são apresentadas por meio de imagens em miniaturas (OBS: as imagens são dispostas em duas colunas), onde ao clicar numa categoria abre os modelos existentes, esta parte esta funcionando perfeitamente, porém o que necessito fazer é limitar a exibição das categorias e modelo para uma área de no máximo 1000px, que seria umas 6 ou 7 imagens aproximadamente e adicionar botões de navegação para passar entre os itens..

 

Abaixo segue o código da página:

	<div id="menu" class="pecasmain">

		<input type="hidden" id="idlinha" name="idlinha" value="0">
		<input type="hidden" id="idmodelo" name="idmodelo" value="0">
		<div id="menuLinhas" class="menuLinhas">
				<h3>LINHAS</h3>

				<a id="linha1" idreg="225" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000000225_01_gd.jpg" />
					<span class="linknaoselecionado">Adubadoras Pendulares</span>
				</a>

				<a id="linha2" idreg="62" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000000062_01_gd.jpg" />
					<span class="linknaoselecionado">Mini Pá Carregadeira e Mini Retro Escavadeira</span>
				</a>

				<a id="linha3" idreg="63" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000000063_01_gd.jpg" />
					<span class="linknaoselecionado">Manejo de solo e trituração de poda: </span>
				</a>

				<a id="linha4" idreg="61" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000000061_01_gd.jpg" />
					<span class="linknaoselecionado">Adubadoras mono disco</span>
				</a>

				<a id="linha5" idreg="242" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000000242_01_gd.jpg" />
					<span class="linknaoselecionado">Recolhedora de terreiro</span>
				</a>

				<a id="linha6" idreg="246" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000000246_01_gd.jpg" />
					<span class="linknaoselecionado">Enlerador e soprador</span>
				</a>

				<a id="linha7" idreg="59" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000000059_01_gd.jpg" />
					<span class="linknaoselecionado">Adubadoras de 2 discos</span>
				</a>

				<a id="linha8" idreg="10419" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000010419_01_gd.jpg" />
					<span class="linknaoselecionado">Adubadora cafeeira e citrus</span>
				</a>

				<a id="linha9" idreg="65" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000000065_01_gd.jpg" />
					<span class="linknaoselecionado">Recolhedora e abonadora de chão</span>
				</a>

				<a id="linha10" idreg="9039" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000009039_01_gd.jpg" />
					<span class="linknaoselecionado">Podadora</span>
				</a>

				<a id="linha11" idreg="16321" href="JavaScript: void(0);" class="linklinha">
					<img src="../imgs_categorias/img_0000016321_01_gd.jpg" />
					<span class="linknaoselecionado">Braço de retro agrícola</span>
				</a>

		</div>

		<div id="menuModelos0" class="menuModelos">
			<h3>MODELOS</h3>
			<span>Selecione uma LINHA no menu à esquerda.</span>
		</div>

			<div id="menuModelos225" class="menuModelos" style="display: none;">
				<h3>Adubadoras Pendulares</h3>

					<a href="#" id="modelo1" idreg="69" class="linkmodelo">
						<img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000069_01_gd.jpg" />
					<span class="linknaoselecionado"> PS 203</span></a>

					<a href="#" id="modelo2" idreg="232" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000232_01_gd.jpg" />
					<span class="linknaoselecionado"> PS / PSPP 303</span></a>

					<a href="#" id="modelo3" idreg="235" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000235_01_gd.jpg" />
					<span class="linknaoselecionado">PS / PSPP 403</span></a>

					<a href="#" id="modelo4" idreg="236" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000236_01_gd.jpg" />
					<span class="linknaoselecionado">PS 503</span></a>

					<a href="#" id="modelo5" idreg="237" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000237_01_gd.jpg" />
					<span class="linknaoselecionado">PS / PSPP 603</span></a>

					<a href="#" id="modelo6" idreg="233" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000233_01_gd.jpg" />
					<span class="linknaoselecionado">PS 753</span></a>

					<a href="#" id="modelo7" idreg="234" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000234_01_gd.jpg" />
					<span class="linknaoselecionado">PS 953</span></a>

					<a href="#" id="modelo8" idreg="238" class="linkmodelo"><img id="img8" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000238_01_gd.jpg" />
					<span class="linknaoselecionado">PS 1153</span></a>

					<a href="#" id="modelo9" idreg="239" class="linkmodelo"><img id="img9" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000239_01_gd.jpg" />
					<span class="linknaoselecionado">PS 1353</span></a>

					<a href="#" id="modelo10" idreg="240" class="linkmodelo"><img id="img10" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000240_01_gd.jpg" />
					<span class="linknaoselecionado">PS 1553T</span></a>

					<a href="#" id="modelo11" idreg="16808" class="linkmodelo"><img id="img11" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016808_01_gd.jpg" />
					<span class="linknaoselecionado">Pendulum</span></a>

			</div>

			<div id="menuModelos62" class="menuModelos" style="display: none;">
				<h3>Mini Pá Carregadeira e Mini Retro Escavadeira</h3>

					<a href="#" id="modelo1" idreg="88" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000088_01_gd.jpg" />
					<span class="linknaoselecionado">PX 04 Mini Pá carregadeira</span></a>

					<a href="#" id="modelo2" idreg="89" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000089_01_gd.jpg" />
					<span class="linknaoselecionado">RX 04 Mini Retro escavadeira</span></a>

			</div>

			<div id="menuModelos63" class="menuModelos" style="display: none;">
				<h3>Manejo de solo e trituração de poda: </h3>

					<a href="#" id="modelo1" idreg="86" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000086_01_gd.jpg" />
					<span class="linknaoselecionado">TRSL 90</span></a>

					<a href="#" id="modelo2" idreg="87" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000087_01_gd.jpg" />
					<span class="linknaoselecionado">TRSL 90E</span></a>

					<a href="#" id="modelo3" idreg="251" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000251_01_gd.jpg" />
					<span class="linknaoselecionado">TRV 100 </span></a>

					<a href="#" id="modelo4" idreg="252" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000252_01_gd.jpg" />
					<span class="linknaoselecionado">TRV 120</span></a>

					<a href="#" id="modelo5" idreg="16615" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016615_01_gd.jpg" />
					<span class="linknaoselecionado">TRL 120</span></a>

					<a href="#" id="modelo6" idreg="258" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000258_01_gd.jpg" />
					<span class="linknaoselecionado">TRL 140</span></a>

					<a href="#" id="modelo7" idreg="259" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000259_01_gd.jpg" />
					<span class="linknaoselecionado">TRL 160</span></a>

					<a href="#" id="modelo8" idreg="260" class="linkmodelo"><img id="img8" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000260_01_gd.jpg" />
					<span class="linknaoselecionado">TRL 180</span></a>

					<a href="#" id="modelo9" idreg="261" class="linkmodelo"><img id="img9" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000261_01_gd.jpg" />
					<span class="linknaoselecionado">TRL 200</span></a>

					<a href="#" id="modelo10" idreg="262" class="linkmodelo"><img id="img10" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000262_01_gd.jpg" />
					<span class="linknaoselecionado">TRL 220</span></a>

					<a href="#" id="modelo11" idreg="254" class="linkmodelo"><img id="img11" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000254_01_gd.jpg" />
					<span class="linknaoselecionado">TRP 120</span></a>

					<a href="#" id="modelo12" idreg="255" class="linkmodelo"><img id="img12" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000255_01_gd.jpg" />
					<span class="linknaoselecionado">TRP 160H</span></a>

					<a href="#" id="modelo13" idreg="253" class="linkmodelo"><img id="img13" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000253_01_gd.jpg" />
					<span class="linknaoselecionado">TRLA 180 </span></a>

					<a href="#" id="modelo14" idreg="15868" class="linkmodelo"><img id="img14" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000015868_01_gd.jpg" />
					<span class="linknaoselecionado">TRLA 140</span></a>

					<a href="#" id="modelo15" idreg="257" class="linkmodelo"><img id="img15" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000257_01_gd.jpg" />
					<span class="linknaoselecionado">TRS 360</span></a>

					<a href="#" id="modelo16" idreg="256" class="linkmodelo"><img id="img16" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000256_01_gd.jpg" />
					<span class="linknaoselecionado">TRC 220</span></a>

					<a href="#" id="modelo17" idreg="10327" class="linkmodelo"><img id="img17" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010327_01_gd.jpg" />
					<span class="linknaoselecionado">TRSL 1,50</span></a>

					<a href="#" id="modelo18" idreg="2947" class="linkmodelo"><img id="img18" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000002947_01_gd.jpg" />
					<span class="linknaoselecionado">TRL 140 RS</span></a>

			</div>

			<div id="menuModelos61" class="menuModelos" style="display: none;">
				<h3>Adubadoras mono disco</h3>

					<a href="#" id="modelo1" idreg="85" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000085_01_gd.jpg" />
					<span class="linknaoselecionado">Giro 400/600</span></a>

					<a href="#" id="modelo2" idreg="81" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000081_01_gd.jpg" />
					<span class="linknaoselecionado">Giro 400/600 INOX</span></a>

			</div>

			<div id="menuModelos242" class="menuModelos" style="display: none;">
				<h3>Recolhedora de terreiro</h3>

					<a href="#" id="modelo1" idreg="243" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000243_01_gd.jpg" />
					<span class="linknaoselecionado">VRC 1600</span></a>

					<a href="#" id="modelo2" idreg="10245" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010245_01_gd.jpg" />
					<span class="linknaoselecionado">Varredor Hidraulico 2.6 Para Terreiro de Café</span></a>

					<a href="#" id="modelo3" idreg="10421" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010421_01_gd.jpg" />
					<span class="linknaoselecionado">Varredor Hidráulico 3.6 Para Terreiro de Café</span></a>

					<a href="#" id="modelo4" idreg="13270" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013270_01_gd.jpg" />
					<span class="linknaoselecionado">Varredor Hidráulico 2.6 Para Terreiro de Café Com Pistão Hid</span></a>

					<a href="#" id="modelo5" idreg="13693" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013693_01_gd.jpg" />
					<span class="linknaoselecionado">Varredor Hidráulico 3.6 Para Terreiro de Café Com Pistão Hid</span></a>

			</div>

			<div id="menuModelos246" class="menuModelos" style="display: none;">
				<h3>Enlerador e soprador</h3>

					<a href="#" id="modelo1" idreg="13885" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013885_01_gd.jpg" />
					<span class="linknaoselecionado">Varrecafé Traseiro Simples Geração 2C </span></a>

					<a href="#" id="modelo2" idreg="14055" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014055_01_gd.jpg" />
					<span class="linknaoselecionado">Varrecafé Traseiro Duplo Geração 2C</span></a>

					<a href="#" id="modelo3" idreg="14491" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014491_01_gd.jpg" />
					<span class="linknaoselecionado">Varrecafé Duplo G2 Caixa Dupla</span></a>

					<a href="#" id="modelo4" idreg="14351" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014351_01_gd.jpg" />
					<span class="linknaoselecionado">Varrecafé Simples G2 Caixa Dupla </span></a>

					<a href="#" id="modelo5" idreg="247" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000247_01_gd.jpg" />
					<span class="linknaoselecionado">Cleaner café/ RTF Dual</span></a>

					<a href="#" id="modelo6" idreg="248" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000248_01_gd.jpg" />
					<span class="linknaoselecionado">Cleaner maçã / citrus</span></a>

					<a href="#" id="modelo7" idreg="9042" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009042_01_gd.jpg" />
					<span class="linknaoselecionado">Soprador</span></a>

			</div>

			<div id="menuModelos59" class="menuModelos" style="display: none;">
				<h3>Adubadoras de 2 discos</h3>

					<a href="#" id="modelo1" idreg="74" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000074_01_gd.jpg" />
					<span class="linknaoselecionado">TDS 750</span></a>

					<a href="#" id="modelo2" idreg="75" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000075_01_gd.jpg" />
					<span class="linknaoselecionado">TDS 950</span></a>

					<a href="#" id="modelo3" idreg="76" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000076_01_gd.jpg" />
					<span class="linknaoselecionado">TDS 1150</span></a>

					<a href="#" id="modelo4" idreg="73" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000073_01_gd.jpg" />
					<span class="linknaoselecionado">TDS 1350</span></a>

					<a href="#" id="modelo5" idreg="72" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000072_01_gd.jpg" />
					<span class="linknaoselecionado">TDS 1550</span></a>

					<a href="#" id="modelo6" idreg="71" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000071_01_gd.jpg" />
					<span class="linknaoselecionado">Vibraflow II</span></a>

			</div>

			<div id="menuModelos10419" class="menuModelos" style="display: none;">
				<h3>Adubadora cafeeira e citrus</h3>

					<a href="#" id="modelo1" idreg="10420" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010420_01_gd.jpg" />
					<span class="linknaoselecionado">MX 2100</span></a>

			</div>

			<div id="menuModelos65" class="menuModelos" style="display: none;">
				<h3>Recolhedora e abonadora de chão</h3>

					<a href="#" id="modelo1" idreg="9343" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009343_01_gd.jpg" />
					<span class="linknaoselecionado">Catacafé </span></a>

			</div>

			<div id="menuModelos9039" class="menuModelos" style="display: none;">
				<h3>Podadora</h3>

					<a href="#" id="modelo1" idreg="9040" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009040_01_gd.jpg" />
					<span class="linknaoselecionado">Podadora</span></a>

			</div>

			<div id="menuModelos16321" class="menuModelos" style="display: none;">
				<h3>Braço de retro agrícola</h3>

					<a href="#" id="modelo1" idreg="16322" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016322_01_gd.jpg" />
					<span class="linknaoselecionado">BRM BRAÇO MÓVEL </span></a>

					<a href="#" id="modelo2" idreg="16423" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016423_01_gd.jpg" />
					<span class="linknaoselecionado">BRF BRAÇO FIXO </span></a>

			</div>

			<div id="pecasHome" class="pecasConteudo">
				<img src="../img/pecas.jpg" />
				<img src="../img/diversas-pecas.jpg" />
				<div id="desconto">
					<p class="desconto">
						Desconto de 3% para compras efetuadas em nosso site.
					</p>
				</div>
			</div>

			<div id="pecasConteudo" class="pecasConteudo" style="display: none;"></div>

			<br style="clear: both;"/>
	
	<iframe id="frameprocessa" name="frameprocessa" style="width: 0px; height: 0px; visibility: hidden; "></iframe>
		<!--<script src="../js/jquery-3.4.1.min.js"></script>-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

			<script language="Javascript">

			$(document).ready(function() {
				$(".linklinha").click(function(e) {
					$("#menuLinhas > a > span").removeClass ( 'linkselecionado' );
					$("#menuLinhas > a > span").addClass ( 'linknaoselecionado' );
					$(this).find('span').addClass('linkselecionado');
					var idreg	=	parseInt($(this).attr("idreg"));
					// Esconde Todas Divs Modelos
					$.each($(".menuModelos"), function(e) {
						$(this).hide();
					});
					// Exibe Div Modelo
					$("#menuModelos"+idreg).show();
					//console.log("idreg= " + idreg);
					$("#menuModelos"+idreg+" > a > span").removeClass ( 'linkselecionado' );
					$("#menuModelos"+idreg+" > a > span").addClass ( 'linknaoselecionado' );
					// Ajusta Foco
					$("#menuModelos"+idreg+" #modelo1").focus();

					$("#pecasConteudo").hide();
					$("#pecasHome").show();

					//	Seta Deselecionada Modelo
					$("#idlinha").val(idreg);
					$("#idmodelo").val(0);
				});

				$(".linkmodelo").click(function(e) {
					var idlinha		=	parseInt($("#idlinha").val());
					$("#menuModelos"+idlinha+" > a > span").removeClass ( 'linkselecionado' );
					$("#menuModelos"+idlinha+" > a > span").addClass ( 'linknaoselecionado' );
					$(this).find('span').addClass('linkselecionado');
					$("#pecasHome").hide();
					//alert('Vai carregar DETALHES do MODELO IDREG: ' + $(this).attr("idreg"));
					$("#pecasConteudo").load( "carrega_pecas_detalhe.html?id="+ $(this).attr("idreg"), function( response, status, xhr ) {
						if ( status == "error" ) {
							console.log("#error" + xhr.status + " " + xhr.statusText );
						}
					});
					$("#pecasConteudo").show();
				});

				function initPage() {
					console.log('Carregou Linhas OK !');
					var idlinha		=	parseInt($("#idlinha").val());
					var idmodelo	=	parseInt($("#idmodelo").val());
					// Esconde Todas Divs Modelos
					$.each($(".menuModelos"), function(e) {
						$(this).hide();
					});
					// Exibe Div Modelo
					$("#menuModelos"+idlinha).show();
				}
				initPage();
			});

		</script>

Se alguém puder me ajudar, pois esse pequeno detalhe ta me tomando um grande tempo e atrasando o projeto.

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 studdiox
      Ola pessoal tudo certo ... tenho um problema com um script que pode ajudar muita gente 
      ele da um preview das imagens carregadas em um form de upload ele funciona mas só da o preview
      de uma imagem quando carrega ... se eu colocar o formulário em multiple ele exibe todas as imagens selecionadas 
      antes de fazer o upload para o banco de dados, mas se eu deixar a seleção normal ou seja
      uma imagem por vez,  ele não carrega o restante das imagens, apenas a primeira, vou por o
      código abaixo completo funcionando com o multiple se alguém ai conseguir me ajudar a mudar ele
      para exibir cada imagem carregada separadamente eu agradeço e vai ajudar muita gente também 
       
       
      <html> <head> <style type="text/css"> .thumb-image{ float:left;width:100px; position:relative; padding:5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" multiple="multiple" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html> No meu caso ele ficaria assim
       
       
       
      <html> <head> <style type="text/css"> .thumb-image { float: left; width: 100px; position: relative; padding: 5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html>  
       
       
       
    • By Marxrj
      Olá a todos!,
      Queria aqui uma dica se alguém sabe como alinhar fotos no centro pelo bootstrap.
      Usando o padrão fotos retratos fica como abaixo
      __________  __________
      __________
       
      Mas eu queria que quando tivesse um número impar, a foto não ficasse alinhada na esquerda e sim centralizada como abaixo
      __________  __________
                __________
       
      Estou usando este padrão abaixo aonde ele alinha duas fotos ao lado, mas quando tem somente um ou em número impar, essa não centraliza e sim fica a esquerda.
      <div class="col-xs-12 col-sm-10 col-lg-6 col-md-3">
    • By Overtron8000
      Ola Pessoas,
      Recentemente fiz uma prova para Desenvolvedor Javascript jr em uma empresa e tinha varias questões para escrever o código NA MÃO  e uma delas me deixou encabulado por exigirem que um junior saiba de cór isso era a seguinte pergunta:
       
      Dado o JSON abaixo construa um código que faça o calculo da media do parâmetro "time"  quando "type" for semelhante a "call" e o máximo valor para "time" quando "type for semelhante a "ping". Considere que o array events poderá conter milhões de objetos portanto seu código deve levar em consideração o processamento assíncrono do Node.js de forma que o resultado seja síncrono, ou seja, o codigo so deve completar quando o resultado do s cálculos estiverem prontos.
      JSON : events = { [ {type:"ping", time :10) [ {type:"ping", time: 5) [ {type:"call", time: 99) [ {type:"call", time: 67) [ {type:"ping", time: 7) [ {type:"call", time: 127) }  
      Isso tudo para fazer no resto da folha que sobrou alem da pergunta, se alguém saber uma solução poste ai que estou curioso ate hoje, sei que leva o conceito de promisses assíncronas mas ainda não cheguei nessa parte
       
       
       
       
                                   
       
       
    • By RSN
      Boa noite,
      Gostaria de após selecionar o produto carregasse outro select informando os preços(tabela produto), com javascript fazendo requisição para a servlet.
      div class="form-group col-md-4"> <label for="exampleInputEmail1">Produto</label> <select class="form-control select2" style="width: 100%;" id="id_produto" name="id_produto"> <option value="nao_informado">Selecione</option> <c:forEach items="${produto}" var="product"> <option value="${product.id}" id="${product.id}" <c:if test="${product.id == orcament.id_produto}"> <c:out value = "selected=selected" /> </c:if>> ${product.descricao}</option> </c:forEach> </select> </div> <div class="form-group col-md-1"> <label for="exampleInputEmail1">Tabela/Precos</label> <select class="form-control select2" style="width: 100%;" id="id_table" name="id_table" > <option value="nao_informado">Selecione</option> </select> </div>  
    • By agodiniz
      Fala galera, estou com um problema e não sei como resolver. Até encontrei umas respostas, mas utilizando Php e Mysql. Preciso que a resposta seja utilizando as tecnologias javascript (node) e Mysql.
      Gostaria de capturar dados de um formulário utilizando array e salvando o mesmo num banco de dados.
       
      Ex:
      Imagine um 3 inputs do tipo text que recebem um valor que é inserido pelo cliente e que cada input, possa receber valores diferentes (como se cada um fosse uma variável 'titulo', 'conteudo' e 'autor')
      quero que depois que o cliente enviar os dados que por ele foram inputados, esses dados sejam enviados para as variáveis 'titulo', 'conteudo' e 'autor'.
      Logo depois quero declarar um array que receba essas variáveis [titulo, conteudo, autor] e desejo armazenar o array no banco de dados utilizando Mysql
       
      Desde já, agradeço!
×

Important Information

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