Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Robson Tenorio Henriques

Scroll de Imagens

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • Por violin101
      Caros amigos, saudações.

      Estou com uma pequena dúvida se é possível ser realizado.

      Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

      Observação:
      Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.
      <div class="card-body"> <table id="tab_clie" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center; width:10%;">Pedido Nº</th> <th style="text-align:center; width:10%;">Data Pedido</th> <th style="text-align:center; width:32%;">Fornecedor</th> <th style="text-align:center; width:10%;">Status</th> <th style="text-align:center; width:5%;">Ação</th> </tr> </thead> <tbody> <?php foreach ($results as $r) { $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido)); switch ($r->pd_status) { case '1': $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#000000'; //Cor: Preta break; case '2': $status = 'Atendido Total'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#086108'; //Cor: Verde break; case '3': $status = 'Atendido Parcial'; $txt = '#000000'; //Cor: Branco $cor = '#FEA118'; //Cor: Amarelo break; default: $status = 'Cancelado'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#D20101'; //Cor: Vermelho break; } echo '<tr>'; echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>'; echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>'; echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>'; echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>'; echo '<td width="5%" style="text-align:center;">'; ?> <div class="row"> <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button> </form> <?php } if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button> </form> <?php } ?> </div> <?php echo '</td>'; echo '</tr>'; } ?> </tbody> </table> </div>
      Grato,

      Cesar.
    • Por belann
      Olá!
       
      Estou usando o editor quill em uma página html, sem fazer a instalação com npm, mas usando as api´s via internet com http, no entanto não consigo fazer a tecla enter funcionar para mudança de linha, tentei essa configuração abaixo, mas não funcionou.
       
      modules: {       syntax: true,       toolbar: '#toolbar-container',       keyboard: {         bindings: {           enter: {             key: 13,             handler: function(range, context) {                       quill.formatLine(range.index, range.length, { 'align': '' });             }           }  
       
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de poder tirar uma dúvida com os amigos.
       
      Como faço uma função para Comparar a Data Digitada pelo o Usuário com a Data Atual ?

      Data Digitada:  01/09/2024
       
      Exemplo:
      25/09/2024 é menor que DATA Atual  ====> mensagem: informe uma data válida.
      25/09/2024 é igual DATA Atual ===> o sistema libera os INPUT's.
       
      Como faço uma comparação com a Data Atual, para não Deixar Gravar Data retroativa a data Atual.
       
      Grato,
       
      Cesar
×

Informação importante

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