domingo, 27 de novembro de 2011

sábado, 26 de novembro de 2011

Ocultar o mostrar un DIV con Javascript

Muestra oculta

Este contenido tiene que mostrarse con el link

Muestra oculta</title><br />
<br />
<script language="JavaScript">

Exibir e Ocultar uma div com jQuery

Exibir DIV

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.

Ocultar DIV

Crie efeitos para aparecer e ocultar elementos com jQuery

Efeitos com jQuery

Camada de Efeitos

Aqui você pode colocar o qualquer coisa!

Ocultar a camada |
Mostrar a camada

video em exibe divs

sexta-feira, 25 de novembro de 2011

Exibe Divs de site 1 e 2

Abrir site 1
Abrir site 2

var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
  }
}

function selectmouse(e)
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";
  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

if (fobj.className=="dragme")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }

}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

function min(ID){
document.getElementById(ID).style.width = "120px";
document.getElementById(ID).style.height = "30px";

}

function max(ID){               
document.getElementById(ID).style.width = "100%";                               
document.getElementById(ID).style.height = "100%";

}

function restore(ID){               
document.getElementById(ID).style.width = "200px";                               
document.getElementById(ID).style.height = "200px";

}

function fecha(ID){
document.getElementById(ID).style.display = "none";
       
                   }

function showHide(ID){
document.getElementById(ID).style.display= "";
  
                       }
</script><br />
<br />
<br />
<a href="http://www.uol.com.br" target="site"  onclick="showHide('teste')">Abrir site 1</a>      <br />
<a href="http://www.globo.com" target="site1"  onclick="showHide('teste1')">Abrir site 2</a><br />
<br />
<div id="teste" class="dragme" style="width:200px; height:200px; border:#cccccc 2px solid; text-align:right; background:green; cursor:move; display:none"><input type="button" id="restore1" style="width:120px; height:30px; align:center;display:none;"
onclick="restore('teste');restore('site');showHide('site');showHide('max');showHide('min');showHide('fecha');fecha('restore1')" value="UOL" title="UOL" /><br />
<br />
<input type="button" id="min" style="width:25px; height:25px; align:center;"
onclick="min('teste');fecha('site');fecha('max');fecha('min');fecha('fecha');fecha('restore');showHide('restore1')" value="_" title="Minimizar" /><br />
<br />
<input type="button" id="restore" style="width:25px; height:25px; align:center; display:none;"
onclick="restore('teste');restore('site');showHide('site');showHide('max');fecha('restore')" value="[-]" title="Restaurar abaixo" /><br />
<br />
<input type="button" id="max" style="width:25px; height:25px; align:center;"
onclick="max('teste');max('site');showHide('site');showHide('restore');fecha('max')" value="[+]" title="Maximizar" /><br />
<br />
<input type="button" id="fecha" style="color:red; width:25px; height:25px; align:center;"
onclick="fecha('teste')" value="x" title="Fechar" /><br />
<br />
<iframe name="site" id="site" style="width:200px; height:200px;"></iframe>     <br />
</div><br />
<br />
<div id="teste1" class="dragme" style="width:200px; height:200px; border:#cccccc 2px solid; text-align:right; background:green; cursor:move; display:none"><input type="button" id="restore3" style="width:120px; height:30px; align:center;display:none;"
onclick="restore('teste1');restore('site1');showHide('site1');showHide('max1');showHide('min1');showHide('fecha1');fecha('restore3')" value="GLOBO.COM" title="UOL" /><br />
<br />
<input type="button" id="min1" style="width:25px; height:25px; align:center;"
onclick="min('teste1');fecha('site1');fecha('max1');fecha('min1');fecha('fecha1');fecha('restore2');showHide('restore3')" value="_" title="Minimizar" /><br />
<br />
<input type="button" id="restore2" style="width:25px; height:25px; align:center; display:none;"
onclick="restore('teste1');restore('site1');showHide('site1');showHide('max1');fecha('restore2')" value="[-]" title="Restaurar abaixo" /><br />
<br />
<input type="button" id="max1" style="width:25px; height:25px; align:center;"
onclick="max('teste1');max('site1');showHide('site1');showHide('restore2');fecha('max1')" value="[+]" title="Maximizar" /><br />
<br />
<input type="button" id="fecha1" style="color:red; width:25px; height:25px; align:center;"
onclick="fecha('teste1')" value="x" title="Fechar" /><br />
<br />
<iframe name="site1" id="site1" style="width:200px; height:200px;"></iframe>     <br />
</div><br />

Exibir Foto na Barra Rolante Mostrar Ocultar

Mostrar / Ocultar ??

<div class="divspoiler"><a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ??</a><br />
<br />
</div><div><div class="spoiler" style="display: none;"><br />
<br />
<div style="height:221px;width:330px;overflow:scroll;"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br />
<br />
<img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /><br />
<br />
</div><p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p></div></div><div class="divspoiler"><a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ??</a><br />
<br />
</div><div><div class="spoiler" style="display: none;"><br />
<br />
<div style="height:221px;width:330px;overflow:scroll;"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br />
<br />
<img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /><br />
<br />
</div><p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p></div></div><br />

Exibir DIV

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"><br />
<br />
<br />
<br />
Ocultando uma div com jQuery<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<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><br />
<br />
<br />
<br />
<?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)){
?><br />
<br />
<style>
body {
font: 12px Verdana, Geneva, sans-serif;

}
#conteudo {
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}
</style><br />
<a id="exibir" href="#">Exibir DIV</a><br />
<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
}}
?><br />
</?php
}}
?></p></?php

include><br />
</!doctype><br />
<br />
<br />
<br />

exibir com link verde e amarelo

Artistic

exibir com imagem

exibir AQUI FICA O TITULO APOS O CLICK DO MOUSE

Show more less

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque iaculis tincidunt tortor. Nulla turpis dui, gravida non,
varius quis, molestie sit amet, justo. Vestibulum sed elit.
Duis lobortis odio quis nisi. Praesent enim. Sed auctor commodo lectus.
In eget augue a nulla auctor interdum.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla enim turpis, commodo at, feugiat nec, dapibus et, odio. Cras enim risus, sagittis eget,
ultrices quis, eleifend vel, risus. Cras a felis eu urna ornare vulputate.
Pellentesque viverra, lacus vitae tincidunt accumsan, nisi metus feugiat felis,
sed placerat est dolor et eros. Duis cursus. Maecenas sollicitudin, lorem vitae
placerat eleifend, dui elit imperdiet tellus, at convallis sapien orci sed pede.

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br />
<br />
<br />
<br />
Show more less <br />
<style media="screen" type="text/css"> 
#mytext {width:260px;height:200px;overflow:hidden;} 
</style> <br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>  <br />
<script type="text/javascript"> 
$(document).ready(function() { 
var adjustheight = 200; 
$("#adjust").toggle(function() { 
$('#mytext').css('height', 'auto').css('overflow', 'visible'); 
$(this).text("less"); 
}, function() { 
$('#mytext').css('height', adjustheight).css('overflow', 'hidden'); 
$(this).text("more"); 
}); 
}); 
</script> <br />
<br />
<br />
<div id="mytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
Quisque iaculis tincidunt tortor. Nulla turpis dui, gravida non, <br />
varius quis, molestie sit amet, justo. Vestibulum sed elit. <br />
Duis lobortis odio quis nisi. Praesent enim. Sed auctor commodo lectus. <br />
In eget augue a nulla auctor interdum. <br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <br />
Nulla enim turpis, commodo at, feugiat nec, dapibus et, odio. Cras enim risus, sagittis eget, <br />
ultrices quis, eleifend vel, risus. Cras a felis eu urna ornare vulputate. <br />
Pellentesque viverra, lacus vitae tincidunt accumsan, nisi metus feugiat felis, <br />
sed placerat est dolor et eros. Duis cursus. Maecenas sollicitudin, lorem vitae <br />
placerat eleifend, dui elit imperdiet tellus, at convallis sapien orci sed pede.</div><a href="#" id="adjust">more</a> <br />
<br />
</!doctype><br />
<br />
<br />
<br />
<br />
<br />

EXIBIR Mostrar Ocultar

Mostrar / Ocultar ??

exibe Quando passar o mouse sobre um link, exibir o conteúdo de uma div

Teste

Exibe oculta Divs resposta

Exibe oculta Divs PLANO 01

Opções para o PLANO 01

O PLANO 2 vai aqui

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

Exibe oculta Divs Mostra Esconde link

Mostar site

Link

Exibe oculta Divs Mostar site

Mostar site

Link

Exibe oculta Divs FUnciona

Exibe oculta Divs Clique para visualizar

Untitled Document

Clique para visualizar

Clique novamente para ocultar

Exibe oculta Divs Artistic

Artistic

Exibe oculta Divs 1

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

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><br />
<br />
<br />
<br />
<script type="text/javascript">
document.getElementById("text")
function showText(e) {
theObject = document.getElementById("text");
theObject.style.visibility = "visible";
}
function hideText() {
theObject = document.getElementById("text");
theObject.style.visibility = "hidden";
}
</script><br />
<br />
<br />
<br />
Quando expandir, eu pretendo que desapareça este texto e abra simultaneamente o texto oculto.<br />
<br />
Este código atual, abre o texto oculto, mas este texto continua.<br />
<br />
<a onclick="showText(event);" href="#" class="link-cinza">Detalhes</a><br />
<br />
<div id="text" style="visibility:hidden;">Conteúdo oculto deve aparecer sozinho na página.<br />
<br />
Mas atulmente está abrindo junto com o texto acima.<br />
<span><a onclick="hideText();" href="#" class="link-cinza">Fechar</a></span><br />
</div><br />
<br />
</!doctype><br />
<br />
<br />
<br />

Exibe oculta Divs

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"><br />
<br />
<br />
<br />
Ocultando uma div com jQuery<br />
<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><br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<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><br />
<br />
<br />
<h1>Exibe oculta Divs </h1><hr /><br />
<br />
<br />
<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><br />
<p> </p><?php } ?><br />
<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 />
<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 />
<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 />
<br />
<div id="cont_link_3" class="conteudo">Olha o link 3 ae gente!</div></?php><br />
</!doctype><br />
<br />

conteudo da home aa

conteudo do contato

Exibe Divs

menu blog

domingo, 27 de novembro de 2011

sábado, 26 de novembro de 2011

Ocultar o mostrar un DIV con Javascript

Exibir e Ocultar uma div com jQuery

Crie efeitos para aparecer e ocultar elementos com jQuery

video em exibe divs

sexta-feira, 25 de novembro de 2011

Exibe Divs de site 1 e 2

Exibir Foto na Barra Rolante Mostrar Ocultar

Exibir DIV

exibir com link verde e amarelo

exibir com imagem

exibir AQUI FICA O TITULO APOS O CLICK DO MOUSE

EXIBIR Mostrar Ocultar

exibe Quando passar o mouse sobre um link, exibir o conteúdo de uma div

Exibe oculta Divs resposta

Exibe oculta Divs PLANO 01

Exibe oculta Divs Mostra Esconde link

Exibe oculta Divs Mostar site

Exibe oculta Divs FUnciona

Exibe oculta Divs Clique para visualizar

Clique para visualizar

Clique novamente para ocultar

Exibe oculta Divs Artistic

Exibe oculta Divs 1

Exibe oculta Divs

Exibe oculta Divs

Quer usar link em vez de botão?

exibe home quando passa o mouse

Seguidores

Arquivo do blog

Quem sou eu