Mostra e esconde divs

Opções para o PLANO 01

O PLANO 2 vai aqui

Se qeuiser um terceiro plano, este é o espaço

Ocultando uma div com jQuery

Exibe oculta Divs

Dados da Criança cadastrada

Data de Nascimento:

Alergias:

Nome do Médico:

Telefone do Médico:

Plano de Saúde:

Quer usar link em vez de botão?

Exibir link n°1

Olha o link 1 ae gente!

Exibir link n°2

Olha o link 2 ae gente!

Exibir link n°3

Olha o link 3 ae gente!

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ocultando uma div com jQuery
<style>
body {font: 12px Verdana, Geneva, sans-serif;}
p {margin: 0px;}
.conteudo {border:1px solid #CCCC33; padding:10px; margin-top:10px; width:500px;}
.bt_link{font-family: Verdana, Geneva, sans-serif;font-size: 14px;font-weight: bold;color: #F00;}
.bt_exibir{font-family: Verdana, Geneva, sans-serif;font-size: 10px;font-weight: bold;color: #00F;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.conteudo').hide();
//Função Toggle executa as funções na ordem dos cliques,
//pode ter quantas quiser, prático, porque vc
//usa só um botão para mostrar e ocultar, funciona com links também
$(".bt_exibir").toggle(
//1ª Função, pega valor do "name" exibe a div e muda o texto do botão
function() {
var_n=$(this).attr("name")
$("#bt_"+var_n).attr('value', 'Ocultar Div n°'+var_n);
$("#conteudo_bt_"+var_n).show('slow');},
//Segunda função esconde a div e volta o texto normal do botão
function() {
var_n=$(this).attr("name")
$("#bt_"+var_n).attr('value', 'Exibir Div n° '+var_n);
$('#conteudo_bt_'+var_n).hide('slow');}
); //Fim (".bt_exibir").toggle

//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//Togle no link acho que link não aceita ID,
//usei title para guardar o atributo
$(".bt_link").toggle(
function() {
var_x=$(this).attr("title")
$(this).html("Ocultar link nº"+var_x);
$("#cont_link_"+var_x).show('slow');},
function() {
var_x=$(this).attr("title")
$(this).html("Exibir link nº"+var_x);
$('#cont_link_'+var_x).hide('slow');}
); //Fim (".bt_link").toggle
}); //Fim de tudo do jquery
</script>

<h1> Exibe oculta Divs </h1>
<hr />

<p><b>Dados da Criança cadastrada</b></p>
<p>Data de Nascimento: <?php echo $dados["dt_nasc_crianca"]; ?></?php></p>
<p>Alergias: <?php echo $dados["alergias"]; ?></?php></p>
<p>Nome do Médico: <?php echo $dados["medico"]; ?></?php></p>
<p>Telefone do Médico: <?php echo $dados["tel_medico"]; ?></?php></p>
<p>Plano de Saúde: <?php echo $dados["plano_saude"]; ?></?php></p>

<p> </p>
<?php } ?>
<hr />
<h2>Quer usar link em vez de botão?</h2>
<a href="#" title="1" target="_self" class="bt_link">Exibir link n°1</a><br />
<div id="cont_link_1" class="conteudo">Olha o link 1 ae gente!</div>
<a href="#" title="2" target="_self" class="bt_link">Exibir link n°2</a><br />
<div id="cont_link_2" class="conteudo">Olha o link 2 ae gente!</div>
<a href="#" title="3" target="_self" class="bt_link">Exibir link n°3</a><br />
<div id="cont_link_3" class="conteudo">Olha o link 3 ae gente!</div>
</?php>
</!doctype>

Ocultando uma div com jQuery Exibir DIV

Dados da Criança cadastrada

Data de Nascimento:

Alergias:

Nome do Médico:

Telefone do Médico:

Plano de Saúde:

Ocultar Dados

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ocultando uma div com jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$('#conteudo').hide();

$('a#exibir').click(function(){

$('#conteudo').show('slow');

});

$('a#ocultar').click(function(){

$('#conteudo').hide('slow');
})
return false;

});
</script>

<?php

include ("conn_db.php");

$query = mysql_query("select * from tb_crianca") or die("Erro na query".mysql_error());
$linha = mysql_num_rows($query);
if ($linha==0){
echo "Não foi retornado nenhum registro";
}
else{
while ($dados = mysql_fetch_array($query)){
?>

}
#conteudo {
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}
</style>
<a id="exibir" href="#">Exibir DIV</a>
<div id="conteudo">
<p><b>Dados da Criança cadastrada</b></p>
<p>Data de Nascimento: <?php echo $dados["dt_nasc_crianca"]; ?></?php></p>
<p>Alergias: <?php echo $dados["alergias"]; ?></?php></p>
<p>Nome do Médico: <?php echo $dados["medico"]; ?></?php></p>
<p>Telefone do Médico: <?php echo $dados["tel_medico"]; ?></?php></p>
<p>Plano de Saúde: <?php echo $dados["plano_saude"]; ?></?php></p>
<p><a href="#" id="ocultar">Ocultar Dados</a></p>
</div>
<p />
<?php
}}
?>
</?php
}}
?></p></?php

include>
</!doctype>

Untitled Document

Clique para visualizar

Clique novamente para ocultar

Quando expandir, eu pretendo que desapareça este texto e abra simultaneamente o texto oculto.
Este código atual, abre o texto oculto, mas este texto continua.
Detalhes

Conteúdo oculto deve aparecer sozinho na página.
Mas atulmente está abrindo junto com o texto acima. Fechar

Slide Down Box Menu with jQuery and CSS3

Images by tibchris

menu de Noticias 02

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Noticias 02
<script language="JavaScript1.2">

//Translucent scroller- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var scroller_width='150px'
var scroller_height='115px'
var bgcolor='#E0EFD1'
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var scrollercontent=new Array()
//Define scroller contents. Extend or contract array as needed
scrollercontent[0]='Visite o scriptbrasil <a href="http://www.scriptbrasil.com.br/">ScriptBraisl</a>Informação sempre!'
scrollercontent[1]='Buscador Google <a href="http://www.google.com.br/">Google.com.br</a> O maior buscador do mundo.'
scrollercontent[2]='Portal PHP Brasil <a href="http://php.scriptbrasil.com/">Linguagem Livre</a>.'

////NO need to edit beyond here/////////////

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]+'</layer></ilayer>')
}

var curpos=scroller_height*(1)
var degree=10
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function moveslide(){
if (curpos>0){
curpos=Math.max(curpos-degree,0)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=scrollercontent[curindex]
nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(scrollercontent[curindex])
crossobj.document.close()
}
curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
}

function resetit(what){
curpos=parseInt(scroller_height)*(1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=scrollercontent[curindex]
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (ie4||dom||document.layers)
window.onload=startit

</script>

</!doctype>

menu

Clique para visualizar

Exibe oculta Divs

Quer usar link em vez de botão?

Clique para visualizar

Clique novamente para ocultar

Hover Zoom Demo

Example

Single Images

Gallery

Example

Slide Down Box Menu with jQuery and CSS3

Páginas

domingo, 26 de junho de 2011

Nenhum comentário:

Postar um comentário

Seguidores

Arquivo do blog

Quem sou eu