Jump to content
teuzero

Como eu posso usar media query com Jquery no meu site?

Recommended Posts

Meu site é :https://xraros.000webhostapp.com/

 

To com seguinte problema eu adicionei esse código:

 

jQuery(document).ready(function() {
			if($(window).width()<=820)
		{
			
			$('#menu').hide();
		}
	});

no arquivo carrega.js com a intenção de ocultar o menu só quando a tela estive com 820px de largurar ou menos, mais isso não esta acontecendo, como podem ver no meu site esse script n esta funcionando ele ta ocultando o menu em todas as resoluções, como faço pra deixar o menu oculto na resolução de 820px pra baixo?

Share this post


Link to post
Share on other sites

@teuzero Bom ele está funcionando!

 

Bom para esse caso eu recomendo o uso de media no CSS, o que você já utiliza no seu CSS e só configurar ele para o menu.

 

Vou deixar alguns tutorial que podem te ajudar nessa construção do menu:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

https://www.w3schools.com/howto/howto_js_topnav.asp

https://www.w3schools.com/howto/howto_css_topnav_centered.asp

 

Uma coisa que eu notei no seu arquivo carrega.js, você repete a mesma função sem a necessidade.

$(document).ready(function(){ // <-- Aqui
	$(".busca").hide();
	$(".lupa").prepend("<img src='../img/lupa.png' class='lupa' /> ");	
	$(".lupa img").click(function(){
		if($(this).attr("src") == "img/x.png"){
			$(this).attr("src", "img/lupa.png")
			.siblings().hide();

	} else {
			$(this).attr("src", "img/x.png")
			.siblings().show();

	}
	if($('#menu').is(':visible')){
		$('#menu').hide();
	} else
	{
		$('#menu').show();
	}

	});

	jQuery(document).ready(function() { // <-- Aqui
		if($(window).width()<=820)
		{
			$('#menu').hide();
		}
    });     

Como ele faz a mesma coisa não tem o pq de deixa ele dentro do mesmo.

$(document).ready(function(){
	$(".busca").hide();
	$(".lupa").prepend("<img src='../img/lupa.png' class='lupa' /> ");	
  
	$(".lupa img").click(function(){
		if ($(this).attr("src") == "img/x.png")
        {
			$(this).attr("src", "img/lupa.png")
			.siblings().hide();
        }
      	else
      	{
        	$(this).attr("src", "img/x.png")
            .siblings().show();

        }
      
        if ($('#menu').is(':visible'))
        {
        	$('#menu').hide();
        }
      	else
        {
        	$('#menu').show();
        }
	});
  
	if($(window).width() <= 820)
	{	
		$('#menu').hide();
	}
});

 

Share this post


Link to post
Share on other sites
9 hours ago, gabrielms said:

@teuzero Bom ele está funcionando!

 

Bom para esse caso eu recomendo o uso de media no CSS, o que você já utiliza no seu CSS e só configurar ele para o menu.

 

Vou deixar alguns tutorial que podem te ajudar nessa construção do menu:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

https://www.w3schools.com/howto/howto_js_topnav.asp

https://www.w3schools.com/howto/howto_css_topnav_centered.asp

 

Uma coisa que eu notei no seu arquivo carrega.js, você repete a mesma função sem a necessidade.


$(document).ready(function(){ // <-- Aqui
	$(".busca").hide();
	$(".lupa").prepend("<img src='../img/lupa.png' class='lupa' /> ");	
	$(".lupa img").click(function(){
		if($(this).attr("src") == "img/x.png"){
			$(this).attr("src", "img/lupa.png")
			.siblings().hide();

	} else {
			$(this).attr("src", "img/x.png")
			.siblings().show();

	}
	if($('#menu').is(':visible')){
		$('#menu').hide();
	} else
	{
		$('#menu').show();
	}

	});

	jQuery(document).ready(function() { // <-- Aqui
		if($(window).width()<=820)
		{
			$('#menu').hide();
		}
    });     

Como ele faz a mesma coisa não tem o pq de deixa ele dentro do mesmo.


$(document).ready(function(){
	$(".busca").hide();
	$(".lupa").prepend("<img src='../img/lupa.png' class='lupa' /> ");	
  
	$(".lupa img").click(function(){
		if ($(this).attr("src") == "img/x.png")
        {
			$(this).attr("src", "img/lupa.png")
			.siblings().hide();
        }
      	else
      	{
        	$(this).attr("src", "img/x.png")
            .siblings().show();

        }
      
        if ($('#menu').is(':visible'))
        {
        	$('#menu').hide();
        }
      	else
        {
        	$('#menu').show();
        }
	});
  
	if($(window).width() <= 820)
	{	
		$('#menu').hide();
	}
});

 

essa função da parte do código que repeti e outra coisa que é pra quando alguém clicar na lupa.

o que eu to querendo fazer é criar outra função que ao clicar na imagem "barra" apareça o menu e depois quando clicar na imagem "x" a imagem barra volta sem o menu estar presente.Primeiro quero que na resolução 820 pra baixo não apareça o menu, só quero que apareça a imagem barra mesmo, eu vejo muitos sites assim mais não sei como eu faço isso. eu precisaria usar jquery pra fazer um animação com um outro menu que vou montar pra resolução abaixo de 820. :)

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 Rafaelmcd
      Olá, tenho um site em WordPress e preciso de uma regra para fazer um redirecionamento em massa, um redirecionamento 301.
      A regra seria mais ou menos assim, alterar links assim: https://site.com/blog/leia-top-games para https://site.com/blog/top-games
      Ou seja, precisa retirar o "leia-" de todos os link e redirecionar para o link novo.
      Alguém poderia me ajudar?
    • By Marcelodiehl
      Boa tarde,
      tenho um código php para envio de documentos para uma área do cliente e no admin onde eu realizo o upload dos documentos tem um input onoffswitch onde eu ativo ou desativo (Quando Ativo = "Mostrar na area dos clientes") mas quando envio um arquivo ele fica por default desativado, então tenho que ativar para que o cliente Visualize o documento. O que eu preciso é que este botão fique Ativado por default, mas não encontro no script onde mudo isso. Peço desculpas pela minha ignorancia em PHP, mas estou iniciando um curso esta semana, não sei muito ainda, mas já tenho este desafio. Alguém poderia me ajudar?
       
      <?php defined('BASEPATH') or exit('No direct script access allowed'); ?> <div class="modal fade" id="customer_file_share_file_with" data-total-contacts="<?php echo count($contacts); ?>" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title"><?php echo _l('share_file_with'); ?></h4> </div> <div class="modal-body"> <?php echo form_hidden('file_id'); ?> <?php echo render_select('share_contacts_id[]',$contacts,array('id',array('firstname','lastname')),'customer_contacts',array(get_primary_contact_user_id($client->userid)),array('multiple'=>true,'data-actions-box'=>true),array(),'','',false); ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo _l('close'); ?></button> <button type="button" class="btn btn-info" onclick="do_share_file_contacts();"><?php echo _l('confirm'); ?></button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <h4 class="no-mtop bold"><?php echo _l('customer_attachments'); ?> <br /> <small class="text-info"><?php echo _l('customer_files_info_message'); ?></small> </h4> <hr /> <?php if(isset($client)){ ?> <?php echo form_open_multipart(admin_url('clients/upload_attachment/'.$client->userid),array('class'=>'dropzone','id'=>'client-attachments-upload')); ?> <input type="file" name="file" multiple /> <?php echo form_close(); ?> <div class="text-right mtop15"> <button class="gpicker" data-on-pick="customerGoogleDriveSave"> <i class="fa fa-google" aria-hidden="true"></i> <?php echo _l('choose_from_google_drive'); ?> </button> <div id="dropbox-chooser"></div> </div> <div class="attachments"> <div class="mtop25"> <table class="table dt-table scroll-responsive" data-order-col="2" data-order-type="desc"> <thead> <tr> <th width="30%"><?php echo _l('customer_attachments_file'); ?></th> <th><?php echo _l('customer_attachments_show_in_customers_area'); ?></th> <th><?php echo _l('file_date_uploaded'); ?></th> <th><?php echo _l('options'); ?></th> </tr> </thead> <tbody> <?php foreach($attachments as $type => $attachment){ $download_indicator = 'id'; $key_indicator = 'rel_id'; $upload_path = get_upload_path_by_type($type); if($type == 'invoice' || $type == 'proposal' || $type == 'estimate' || $type == 'credit_note'){ $url = site_url() .'download/file/sales_attachment/'; $download_indicator = 'attachment_key'; } else if($type == 'contract'){ $url = site_url() .'download/file/contract/'; $download_indicator = 'attachment_key'; } else if($type == 'lead'){ $url = site_url() .'download/file/lead_attachment/'; } else if($type == 'task'){ $url = site_url() .'download/file/taskattachment/'; $download_indicator = 'attachment_key'; } else if($type == 'ticket'){ $url = site_url() .'download/file/ticket/'; $key_indicator = 'ticketid'; } else if($type == 'customer'){ $url = site_url() .'download/file/client/'; $download_indicator = 'attachment_key'; } else if($type == 'expense'){ $url = site_url() .'download/file/expense/'; $download_indicator = 'rel_id'; } ?> <?php foreach($attachment as $_att){ ?> <tr id="tr_file_<?php echo $_att['id']; ?>"> <td> <?php $path = $upload_path . $_att[$key_indicator] . '/' . $_att['file_name']; $is_image = false; if(!isset($_att['external'])) { $attachment_url = $url . $_att[$download_indicator]; $is_image = is_image($path); $img_url = site_url('download/preview_image?path='.protected_file_url_by_path($path,true).'&type='.$_att['filetype']); $lightBoxUrl = site_url('download/preview_image?path='.protected_file_url_by_path($path).'&type='.$_att['filetype']); } else if(isset($_att['external']) && !empty($_att['external'])){ if(!empty($_att['thumbnail_link']) && $_att['external'] == 'dropbox'){ $is_image = true; $img_url = optimize_dropbox_thumbnail($_att['thumbnail_link']); } $attachment_url = $_att['external_link']; } if($is_image){ echo '<div class="preview_image">'; } ?> <a href="<?php if($is_image){ echo isset($lightBoxUrl) ? $lightBoxUrl : $img_url; } else {echo $attachment_url; } ?>"<?php if($is_image){ ?> data-lightbox="customer-profile" <?php } ?> class="display-block mbot5"> <?php if($is_image){ ?> <div class="table-image"> <div class="text-center"><i class="fa fa-spinner fa-spin mtop30"></i></div> <img src="#" class="img-table-loading" data-orig="<?php echo $img_url; ?>"> </div> <?php } else { ?> <i class="<?php echo get_mime_class($_att['filetype']); ?>"></i> <?php echo $_att['file_name']; ?> <?php } ?> </a> <?php if($is_image){ echo '</div>'; } ?> </td> <td> <div class="onoffswitch"<?php if($type != 'customer'){?> data-toggle="tooltip" data-title="<?php echo _l('customer_attachments_show_notice'); ?>" <?php } ?>> <input type="checkbox" <?php if($type != 'customer'){echo 'disabled';} ?> id="<?php echo $_att['id']; ?>" data-id="<?php echo $_att['id']; ?>" class="onoffswitch-checkbox customer_file" data-switch-url="<?php echo admin_url(); ?>misc/toggle_file_visibility" <?php if(isset($_att['visible_to_customer']) && $_att['visible_to_customer'] == 1){echo 'checked';} ?>> <label class="onoffswitch-label" for="<?php echo $_att['id']; ?>"></label> </div> <?php if($type == 'customer' && $_att['visible_to_customer'] == 1){ $file_visibility_message = ''; $total_shares = total_rows(db_prefix().'shared_customer_files',array('file_id'=>$_att['id'])); if($total_shares == 0){ $file_visibility_message = _l('file_share_visibility_notice'); } else { $share_contacts_id = get_customer_profile_file_sharing(array('file_id'=>$_att['id'])); if(count($share_contacts_id) == 0){ $file_visibility_message = _l('file_share_visibility_notice'); } } echo '<span class="text-warning'.(empty($file_visibility_message) || total_rows(db_prefix().'contacts',array('userid'=>$client->userid)) == 0 ? ' hide': '').'">'.$file_visibility_message.'</span>'; if(isset($share_contacts_id) && count($share_contacts_id) > 0){ $names = ''; $contacts_selected = ''; foreach($share_contacts_id as $file_share){ $names.= get_contact_full_name($file_share['contact_id']) .', '; $contacts_selected .= $file_share['contact_id'].','; } if($contacts_selected != ''){ $contacts_selected = substr($contacts_selected,0,-1); /**na linha abaixo em </a> ' . _l('share_file_with_show, trocando o _1 por 0 desabilita envio */ } if($names != ''){ echo '<a href="#" onclick="do_share_file_contacts(\''.$contacts_selected.'\','.$_att['id'].'); return false;"><i class="fa fa-pencil-square-o"></i></a> ' . _l('share_file_with_show',mb_substr($names, 0,-2)); } } } ?> </td> <td data-order="<?php echo $_att['dateadded']; ?>"><?php echo _dt($_att['dateadded']); ?></td> <td> <?php if(!isset($_att['external'])){ ?> <button type="button" data-toggle="modal" data-file-name="<?php echo $_att['file_name']; ?>" data-filetype="<?php echo $_att['filetype']; ?>" data-path="<?php echo $path; ?>" data-target="#send_file" class="btn btn-info btn-icon"><i class="fa fa-envelope"></i></button> <?php } else if(isset($_att['external']) && !empty($_att['external'])) { echo '<a href="'.$_att['external_link'].'" class="btn btn-info btn-icon" target="_blank">'.($_att['external'] == 'dropbox' ? '<i class="fa fa-dropbox"></i>' : '<i class="fa fa-google"></i>').'</a>'; } ?> <?php if($type == 'customer'){ ?> <a href="<?php echo admin_url('clients/delete_attachment/'.$_att['rel_id'].'/'.$_att['id']); ?>" class="btn btn-danger btn-icon _delete"><i class="fa fa-remove"></i></a> <?php } ?> </td> <?php } ?> </tr> <?php } ?> </tbody> </table> </div> </div> <?php include_once(APPPATH . 'views/admin/clients/modals/send_file_modal.php');  
    • By violin101
      Caros amigos
       
      saudações...
       
      Sou um pouco novato em JAVASCRIPT, gostaria de tirar uma dúvida com os amigos.
       
      Tenho uma Tabela onde o usuário escolhe o Produto e através de um botão agregar, o sistema cria a Tabela. ATÉ AQUI TUDO BEM.
       
      Minha dúvida:
      como consigo verificar se o Código de algum produto já foi incluído ?
      caso foi, o sistema avisa que já foi informado o código anteriormente.
       
      Código em Javascript
      //Status dos Botões LIMPAR | AGREGAR | ADICIONAR - iniciar como desabilitado. document.getElementById("btn-limp").disabled = true; document.getElementById("btn-agregar").disabled = true; document.getElementById("adicionar").disabled = true; /*---Função para Capturar o Produto selecionado---*/ $(document).on("click",".btn-prod",function(){ prd = $(this).val(); infoprd = prd.split("*"); $("#idProdutos").val(infoprd[0]); $("#cod_interno").val(infoprd[1]); $("#descricao").val(infoprd[2]); $("#prd_unid").val(infoprd[3]); $("#vlr_unit").val(infoprd[4]); $("#qtd_prod").val(infoprd[5]); $("#vlr_total").val(infoprd[6]); $("#modal_prod").modal("hide"); //Função para Atualizar o Status do Botão statusLimparAgregar() }); //Nessa parte do AGREGAR gostaria de veririfcar //se houve ou não duplicidade de código do produto //informado $("#btn-agregar").on("click",function(){ //Monta a Tabela dos Produtos a serem Devolvidos html = "<tr>"; html += "<td width='10%' height='10'><input type='hidden' name='id_prds[]' value='"+infoprd[0]+"'>"+infoprd[1]+"</td>"; html += "<td width='32%' height='10'><input type='hidden' name='descricao[]' value='"+infoprd[2]+"'>"+infoprd[2]+"</td>"; html += "<td width='10%' height='10' style='text-align:center;'><input type='hidden' name='esp[]' value='"+infoprd[3]+"'>"+infoprd[3]+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'><input type='hidden' name='qtd_prod[]' value='"+infoprd[5]+"'>"+infoprd[5]+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'><input type='hidden' name='vlr_unit[]' value='"+infoprd[4]+"'>"+infoprd[4]+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'><input type='hidden' name='vlr_total[]' value='"+infoprd[6]+"'>"+infoprd[6]+"</td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-danger btn-remove-produto' style='padding: 2px 5px;' title='Remover Item da Lista'>"+ "<span class='fa fa-remove'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#btn-agregar").val(null); $("#descricao").val(null); $("#cod_interno").val(null); $("#prd_unid").val(null); $("#vlr_unit").val(null); $("#qtd_prod").val(null); $("#vlr_total").val(null); //Desabilita Buttons document.getElementById("btn-limp").disabled = true; document.getElementById("btn-agregar").disabled = true; });  
      Grato,
       
      Cesar
    • By gersonab
      Bom dia.
      utilizava um código para completar o endereço conforme o cep, funcionando perfeitamente, só que preciso pegar o cep caso não tenha, pelo endereço digitado, pesquisando pela internet encontrei o código abaixo, funciona perfeitamente para os dois casos, só que .... no meu formulário tenho dois campos de endereço, um residencial e outro de trabalho, o código que utilizava antes funcionava para os dois campos, erá só mudar o id do campo do formulário, tipo se eu tinha id="logadouro" em um campo no outro id="logadouro1", só que .... no código atualizado para ambas as pesquisas esta forma não funciona, gostaria da ajuda de vocês para este problema.
      código antigo:
      function limpa_formulário_cep() { $("#logradouro").val(""); $("#bairro").val(""); $("#localidade").val(""); $("#uf").val(""); } $("#cep").blur(function() { var cep = $(this).val().replace(/\D/g, ''); if (cep != "") { var validacep = /^[0-9]{8}$/; if(validacep.test(cep)) { $("#logradouro").val("..."); $("#bairro").val("..."); $("#localidade").val("..."); $("#uf").val("..."); $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) { if (!("erro" in dados)) { $("#logradouro").val(dados.logradouro); $("#bairro").val(dados.bairro); $("#localidade").val(dados.localidade); $("#uf").val(dados.uf); } else { limpa_formulário_cep(); alert("CEP não encontrado."); } }); } else { limpa_formulário_cep(); alert("Formato de CEP inválido."); } } else { limpa_formulário_cep(); } }); como podem ver era só duplicar e mudar o id, agora neste ja não consigo
      var inputsCEP = $('#logradouro, #bairro, #localidade, #uf'); var inputsRUA = $('#cep, #bairro'); var validacep = /^[0-9]{8}$/; function limpa_formulário_cep(alerta) { if (alerta !== undefined) { alert(alerta); } inputsCEP.val(''); } function get(url) { $.get(url, function(data) { if (!("erro" in data)) { if (Object.prototype.toString.call(data) === '[object Array]') { var data = data[0]; } $.each(data, function(nome, info) { $('#' + nome).val(nome === 'cep' ? info.replace(/\D/g, '') : info).attr('info', nome === 'cep' ? info.replace(/\D/g, '') : info); }); } else { limpa_formulário_cep("CEP não encontrado."); } }); } // Digitando RUA/CIDADE/UF $('#logradouro, #localidade, #uf').on('blur', function(e) { if ($('#logradouro').val() !== '' && $('#logradouro').val() !== $('#logradouro').attr('info') && $('#localidade').val() !== '' && $('#localidade').val() !== $('#localidade').attr('info') && $('#uf').val() !== '' && $('#uf').val() !== $('#uf').attr('info')) { inputsRUA.val('...'); get('https://viacep.com.br/ws/' + $('#uf').val() + '/' + $('#localidade').val() + '/' + $('#logradouro').val() + '/json/'); } }); // Digitando CEP $('#cep').on('blur', function(e) { var cep = $('#cep').val().replace(/\D/g, ''); if (cep !== "" && validacep.test(cep)) { inputsCEP.val('...'); get('https://viacep.com.br/ws/' + cep + '/json/'); } else { limpa_formulário_cep(cep == "" ? undefined : "Formato de CEP inválido."); } }); desde já agradeço.
    • By spyryt
      Amigos preciso validar este meu formulario, de forma que ele so envie os dados se o numero do cartão seja valido.
       

                          <form id="updateCreditCard" action="index4.php" method="post">                        
                              <fieldset style="border: none">
                                  
                              
                                  
                          
      <div class="divBlock">
                                      
              <div class="divBlock">
                                      <label for="Numbercpf">CPF *</label>
                                      <input required="required" type="text" name="cpf" id="cpf" maxlength="14" > 
               
                                  </div>
                                <div class="divBlock">
                                  <label for="cartao">Numero do Cartão *</label>
                                  <input type="text" id="holderName" maxlength="19" 
         name="cartao">
                                </div>
                                  
                              
                                  </div>
                                  <div class="btn-container">
                                      <button  onKeyPress="" class="sendUpdating">Continuar</button>
                                  </div>
×

Important Information

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