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 gersonab
      Bom dia, utilizo um sistema de auto complete que funciona quase que perfeitamente, porque quase, se eu tenho 10 Marias cadastradas o autocomplete só inicia após eu colocar uma letra do segundo nome e ou sobrenome, tipo :
      se eu escrever Maria somente, não aparece opções na lista;
      agora se eu escrever Maria A - ja começa a aparecer opções na lista;
      tem como iniciar as opções após uma terceira letra digitada ?
      segue o código que utilixo.
      form
      <label class="field"> <input type="text" name="nomec" id="nomec" class="gui-input"> <input type="hidden" name="idc" id="idc"> </label> ajax
      $( "#nomec" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "../lista/autocli.php", type: 'post', dataType: "json", data: { search: request.term }, success: function( data ) { response( data ); } }); }, select: function (event, ui) { $('#nomec').val(ui.item.label); $('#idc').val(ui.item.value); return false; } }); autocli.php
      require_once('config.php'); if(isset($_POST['search'])){ $search = $_POST['search']; $query = "SELECT DISTINCT nomec AS nomec, idc FROM cli WHERE nomec like'%".$search."%'"; $result = mysqli_query($con,$query); $response = array(); while($row = mysqli_fetch_array($result) ){ $response[] = array("value"=>$row['idc'],"label"=>$row['nomec']); } echo json_encode($response); } exit; desde já agradeço.
       
    • By Rodrigo Biaggio
      Senhores(a), por favor, alguém consegue me ajudar a entender como posso fazer para colocar o conteúdo abaixo, dentro de uma DIV, separando ou criando como se fosse uma tabela com o campo HostGroup e Licenças? 
       
      {"GFUnificado":14,"APIGateway":22,"OSBSegregado1":202,"Portal":14,"OAM":30,"MicroServicos":68,"Loja":58.5,"60-Lojas":46,"-Callcenter":37,"360-Dealers":24,"SOAMecsol":30,"MeuEmpresas":40,"OSBFarm4":89,"Prisma":8,"EricssonRevenueManager":50.75,"N":80,"Atl":10,"OSBEAI":2,"Next":208.5}
       
      Segue meu código:
       
      <!DOCTYPE html> <html lang="pt-br"> <title>API Management</title> <head> <meta charset="8"> </head> <body> <script> var urlapi = 'http://xxxxx.xxxx; function fazerRequisicao(){ var url = urlapi + document.getElementById('hostgroup').value; //var url = urlapi; var xhttp = new XMLHttpRequest(); xhttp.open("GET", url, false); xhttp.send(); var obj = JSON.parse(xhttp.responseText); var data_map = new Map(); var index = 0; for (i = 0; i < obj.length; i++) { if(data_map.has(obj[i].hostGroup.name)) { data_map.set(obj[i].hostGroup.name, data_map.get(obj[i].hostGroup.name) + +obj[i].consumedHostUnits); } else { data_map.set(obj[i].hostGroup.name, +obj[i].consumedHostUnits); } } const objConverted = Object.fromEntries(data_map); var myJSON = JSON.stringify(objConverted); document.getElementById("div-responsetext").innerHTML = myJSON; } var len = myJSON.hostGroup.name.length, aryHostGroup = []; </script> <button onclick="fazerRequisicao();">Pesquisar</button> <input type="text" id="hostgroup" style="width: 100px;"> <hr/> <div id="div-responsetext"></div> </body> </html>  
       
    • By Luiz Henrique de Sousa
      Boa noite habilitei meu required, para quando o campo B da minha picklist estiver vazio ele não poder salvar, adicionei uma mensagem no meu Bean e já tentei requiredMessage e validatorMassage e nada , mas fica me retornando a mensagem padrão do richfaces do mesmo jeito, OBS: fora a mensagem padrão do richfaces ele me retorna o componente da form frEditForm:colunaCustomizada Erro de validação: o valor é necessário.
       
      Código:
       
      <h:outputLabel for="colunaCustomizada" value="#{messages.colunas_selecionadas}" /> <rich:pickList id="columnCustomization" value="#{defaultMBean.colunasSelecionadas}" var="colunas" sourceCaption="#{messages.colunasDisponiveis}" targetCaption="#{messages.selecionarColunas}" addAllText="#{messages.coluna_addall}" addText="#{messages.coluna_add}" removeAllText="#{messages.coluna_removeall}" removeText="#{messages.coluna_remove}" listHeight="310px" required="true" orderable="true" downText="" downBottomText="" upText="" upTopText="" itemClass="rf-pick-item"> <rich:message for="colunaCustomizada"> </rich:message>  
      Ajax, JS..
       
      <a4j:jsFunction name="validateRequiredFields" action="#{defaultMBean.validarCamposObrigatorios(nome, produto, dataFormato, colunaDataSelecionada)}" oncomplete="btnSaveClick()" reRender="pnlMenssagem"> <a4j:param name="param" assignTo="#{nome}"/> <a4j:param name="param1" assignTo="#{produto}"/> <a4j:param name="param2" assignTo="#{dataFormato}"/> <a4j:param name="param3" assignTo="#{colunaDataSelecionada}"/> </a4j:jsFunction> <script type="text/javascript" language="JavaScript"> /*<![CDATA[*/ initializeTemplatePickList(true); $("#ngEditForm\\:btnSave").bind('mousedown', function(event){ this.focus(); var array = assembleChanges(); saveChanges(array); validateRequiredFields( $("#frEditForm:\\:fldNome").val(), $("#frEditForm:\\:fldTipo option:selected").val(), $("#frEditForm:\\:fldDataFormato").val(), templateColumnPicklist.getcolunaDataSelecionada() ); }); function btnSaveClick() { if($('#pnlMenssagem').length == 0) { $("#ngEditForm\\:btnSalvar").click(); } }
    • By Thiago Franchin
      Pessoal gravei esse tutorial de Gastby.js, espero que gostem: 
       
       
    • By alysson122010
      Galera tenho esse codigo e gostaria que as impressao das latitudo e longitudo aparecesse em dois inputs diferentes para depois eu manda para um banco de dados com um insert.
       
      meu codigo:
      <p id="demo"></p> <body onload="getLocation()"> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="O seu navegador não suporta Geolocalização.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body>  
×

Important Information

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