[Resolvido] Efeito Hide/Show

PF2G · May 11, 2012 at 10:42 AM

Bom dia, P@P

Eu estou a trabalhar num website onde tenho uma lista dos produtos que estao na BD com a seguinte informação: imagem, descrição, a referencia e mais um botao para ver mais imagens do produto; e quero acrescentar uma checkbox que mal esteja checkada a toda essa informação desapareça menos a imagem.

Será que me podem ajudar?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="imagens/plasticos.ico" />
<link href="styles/style.css" rel="stylesheet" />
<title>Plásticos Futura - Produtos</title>
<script type="text/javascript" src="js/java.js"></script>
<!------------------------------------------------------------------------------>	
<script language="javascript/jquery">
	function validate(chk)
	{
		if (chk.checked == 1)
		{
			$("button").click(function()
			{
				$("p").hide(1000);
			});

		}
	}
</script>

</head>


<!------------------------------------------------------------------------>	
<p>	

<td valign="top" class="texto_pretobig2"><strong>REFERÊNCIA: </strong><?php echo $row_produtos['referencia']; ?><br />
											<strong>DESCRIÇÃO:</strong> <?php echo $row_produtos['nome']; ?>
												<br/>
<br/>
												<div id="a_img">
												<a href="ver_produto.php?id_produto=<?php echo $row_produtos['id_produto']; ?>&id_categoria=<?php echo $row_produtos['id_material']; ?>" class="a_img">Mais imagens</a>
												</div>
											</p>
<!------------------------------------------------------------------------>	
											<br/>
<form>
<input type="checkbox" name="chk1"> Esconder Info</input>
<br/>
<button type="button" onclick="return validate(chk1);">Submeter</button>
</form>

rumbafum · May 11, 2012 at 11:14 AM

o método validate não me parece correcto. Estás a passar o nome da checkbox mas depois não verificas o estado correctamente. e tens o hide no click do botão porque?

Experimenta assim (Não testei):


function validate(chk)
                {
                        if ($('input[name='+chk+']').is(':checked'))
                        {
                                $("p").hide(1000);
                        }
                }

PF2G · May 11, 2012 at 11:22 AM

O hide ta no click pq, quando eu clicar ele verifica a checkbox se tiver checkada hide..

E o teu codigo nao funciona...

rumbafum · May 11, 2012 at 11:42 AM

mas isso já fazes ao chamar o validate no onclick do botão...

usa uma class para a checkbox então e podes remover o parâmetro da função validate e já agora retorna booleana no método validate se não o estás a fazer já:


<input type="checkbox" name="chk1" class="hideChk"> Esconder Info</input>

<button type="button" onclick="return validate();">Submeter</button>

.......

function validate()
                {
                        if ($('.hideChk').is(':checked'))
                        {
                                $("p").hide(1000);
                        }
                }

PF2G · May 11, 2012 at 11:47 AM

Fogo nao funciona colega. Não sei o que se passa...

Outra hipotese: será possivel criar a funcção jquery e depois chamá-la no javascript.

Se a box checkada entao faz a função jquery.

Será possivel?

rumbafum · May 11, 2012 at 12:12 PM

coloca o teu código para ver o que fizeste

PF2G · May 11, 2012 at 12:14 PM

coloca o teu código para ver o que fizeste

Alguma coisa ta mal pq nao ta a funcionar. é a primeira vez que mexo com estas linguagens.

<script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	  $("#hide").click(function hide(){
		$("p").hide(1000);
	  });
	  $("#show").click(function show(){
		$("p").show(1000);
	  });
	});
</script>

<script language="javascript">
	function validate(chk)
	{
		if (chk.checked == 1)
		{
			hide();
		}
		else
		{
			show();
		}
	}
</script>

rumbafum · May 11, 2012 at 12:43 PM

Mas tu fizeste alguma coisa das que disse em cima?

O teu código está completamente diferente do que te disse....

No botão continuas a chamar o validate no onclick correcto? Se sim faz o que coloquei em cima

PF2G · May 11, 2012 at 12:58 PM

Mas tu fizeste alguma coisa das que disse em cima?

O teu código está completamente diferente do que te disse....

No botão continuas a chamar o validate no onclick correcto? Se sim faz o que coloquei em cima

Já exeperimentei e não acontece nada...

Estou a tentar usar a hipotese de chamar a função jquery no javascript ou entao verificar o check tudo em jquery (talvez seja mais facil a ultima).

PF2G · May 11, 2012 at 02:58 PM

Ja tenho o codigo correcto só me falta fazer os efeitos Hide/Show, mas nao funciona dá um break no script. Mas se puser um alert ele funciona perfeitamente.

<p>	
<td valign="top" class="texto_pretobig2"><strong>REFERÊNCIA: </strong><?php echo $row_produtos['referencia']; ?><br />
<strong>DESCRIÇÃO:</strong> <?php echo $row_produtos['nome']; ?>
<br/>
<br/>
<div id="a_img">
<a href="ver_produto.php?id_produto=<?php echo $row_produtos['id_produto']; ?>&id_categoria=<?php echo $row_produtos['id_material']; ?>class="a_img">Mais imagens</a>
</div>
</p>
<!------------------------------------------------------------------------>	
<br/>
<input type="checkbox" id="validchk" name='exp6'/>Esconder/Mostrar<br/>
<input type="button" value="Submeter" id='ischecked' />
[code=javascript]<script>
// Validate checkbox is checked
$('#ischecked').click(function()
{
if($('#validchk').is(':checked')) 
{
$("p").hide(100); 
}
else
{
}
});
</script>

rumbafum · May 11, 2012 at 03:17 PM

isto para mim está a funcionar. Tens algum erro? Esconde o <p> ou não?


<input type="checkbox" id="validchk" name='exp6'/>Esconder/Mostrar<br/>

        <input type="button" value="Submeter" id='ischecked' />

        <p>
            sdfsdfsdf
            sdfsdfsdf
            sdfsdfsdfsd
        </p>
        
        <script type="text/javascript" language="javascript">

            $('#ischecked').click(function () {
                if ($('#validchk').is(':checked')) {
                    $("p").hide(100);
                }
                else {
                    $("p").show(100);
                }
            });

        </script>

PF2G · May 11, 2012 at 03:22 PM

isto para mim está a funcionar. Tens algum erro? Esconde o <p> ou não?


<input type="checkbox" id="validchk" name='exp6'/>Esconder/Mostrar<br/>

        <input type="button" value="Submeter" id='ischecked' />

        <p>
            sdfsdfsdf
            sdfsdfsdf
            sdfsdfsdfsd
        </p>
        
        <script type="text/javascript" language="javascript">

            $('#ischecked').click(function () {
                if ($('#validchk').is(':checked')) {
                    $("p").hide(100);
                }
                else {
                    $("p").show(100);
                }
            });

        </script>

Não sei se é de usar o localhost ou se é dos browsers pq acontece o que acontece comigo break por causa do script.

Por mim ele está bem...pq se eu fizer alert em vez hide ele dá perfeitamente

rumbafum · May 11, 2012 at 04:22 PM

qual é o browser?

PF2G · May 11, 2012 at 04:35 PM

Ja usei no Internet Explorer e no Mozilla Firefox

rumbafum · May 11, 2012 at 05:17 PM

o exemplo que coloquei está a funcionar em todos os browsers usando o jquery 1.4.

Parece-me que tens aí outro problema. Controlos com ids iguais ou assim.

PF2G · May 11, 2012 at 05:27 PM

o exemplo que coloquei está a funcionar em todos os browsers usando o jquery 1.4.

Parece-me que tens aí outro problema. Controlos com ids iguais ou assim.

Podes ver o meu header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="imagens/plasticos.ico" />
<link href="styles/style.css" rel="stylesheet" />
<title>Plásticos Futura - Produtos</title>
<script type="text/javascript" src="js/java.js"></script>
<script type='text/javascript' src='jquery/jquery.js'></script>
</head>

Aí estou a usar o 1.7.2 e/ou 1.3, mas eu ja estou a sacar o 1.4 vamos ver se funciona faz figas, colega B)

rumbafum · May 11, 2012 at 09:13 PM

1.7 e/ou 1.3... Isso não é bom. Ou usas um ou usas outro. Provavelmente vem daí o problema.

Usa uma versão de jquery somente. Não carregues vários jquery.

Podes usar o 1.7 à vontade, não precisas de ir buscar outro.

ralmeidasantos · May 12, 2012 at 11:17 AM

boas é alguma coisa disto que procuras?

<script type="text/javascript">function toggle(element) {    document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";}</script>

Gonka · May 12, 2012 at 05:25 PM

Isto resolve a tua questão.

function toogleDiv() {
    $('#divToToggle').toggle();
}

<a href="javascript:toggleDiv();">Mostrar/Esconder</a>
<div id="divToToggle" style="display: none;">

PF2G · May 13, 2012 at 03:10 PM

Isto resolve a tua questão.

function toogleDiv() {
   $('#divToToggle').toggle();
}

<a href="javascript:toggleDiv();">Mostrar/Esconder</a>
<div id="divToToggle" style="display: none;">

Só para esclarecer o <a> insiro dentro do botao, certo?

Obrigado,

PF2G

Sign In

[Resolvido] Efeito Hide/Show

Recommended Posts

PF2G

rumbafum

PF2G

rumbafum

PF2G

rumbafum

PF2G

rumbafum

PF2G

PF2G

rumbafum

PF2G

rumbafum

PF2G

rumbafum

PF2G

rumbafum

ralmeidasantos

Gonka

PF2G

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information